默认情况下,动画只会播放一次。我们需要它无限次播放,可以添加animation-iteration-count:infinite;如下
当动画结束时候,元素样式默认回到初始状态。我们想要它保持在结束状态。可以添加animation-fill-mode: forwards;如下
我们需要动画延迟播放,可以通过animation-delay的设置来完成如下:
动画循环播放时,每次都是从结束状态跳回到起始状态,再开始播放。animation-direction属性,可以改变这种行为。如下:
动画也可以写成简写属性
下面的表格列出了 @keyframes 规则和所有动画属性: