css动画属性有哪些？

css动画

css中动画叫做animation
它的特点：不需要事件进行触发，配合调用关键帧即可。

css动画属性

1 动画的名称 ，设置对象所应用的动画名称，需要调用关键帧来使用
关键帧：
关键帧的表示方法

1.可以使用from和to
@keyframes 关键帧的名称{
           from{初始状态属性}
			to{结束状态属性}
}
2.可以用百分比来划分多个步骤
@keyframes 关键帧的名称{
           0%{
                开始状态
            }
            25%{

            }
            50%{

            }
            ......
            100%{
                结束状态
            }
           }

2 animation-duration 动画的持续的时间

即设置对象动画的持续时间
例如：
animation-duration:3s; 即动画完成使用的时间为3s

举例：下方div为父元素，h1为子元素，完成动画的时间为3s，匀速运动，无线循环

3 nimation-timing-function 动画运用的类型

即设置对象动画的过渡类型
①linear：匀速。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
②ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
③ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
④ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
⑤ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
⑥step-start:马上跳到动画每一结束桢的状态:没有动画中间的过渡效果。每次直接跳到下一帧开始的地方

举例：
下方为step-start 逐帧动画的显示，截取一小段代码：

4 animation-delay 动画的延迟

即设置对象动画延迟的时间
例如：
animation-delay:1s; 动画开始前延迟的时间为1s

5 animation-iteration-count 动画运动的次数

即设置对象动画的循环次数

①number: 动画运动循环的次数（默认情况下运动1次）
例如： 
animation-iteration-count: 3;即动画运动三次

②infinite(无限循环)
例如：
animation-iteration-count: infinite;即动画会无限循环展示

举例：下方为球体的无线循环转动

6 animation-direction 运动的方向

设置对象动画在循环中是否反向运动

①reverse：反方向运行 （ 让关键帧从后往前执行 ）
②alternate：动画先正常运行再反方向运行，并持续交替运行
③alternate-reverse：动画先反运行再正方向运行，并持续交替运行
④normal：正常方向

举例：截取小段css代码
		h1{
            position: absolute;
            width: 50px;
            height: 50px;
            background: salmon;
            border-radius: 100%;
            animation: h1move 5s linear reverse infinite;
        }
        reverse：反方向运行

7 animation-play-state

即设置对象动画的状态

①running:运动
②paused: 暂停
例如：
animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行