css3动画属性如下:
1、animation-name:关键帧名称
2、animation-duration:动画持续的时间
3、animation-timing-function:动画运动类型(匀速liner、加速、减速、贝塞尔曲线…)
4、animation-delay:动画延迟时间
5、animation-iteration-count:运动次数(默认情况为1次、infinite无限循环)
6、animation-direction:运动方向
属性值:normal 正常方向
reverse 反向运行
alternate 先正常运行再反向运行,并持续交替进行
alternate-reverse 先反向再正向运行,并持续交替
7、animation-play-state:运动状态
属性值:running 运动
paused 暂停
注:animation-play-state:paused;鼠标经过时动画停止,移开时动画继续进行
常运用animation复合式写法写css3动画:
animation:关键帧名称(animation-name)运动时间(animation-duration)运动类型(animation-timing-function)延迟时间(animation-delay)
注:按照关键帧属性从上而下顺序依次排列,常运用到前四个属性
案例:
css3动画不需要事件进行触发,调用关键帧即可;在这之前要制定关键帧。
关键帧结构:@keyframes 关键帧的名称{
0%{} /开始状态/
25%{}
50%{}
75%{}
100%{} /结束状态/
}
开始和结束位置应该在同一位置
可将关键帧动画分为多个步骤,如0% 20% 40% 60% 80% 100%
案例:
样式表部分:
body部分: