动画属性的简单认识

Posted 2020-09-30 紙片人

动画属性这一块掌握不是很熟练，将相关知识点整理到此处，知识点摘自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