一、关键帧动画
animation 属性
两个关键词 ：调用动画 animation。定义关键帧(动画)
@keyframes
1.定义关键帧
兼容性前缀
@-webkit-keyframes,谷歌
@-moz-keyframes,火狐
@-ms-keyframes IE,
@-o-keyframes; 欧朋
@keyframes; W3C
语法：
@-webkit-keyframes aniName{
from{
100px;
}to{
200px;
}
}
@keyframes aniName{
0%{
100px;
}
10%{
130px;
}
20%{
180px;
}
80%{
250px;
}
100%{
300px;
}
}
2.动画调用
@-webkit-animation,谷歌
@-moz-animation,火狐
@-ms-animation IE,
@-o-animation; 欧朋
animation:, w3c
注意：animation的各个参数如果分开写也需要前缀
综合写法：
animation:aniName 1s linear 0s infinite alternate(循环) forwords(动画结束时的样式) paused(暂停);
组合写法：
参数一：animation-name:'aniName'; 动画调用的名称
参数二：animation-duration:1s; 动画持续时间
参数三：animation-timing-function:linear; 动画运行轨迹
linear:匀速轨迹
ease-in：低速开始
ease-out 低速结束
ease:低速，加速，减速
ease-in-out:低速进入，低速结束
cublic-bezier(a,b,c,d) 贝塞尔曲线
https://cubic-bezier.com/#.11,1.01,1,.17
参数四:
animation-delay:1s;动画延迟属性，0s是不延迟，如果动画循环执行多次，那么只有开始的时候会延迟，之后的循环动画不会延迟
参数五：
animation-iteration-count:10s;
动画循环次数，整数，infinite 表示无限循环
参数六：
animation-direction:normal;
动画播放方式
normal:正常的播放
reverse：反向播放
alternate：往返播放
alternate-reverse：反向的往返播放
initial:默认值
inherit：从父元素继承
参数七：
animation-fill-mode：forwords;动画执行结束的样式
none：动画结束不使用任何样式到达目的地，返回原来的样式
forward：动画结束展示结束时状态
backwards:动画结束瞬间回到开始的样式
both：遵循forward和backwords的规则，在两个方向上扩展动画属性
注意：none和backwards 都会返回原来的样式
forwards和both都会停在结束时的样式
参数八：animation-play-state:paused;
动画播放暂停状态
paused：暂停状态
running：动画正在播放状态(默认的)
js操控动画播放或暂停：
box.style.WebkitAnimationPlayState='paused';
3.transition与animation的区别
t：对元素的某个或多个属性变化进行过渡，形成一个类似的动画过程，只有开始和结束，需要特殊方式触发，不能使用js
进行开始暂停的控制，只能执行一次，无法循环
a:对元素一个或多个属性执行动画，可以设置多个关键帧，不需要触发就可以直接执行，可以通过js进行精准的控制，
可以无限循环或循环多次
二、兼容性策略
1.平稳退化
对于老版本的浏览器，不考虑效果，只要能展示内容即可，平稳退化就是追歼的放弃老版本浏览器
2.渐进增强
对于低版本的浏览器给与普通的功能，增强高版本浏览器的功能和效果，渐进增强就是加强新版本，追歼放弃老版本浏览器
3.破罐子破摔
直接禁用老版本浏览器
<!-- -->
html5新标签：header footer section aside main......
ie678虽然不支持，但是可以使用，html5shiv.js,这个文件可以让低版本口浏览器支持新标签