整 理：肖雅君、曹燕 时 间：2015-11-05 说 明：animation属性的介绍和简单的用法 一、兼容性 二、语法介绍 1 定义keyframes语法 1.1 语法 1.2 值和描述 2 调用动画语法 2.1 语法 2.2 属性值 3 属性值详解 3.1 animation-duration 3.2 animation-timing-function 3.3 animation-iteration-count 3.4 animation-direction 三、综合示例 Animation 一、兼容性 Chrome 13+、Firefox 5+、Safari 5.1+、Opera 12+、IE10+均支持animation 常用前缀： Firefox：-moz Safari 和 Chrome：-webkit Opera ：-o 二、语法介绍 1 定义keyframes语法 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 1.1 语法 @keyframes animation-name{keyframes-selector {css-styles;}} 1.2 值和描述 animation-name：(必需)指定要绑定到选择器的关键帧的名称，即动画的名称。 keyframes-selector：(必需)动画时长的百分比。 建议: 在CSS3中，我们以百分比来规定改变发生的时间，或者通过关键词“from”和”to”,等价于0%和100%，其中，0%是动画的开始时间。100%是动画的结束时间。 例如： @keyframes colorchange { 0% { background-color:#00f; /* from:blue */ } 25% { background-color:#f00; /* red */ } 50% { background-color:#0f0; /* green */ } 75% { background-color:#f0f; /* purple */ } 100% { background-color:#00f; /* to: blue */ } } @-webkit-keyframes colorchange { 0% { background-color: #00f; /* from:blue */ } 25% { background-color: #f00; /* red */ } 50% { background-color: #0f0; /* green */ } 75% { background-color: #f0f; /* purple */ } 100% { background-color: #00f; /* to: blue */ } } 解释：这个例子中定义了background-color这个属性。其中0%这可以用from关键字来代替，100%可以用to代替。即： @keyframes colorchange { from { background-color: #00f; /* from: blue */ } 25% { background-color: #f00; /* red */ } 50% { background-color: #0f0; /* green */ } 75% { background-color: #fF0f; /* purple */ } to { background-color: #00fF; /* to: blue */ } } 2 调用动画语法 2.1 语法 animation:name duration timing-function delay iteration-count direction; 例：animation:changeColor 6s ease-in-out .2s infinite alternate; 2.2 属性值 animation属性是一个简写属性，用于设置动画的属性。 animation-name：该属性主要是用来调用@keyframes定义好的动画。 animation-duraton：动画指定需要多久完成，默认是0。 animation-timing-function：设置动画的速度曲线，默认是”ease”。 animation-delay： 设置在动画将启动之前经过的延迟间隔，默认是0。 animation-iteration-count：设置动画周期的播放次数，默认是1。 animation-direction：设置对象动画在循环中是否反向运动，默认是“normal”。 3 属性值详解 3.1 animation-duration 指定动画需要多久完成。请始终规定animation-duration属性，否则时长为0，就不会播放动画了。 3.2 animation-timing-function animation-timing-function值 ease：默认值，元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐减慢。 liner：元素样式从初始状态过渡到终止状态速度是恒速。 ease-in：元素样式从初始状态过渡到终止状态时，速度越来越快，呈一种加速状态。常称这种状态为渐显效果。 ease-out：元素状态从初始状态过渡到终止状态时，速度越来越缦。呈一种减速状态。常称这种状态为渐隐效果。 ease-in-out：元素样式从初始状态到终止状态时，先加速再减速。常称这种效果为渐显渐隐效果。 3.3 animation-iteration-count 指定动画的播放次数，取值可以是： n：即具体的数字，表示具体的播放次数； infinite：表示无数次播放。 3.4 animation-direction 有四个值： normal：默认，从0%到100%； reverse：动画从100%执行到0%； alternate：动画在0%到100%之间往复执行； alternate-reverse与alternate一致，不过是从100%开始。 三、综合示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>animation</title> <style> @keyframes slide{ 0% {background:#f00; left:0px; top:0px;} /* from: red */ 100% {background:#fefe00; left:200px; top:0px;} /* to: yellow */ } @-moz-keyframes slide{ 0% {background:#f00; left:0px; top:0px;}/* from: red */ 100% {background:#fefe00; left:200px; top:0px;} /* to: yellow */ } @-webkit-keyframes slide{ 0% {background:#f00; left:0px; top:0px;}/* from: red */ 100% {background:#fefe00; left:200px; top:0px;} /* to: yellow */ } @-o-keyframes slide{ 0% {background:#f00; left:0px; top:0px;}/* from: red */ 100% {background:#fefe00; left:200px; top:0px;} /* to: yellow */ } .box{ width:100px; height:100px; background:red; position:relative; animation:slide 5s linear 2s infinite alternate; /* Firefox: */ -moz-animation:slide 5s linear 2s infinite alternate; /* Safari and Chrome: */ -webkit-animation:slide 5s linear 2s infinite alternate; /* Opera: */ -o-animation:slide 5s linear 2s infinite alternate; } </style> </head> <body> <div class="box"></div> </body> </html> 说明：这段代码首先用@keyframes定义了一个名称为“slide”的动画，效果是使一个背景为红色的元素从左向右滑动200px，同时背景色变为黄色；然后将这个动画效果和box类绑定，使这个动画：先延迟2s、然后无限循环播放此动画、5s完成一次动画、每次动画都以匀速演示、奇数次动画正向播放、偶数次动画逆向播放。