CSS 使用动画—— @keyframes 规则和 animation 规则

目录

动画

@keyframes规则

浏览器支持

CSS3动画属性

CSS3动画

什么是CSS3中的动画

实例

---

动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

 

@keyframes规则

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

 

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性	Chrome	IE	Firefox	Safari	Opera
@keyframes	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-
animation	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

 

CSS3动画属性

 

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3
animation-fill-mode	规定对象动画时间之外的状态。	3

 

注释：当动画完成后，动画的状态会回到初始状态。

 

注释：要改变这一点，可以设置 animation-fill-mode: forwards; 使动画完成后停留在最后一帧。

 

CSS3动画

当在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

• 规定动画的名称
• 规定动画的时长

 

什么是CSS3中的动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

 

实例

捆绑一个动画到 div 元素，时长 5s

注释：本例在 Internet Explorer 中无效。

注释：必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是0.

 

 

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变

注释：当动画完成时，会变回初始的样式。

注释：本例在 Internet Explorer 中无效。

 

改变背景色和位置

注释：本例在 Internet Explorer 中无效。

 

该例设置了所有属性

注释：本例在 Internet Explorer 中无效。

 

 

使用上例的简写动画animation属性，效果相同：

 

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}