css3写的动画反复执行

CSS3是一种非常强大的样式语言，可以用它来实现各种各样的动画效果。其中一个比较常见的需求是使动画可以反复执行，而不是只执行一次。

@keyframes myanimation {
0% {
    transform: translateY(0);
}
100% {
    transform: translateY(50px);
}
}
.myelement {
    animation: myanimation 1s ease-in-out infinite alternate;
}
    

上面的代码中，我们定义了一个名为“myanimation”的动画，它在0%和100%的时候改变元素的垂直位置，使其向下移动50像素。然后，我们给这个元素添加了一个类名“myelement”，并通过CSS的“animation”属性将动画应用到这个元素上。

其中，“1s”表示动画持续的时间为1秒，“ease-in-out”表示动画的缓动函数为先加速后减速，“infinite”表示动画无限重复执行，“alternate”表示动画每次反转执行，也就是说，如果第一次是从0%到100%，那么下一次就是从100%到0%，依此循环。

这样，我们就实现了一个反复执行的CSS3动画。这种功能在某些场景下非常有用，比如我们想让一个图标不停地旋转或者让一个按钮的背景色来回闪烁。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！