CSS动画简介(2)_H5之家 - 中国HTML5教程资源分享第一站

　　这是一个简写形式，可以分解成各个单独的属性。

div:hover { animation-name: rainbow; animation-duration: 1s; animation-timing-function: linear; animation-delay: 1s; animation-fill-mode:forwards; animation-direction: normal; animation-iteration-count: 3; } 　　2.5 keyframes的写法

　　keyframes关键字用来定义动画的各个状态，它的写法相当自由。

@keyframes rainbow { 0% { background: #c00 } 50% { background: orange } 100% { background: yellowgreen } }

　　0%可以用from代表，100%可以用to代表，因此上面的代码等同于下面的形式。

@keyframes rainbow { from { background: #c00 } 50% { background: orange } to { background: yellowgreen } }

　　如果省略某个状态，浏览器会自动推算中间状态，所以下面都是合法的写法。

@keyframes rainbow { 50% { background: orange } to { background: yellowgreen } } @keyframes rainbow { to { background: yellowgreen } }

　　甚至，可以把多个状态写在一行。

@keyframes pound { from，to { transform: none; } 50% { transform: scale(1.2); } }

　　另外一点需要注意的是，浏览器从一个状态向另一个状态过渡，是平滑过渡。steps函数可以实现分步过渡。

div:hover { animation: 1s rainbow infinite steps(10); }

　　这里有一个非常神奇的例子，可以看到steps函数的用处。

　　2.6 animation-play-state

　　有时，动画播放过程中，会突然停止。这时，默认行为是跳回到动画的开始状态。

　　上面动画中，如果鼠标移走，色块立刻回到动画开始状态。

　　如果想让动画保持突然终止时的状态，就要使用animation-play-state属性。

div { animation: spin 1s linear infinite; animation-play-state: paused; } div:hover { animation-play-state: running; }

　　上面的代码指定，没有鼠标没有悬停时，动画状态是暂停；一旦悬停，动画状态改为继续播放。效果如下。

　　2.7 浏览器前缀

　　目前，IE 10和Firefox（>= 16）支持没有前缀的animation，而chrome不支持，所以必须使用webkit前缀。

　　也就是说，实际运用中，代码必须写成下面的样子。

div:hover { -webkit-animation: 1s rainbow; animation: 1s rainbow; } @-webkit-keyframes rainbow { 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } } @keyframes rainbow { 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } }

　　哈尔滨品用软件有限公司致力于为哈尔滨的中小企业制作大气、美观的优秀网站，并且能够搭建符合百度排名规范的网站基底，使您的网站无需额外费用，即可稳步提升排名至首页。欢迎体验最佳的哈尔滨网站建设。