1.CSS动画
由于该技术的规范还没有稳定，在使用前要先确保浏览器对其兼容性。 Animations是css3的一个模块，使用keyframes定义如何随着时间的移动改变CSS的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任何Js技术即可完成动画的制作\
过渡和动画的异同:
不同点：
过渡必须要人为的触发才会执行动画不需要认为的触发就可以触发执行页面
相同点：
过渡和动画都是用来给元素添加动画的过渡和动画都是系统新增的一些属性过渡和动画都需要满足三要素才会有动画效果(三要素见主页博客CSS Transition过渡)
2.Animate属性设置
animation-name 指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画通过@keyframes来设置动画序列，序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染。关键帧使用了一个百分比来表示在动画序列中出现的时间。0%表示动画的初始时间，也可以通过from关键字表示。100%表示动画的结束时间，也可以通过to关键字表示。
@keyframes animiationName{ keyframes-selector{ css-style; }}
animation-duration 动画指定需要多少秒或毫秒完成，告诉系统动画持续的时长
time 指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果。animation-timing-function 设置动画将如何完成一个周期，告诉系统动画执行的速度
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。animation-delay 设置动画在启动前的延迟间隔
time可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0animation-iteration-count 定义动画的播放次数。告诉系统动画需要执行几次
n 一个数字，定义应该播放多少次动画
infinite 无限次执行animation-direction 指定是否应该轮流反向播放动画。
normal 默认的取值, 执行完一次之后回到起点继续执行下一次
alternate 往返动画, 执行完一次之后往回执行下一次
reverse 反向执行animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
none: 不做任何改变
forwards: 让元素结束状态保持动画最后一帧的样式
backwards: 让元素等待状态的时候显示动画第一帧的样式
both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式animation-play-state 告诉系统当前动画是否需要暂停
running: 执行动画
paused: 暂停动画动画模块连写格式
animation:动画名称(animation-name) 动画时长(animation-duration) 动画运动速度(animation-timing-function) 延迟时间(animation-delay) 执行次数(animation-iteration-count) 往返动画(animation-direction);动画模块连写格式的简写
animation:动画名称 动画时长;
代码示例：
div{/* 设置动画名称 */animation-name: leftToRight;/* 设置动画持续时间 */animation-duration: 5s;/* 设置动画执行速度 */animation-timing-function: ease;/* 设置动画等待时长 */animation-delay: 2s;/* 设置动画播放次数:n和 infinite(无限次) */animation-iteration-count: 1;/* 设置动画是否反向播放 alternate反向播放 */animation-direction: alternate;/* 动画不播放或者等待时长应用的样式 *//* 动画结束时应用最后一帧 */animation-fill-mode: forwards;/* 简写形式 */animation: leftToRight 1s linear ;}/* 动画关键帧 */@keyframes leftToRight {/* 开始 中间过程 结束状态 */0% {margin-left: 0;}25% {margin-left: 150px;}50% {margin-left: 250px;}100% {margin-left: 350px;}}
