.animation{
animation-name:example; /*动画名称*/
animation-duration:3s; /*动画持续时间*/
animation-delay:1s; /*动画延迟时间*/
animation-iteration-count:infinite; /*动画循环次数*/
animation-direction:alternate; /*动画方向*/
animation-timing-function:ease-in-out; /*动画速度曲线*/
}
@keyframes example{
0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}animation-name
CSS 动画需要定义一个名称，这个名称可以在其他 CSS 规则中使用。同时，这个名称也会被用于引用动画效果。
animation-duration
这个属性设置动画的持续时间，根据设置来确定动画完成一个循环所需要的时间。时间值可以使用秒（s）或毫秒（ms）作为单位来指定。
animation-delay
这个属性设置动画开始的延迟时间，根据设置来确定动画开始前需要等待多长时间。时间值可以使用秒（s）或毫秒（ms）作为单位来指定。
animation-iteration-count
这个属性设置动画的循环次数，可以使用一个数字或关键字 infinite 来指定。如果设置为 infinite，则动画将永远循环播放。
animation-direction
这个属性指定动画是否应该反向播放，可以使用关键字 alternate 或使用两个关键字 normal 和 reverse。默认值为 normal。
animation-timing-function
这个属性指定动画变化的速度曲线。常用的取值有 ease、linear、ease-in、ease-out、ease-in-out 等。也可以使用 cubic-bezier() 函数来定义自己的速度曲线。
在定义 CSS 动画时，大家还需要使用 @keyframes 规则来定义动画的关键帧。在 @keyframes 规则中，大家可以对不同的百分比位置上的元素应用不同的样式，并且用from和to或百分比值来定义动画的开始和结束状态。