动画属性的简单认识

动画属性这一块掌握不是很熟练，将相关知识点整理到此处，知识点摘自W3school。

@keyframes        规定动画

animation        所有动画属性的简写属性，除了animation-play-state属性

animation-name         规定@keyframes动画的名称

animation-duration        规定动画完成一个周期所花费的秒或毫秒

animation-timing-function        规定动画的速度曲线

animation-delay        规定动画何时开始

animation-iteration-count        规定动画被播放的次数

animation-direction            规定动画是否在下一周期逆向地播放

animation-play-state            规定动画是否正在运行或暂停

animation-fill-mode            规定对象动画时间之外的状态

通过@keyframes规则，创建动画，以百分比规定改变发生的时间，或者通过关键词“from”和“to”，等价于0%和100%，0%是动画开始的时间，100%是动画的结束时间。

语法：@keyframes  animationname{

keyframes-selector{css-styles;}

}

animation属性：

这是一个简写属性，用于设置六个动画属性：

animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction