css3中的动画属性

css3中的动画属性----animation

1.运用animation，不需要事件触发，调用关键帧即可；
2.制定关键帧
第一种：@keyframes 关键帧名称 {
from{
left：px；top：px；
}
to{
left：px；top：px；
}
}
这种方法制定的关键帧只能实现从左到右或者从上到下，所以并不能满足所有需求；

第二种：@keyframes 关键帧名称 {
0%{
left：px；top：px；
}
25%{
left：px；top：px；
}
50%{
left：px；top：px；
}
75%{
left：px；top：px；
}
100%{
left：px；top：px；
}
}
可以根据自己的需求进行划分，不一定是划分为四等分；所以第二种也较为常用；
css3中的动画属性
3.animation的复合属性
animation-name ：关键帧的名称（与@keyframes配合使用）；
例如：animation-name：rotateBox；
@keyframes rotateBox{ }

animation-duration ：动画持续的时间；
例如：animation 1s；（1次动画在1s内完成）

animation-timing-function ：动画的运用类型；
step-start 逐帧动画（马上跳到每一帧动画结束的状态）
linear 匀速
easa-in 加速，由慢到快；
ease-out 减速，由快到慢；
ease-in-out 先加速后减速，由慢到快再到慢（默认）；
贝塞尔曲线
例如：animation-timing-function：linear；匀速运动

animation-delay ：动画延迟的时间；
例如：animation-delay：3s；动画一开始先等3s再开始；

animation-iteration-count ：动画的次数（默认情况下一次）
infinity无限循环；
也可根据自己的需要在后面填想要的次数；
例如：animation-iteration-count：3；动画循环3次后停止；

animation-direction ：动画运功的方向
reverse 反向运行；
alternate 先正向再反向并持续交替；
alternate-reverse 先反向再正向并持续交替``；
例如：animation-direction：reverse；反向运行；

animation-play-state当鼠标滑过动画时，动画状态；
paused 暂停
running运动
例如：animation-play-state：paused；当鼠标滑过时动画停止；

*常用写法：
animation：关键帧的名称动画持续的时间动画的运用类型动画延迟的时间；
例如：animation：rotateBox 1s linear 3s；

css3中的动画属性----animation

相关推荐