动画Animation 常用属性

动画就是由一个个的关键帧组成的。

想实现一个动画的效果，这个时候

1.需要先预设一个动画

@keyframes cc {
/* 动画序列：时间节点 */
/* 开始状态 */
/* 节点设置 */
/* 写CSS属性 */
from {
transform: translateX(0px);
}
/* 结束状态 */
to {
transform: translateX(500px);
}
/* ************************************百分数 */
0% {
/* 节点设置 */
/* 写CSS属性 */
transform: translateX(0px);
}
50% {
transform: translateX(800px);
}
100% {
/* 注意点：节点状态一定是在上一个节点状态上进行 */
transform: translateX(800px) translateY(600px);
}
}

百分比指的是动画耗时（animation-duration）的时间比

2.设置动画属性

先来一个综合

animation: name duration timing-function delay iteration-count direction fill-mode;

　其中两个必要的属性就是

1.animation-name：cc; 你用@keyframe设置的动画的名字(必要）

2.anmation-duration：3s； 动画耗时（必要）

3.animation timing-function ：运动速度

默认属性ease（低速开始，加快，低速结束） linear（匀速运动） ease-in（低速开始）

ease-out（低速结束）ease-in-out 低速开始和结束 steps（n）动画分成n步来完成

　　cubic-bezier()函数，https://cubic-bezier.com/网站自动生成运动曲线

效果图 http://www.w3school.com.cn/tiy/c.asp?f=css_animation-timing-function

4.animation-delay ：2s；延迟时间

5.animation-interation-count：2/infinite（无限次）动画响应的次数（interation英文意思相互影响）

6.animation-direction: 循环方向

默认normal(默认0~100) / alternate(0~100~0)/ reverse(100~0)/

alternate-reverse(100~0~100)

7.animation-fill-mode 动画等待或者结束时候的状态

forwards 初始状态不能立即执行0%的状态，执行动画完成后保留最后状态

backwards 如在0%时候设置样式，立即执行。动画完成后不会保留最后的结果（有延迟）

both 既能立即执行设置的样式，也会保留最后的结果。

8.animation-play-state （不在简写内）播放和暂停状态 paused暂停 running 播放