Question

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

http://jsbin.com/tijapahuwi/edit?html,css,output

@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="">

Answer 1

animation-direction: alternate;是一个好的开始

每次迭代都以另一个方向运行

所以，2次迭代回到你开始的地方 - 即

animation-iteration-count: 2;

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

Answer 2

怎么样？：

{{1}}

Answer 3

尝试此解决方案

@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;
}

希望这对你有所帮助。

回到初始风格时的Css动画

3 个答案: