CSS3 Animation动画

感谢W3C

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 “ease”。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。 3
animation-fill-mode 规定对象动画时间之外的状态。 3

简写

animation: name duration timing-function delay iteration-count direction;

补充一下:animation-fill-mode
在这里插入图片描述

另外也可以通过js更改类样式的方式更改动画

参考:https://blog.csdn.net/reagan_/article/details/81675203

原文地址:https://www.cnblogs.com/tfxz/p/12823677.html