动画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 播放