CSS动画属性汇总
@keyframes
说明：@keyframes⽤于定义动画，其实动画原理很简单，就是不同的时刻改变css的样式，以百分⽐规定改变发⽣的时间，它有两个关键词即from和to,from等价于0&表⽰起始位置，to等价于100%表⽰结束位置。
animation-name属性
说明：该属性⽤于定义动画名字，上⾯的例⼦中"move"就是动画的名字，它的默认值为none，当我们想取消动画效果时可以设置为none。
animation-duration属性
说明：定义动画完成⼀个周期所花费的时间，默认值为0，单位为s也可以是ms，上⾯的例⼦中是2s。
animation-timing-function属性
说明：该属性定义速度曲线。上⾯的例⼦中，实际上相当于:
.
animation {
animation: move 2s infinite;
animation-timing-function: ease;
}
ease默认值，表⽰低速开始，中间加快，结尾变慢
ease-in表⽰低速开始
ease-out表⽰低速结束
ease-in-out表⽰低速开始和结束
linear表⽰匀速
cubic-bezier(n,n,n,n)⾃定义。
animation-delay属性
.
animation {
animation: move 2s infinite;
animation-delay: 1s;
}
说明：该属性定义动画等待多长时间后开始，只有第⼀次运动时会等待，值单位可以为m和ms。值可以是负值，负值表⽰跳过指定时间的动画，以上⾯的例⼦来说，如果animation-delay: -1s;，相当于动画被抵消了1s，剩余1s时间，从中间开始运动到结束。
animation-iteration-count属性
.animation {
animation: move 2s infinite;
animation-iteration-count: 5;
}
说明：该属性表⽰动画运动的次数，默认运动1次。属性值为数字，也可以是infinite表⽰⽆限次运动。
animation-direction属性
.animation {
animation: move 2s infinite;
animation-direction: alternate;
}
说明：该属性定义动画在偶数次数倒序播放，默认值normal表⽰正常播放，可选值alternate动画轮流反向播放。
animation-play-state属性
.animation {
animation: move 2s infinite;
animation-play-state: paused;
}
说明：该属性规定动画是播放状态还是暂停状态，默认值running，可选值paused暂停播放。通常配合脚本使⽤，暂停后再播放是从暂停的位置继续运动。
animation-fill-mode属性
.animation {
animation: move 2s infinite;
animation-delay: 2s;
animation-fill-mode: both;
}
html animation属性
说明：该属性规定动画播放前后，动画效果是否可见。这是⼀个⾮常重要的属性。⼀个物体如果设置了动画，他肯定有运动前的状态和运动结束后的状态，默认值none表⽰保持默认⾏为，即动画从起始状态到结束状态，然后⼀下⼦跳到起始状态并定格在这⾥。forwards表⽰动画结束后定格在结束的状态。bac
kwards这个属性可以让我们制作队列动画，⽐如我们有move1和move2两个动画，我们希望move1结束
后，move2开始运动，我们为move2设置animation-delay使他等于move1的运动时长，但是在move1结束之前move2要保持在起始状态做准备运动，这时候为move2设置animation-fill-mode: backwards就可以了，该属性表⽰在animation-delay这段时间，元素保持在运动的起始状态。both属性是最常⽤的⼀个属性，表⽰在等待时间内保持在起始状态，结束后保持在结束状态。
animation属性
.animation {
animation: move 2s ease infinite ;
}
说明：这是⼀个简写属性，它是以下六个属性的简写：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
表⽰“动画名字，运动时间，曲线函数，等待时间，播放次数，是否倒序”。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。