一、关键帧动画 animation 属性 两个关键词 ：调用动画 animation。定义关键帧(动画) @keyframes 1.定义关键帧 兼容性前缀 @-webkit-keyframes,谷歌 @-moz-keyframes,火狐 @-ms-keyframes IE, @-o-keyframes; 欧朋 @keyframes; W3C 语法： @-webkit-keyframes aniName{ from{ width:100px; }to{ width:200px; } } @keyframes aniName{ 0%{ width:100px; } 10%{ width:130px; } 20%{ width:180px; } 80%{ width:250px; } 100%{ width: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,这个文件可以让低版本口浏览器支持新标签
转载于:https://www.cnblogs.com/txf-123/p/11190118.html
