css3 animation详解.docVIP

基本用法： @-webkit-keyframes myMove/* Safari 和 Chrome */ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } .div1{ -webkit-animation: myMove 5s linear 2s infinite alternate; } 动画执行完后的回调函数 obj.addEventListener(webkitAnimationEnd, function(){ ? ? ?alert(34); }, false); 开始事件 webkitAnimationStart?结束事件 webkitAnimationEnd （测试可用）重复运动事件 webkitAnimationIteration 过渡动画执行完后的回调函数 过渡动画结束 webkitTransitionEnd 注意：1.回调函数内的visibility属性过渡效果会失效 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 @-webkit-keyframes myfirst /* Safari 和 Chrome */ { from {background: red;} to {background: yellow;} } div { -webkit-animation: myfirst 5s; /* Safari 和 Chrome */ } 请用百分比来规定变化发生的时间，或用关键词 from 和 to，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。 为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。 实例 当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变： @-webkit-keyframes myfirst /* Safari 和 Chrome */ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } CSS3 动画属性 下面的表格列出了 @keyframes 规则和所有动画属性： 属性描述CSS HYPERLINK /cssref/pr_keyframes.asp \o CSS3 @keyframes 规则 @keyframes规定动画。3 HYPERLINK /cssref/pr_animation.asp \o CSS3 animation 属性 animation所有动画属性的简写属性，除了 animation-play-state 属性。3 HYPERLINK /cssref/pr_animation-name.asp \o CSS3 animation-name 属性 animation-name规定 @keyframes 动画的名称。3 HYPERLINK /cssref/pr_animation-duration.asp \o CSS3 animation-duration 属性 animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3 HYPERLINK /cssref/pr_animation-timing-function.asp \o CSS3 animation-timing-function 属性 animation-timing-function规定动画的速度曲线。默认是 ease。精灵动画（阶跃动画）steps（number,state）?number:动画分为多少帧state：动画结束后的状态（可选）3 HYPERLINK /cssref/pr_animation-delay.asp \o CSS3 animation-delay 属性 animation-delay规定动画何时开始。默认是 0。3 HYPERLINK /cssref/pr_animation-iteration-count.asp \o CSS3 animation-iteration-count 属性 animation-iteration-count规定动画被播放的次数。默认是 1。?infinite(循环播放)?3 HYPERLINK /cssref/pr_animati