css3动画属性有哪些

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部分：

效果：在一个大的矩形区域内有一个小的矩形，开始在其左上角，然后平移到右上角，再到右下角，最后到左下角，回到起始位置左上角。如此往复，无限循环，鼠标滑过大盒子时运动停止，松开后小盒子继续运动。