回到初始样式时的Css动画

Css animation when go back to initial style

本文关键字：Css 动画 样式      更新时间：2023-09-26

我在图像上有缩放动画，但当动画完成并返回到初始大小时没有动画，当返回到初始值时如何强制动画？

http://jsbin.com/tijapahuwi/edit?html，css，输出

@keyframes scaleImg {
    from {
        transform: scale(0.8);
    }
    to {
        transform: scale(1);
    }
}
img { 
   transform: scale(0.8);
   animation: scaleImg 1.5s;
   animation-direction: alternate;
}

<img src="http://lorempixel.com/400/200/sports/" alt="">

animation-direction: alternate;是的良好开端

每次迭代都在交替方向上运行

因此，需要两次迭代才能回到起点，即

animation-iteration-count: 2;

当然，如果您希望总时间为1.5s，则需要将1.5s更改为750ms以及

如何处理？：

@keyframes scaleImg {
    0% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.8);
    }
}
img { 
   transform: scale(0.8);
   animation: scaleImg 1.5s;
   animation-timing-function: linear;
}

尝试此解决方案

@keyframes scaleImg {
    0% {
    transform: scale(0.8);
}
50% {
    transform: scale(1);
}
100% {
    transform: scale(0.8);
}
img { 
   transform: scale(0.8);
   animation: scaleImg 1.5s;
   animation-direction: alternate;
}

希望这对你有所帮助。

相关文章：