深入理解CSS 动画

通过CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画以及 JavaScript实现的效果。要创建 CSS3 动画，需要学习 @keyframes 规则。 @keyframes 规则是创建动画。 @keyframes 规则内指定某个 CSS样式就能从目前的样式更改为新样式的动画效果。注意：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。Chrome 和 Safari 需要前缀 -webkit-。在 @keyframes 创建动画时，需要把它绑定到某个选择器，否则动画就不会有任何效果。指定至少两个CSS3的动画属性就可以绑定到选择器： 规定动画的名称 规定动画的时长示例：把 "myfirst" 动画捆绑到html的 div 元素，时长：5 秒：123456789101112131415161718192021222324<style>div{width:100px;height:100px;background:red;animation:myfirst 5s;-webkit-animation:myfirst 5s; /* Safari and Chrome */}@keyframes myfirst{from {background:red;}to {background:yellow;}}@-webkit-keyframes myfirst /* Safari and Chrome */{from {background:red;}to {background:yellow;}}</style><p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p><div></div>2，当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<style>div{width:100px;height:100px;background:red;animation:myfirst 5s;-moz-animation:myfirst 5s; /* Firefox */-webkit-animation:myfirst 5s; /* Safari and Chrome */-o-animation:myfirst 5s; /* Opera */}@keyframes myfirst{0%   {background:red;}25%  {background:yellow;}50%  {background:blue;}100% {background:green;}}@-moz-keyframes myfirst /* Firefox */{0%   {background:red;}25%  {background:yellow;}50%  {background:blue;}100% {background:green;}}@-webkit-keyframes myfirst /* Safari and Chrome */{0%   {background:red;}25%  {background:yellow;}50%  {background:blue;}100% {background:green;}}@-o-keyframes myfirst /* Opera */{0%   {background:red;}25%  {background:yellow;}50%  {background:blue;}100% {background:green;}}</style><div></div><p><b>注释：</b>当动画完成时，会变回初始的样式。</p><p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>以上两个例子代码可以尝试一下CSS3的动画属性属性描述CSS@keyframes规定动画3animation所有动画属性的简写属性，除了 animation-play-state 属性3animation-name规定 @keyframes 动画的名称3animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 03animation-timing-function规定动画的速度曲线。默认是 "ease"3animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式3animation-delay规定动画何时开始。默认是 03animation-iteration-count规定动画被播放的次数。默认是 13animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"3animation-play-state规定动画是否正在运行或暂停。默认是 "running"3