CSS学习笔记–动画模块
一、动画与过渡模块的区别：
1.过渡和动画都是为了给元素添加动画的；
2.过渡必须人为的触发 才会执行动画，而动画不需要认为的触发；
3.都需要满足三要素才会有动画效果；（执行什么动画，什么动画，持续时长）
二、格式:
写在需执行元素的括号内，如div{ }
animation-name：abcd；
持续时长（写在需执行元素的括号内）
animation-duration：3s；
告诉系统我们需要自己创建一个名字叫abcd的动画（单独写，写在style中）
@keyframes abcd｛
from｛ margin-left：0 ｝
to｛ margin-left：50px；｝
｝
当有多个变化时，可以使用百分比形式来定义每一步的变化。如：
@keyframes aaa {
0%{ transform: rotate(0deg)； }
20%{ transform: rotate(20deg); }
30%{ transform: rotate(30deg); }
}
三、动画相关的其他属性：
1.告诉动画持续的时长
animation-duration
2.告诉系统多少秒之后开始执行动画
animation-delay
3.告诉系统动画执行的速度
animation-timing-function
4.告诉系统需要执行几次
animation-iteration-count
5.告诉系统是否需要执行往返动画
animation-direction:
取值：normal 执行完一次之后回到起点执行下一次，aleternate执行完一次之后往回执行下一次
6.告诉系统是否需要执行动画
animation-play-state：（取值running执行，paused暂停）
如鼠标悬停到元素上时（div: hover），元素暂停，离开后又继续运动
四、动画例子–使元素沿矩形运动：使一个div沿着边长为300px的正方形框顺时针运动
先对执行元素经行绝对定位：
再设置：
五、通过我们的观察，动画有一定的状态的，有：
1.等待状态
2.执行状态
3.结束状态
1.指定动画等待状态和结束状态的样式
animation-fill-mode:
2.取值：
none：不做 任何改变
forwards:让元素结束状态保持动画最后一帧的样式
backwards：让元素等待状态的时候显示动员第一帧的样式
both：让元素等待状态显示动画第一帧的样式，让元素结束状态保持动画最后一帧的样式
3.连写格式：
animation :动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画
动画模块简写：
animation :动画名称 动画时长
4.无限循环动画（轮播）要点: 在最后那张图片后再多接两张前面第一张的图片；
===笔记内容来自于《从零玩转HTML5前端+跨平台开发》