最新的Web开发教程
 

CSS动画

❮上一页 下一页章❯

CSS3动画

CSS3动画允许大多数HTML元素的动画，而无需使用JavaScript或Flash！

CSS3
动画

对于动画浏览器支持

在表中的数字规定，完全支持该属性的第一个浏览器版本。

其次通过数字-webkit-, -moz- ，或-o-指定用一个前缀工作的第一个版本。

属性
@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属性，你想多次。

要使用CSS3动画，必须先指定为动画关键帧一些。

关键帧保持元件将具有在特定的时间什么样式。

该@keyframes规则

当您指定内部CSS样式@keyframes规则，动画将逐步从目前的样式更改在特定时间的新样式。

为了得到一个动画的工作，必须绑定动画的元素。

下面的例子绑定了“榜样”的动画到<div>元素。 该动画将持续4秒钟，它会逐渐的背景颜色改变<div>元素从“红”到“黄色”：

例

/* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}
试一试»

注意：如果animation-duration不指定属性，动画将没有任何效果，因为默认值是0。

在上面我们已指定时的样式将通过使用关键字来更改示例"from"和"to" （表示为0％（开始）和100％（完全））。

另外，也可以使用百分之。 通过使用百分比，可以根据需要添加尽可能多的风格变化。

下面的例子将改变背景色<div>元素中的动画完成25％，完成50％的时候，再次当动画100％完成：

例

/* The animation code */
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}
试一试»

下面的例子将改变这两个背景颜色和位置<div>元素中的动画完成25％，完成50％的时候，再次当动画100％完成：

例

/* The animation code */
@keyframes example {
    0%   {background-color: red; left:0px; top:0px;}
    25%  {background-color: yellow; left:200px; top:0px;}
    50%  {background-color: blue; left:200px; top:200px;}
    75%  {background-color: green; left:0px; top:200px;}
    100% {background-color: red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}
试一试»

耽误动画

该animation-delay属性指定动画的开始会有一个延迟。

下面的例子有启动动画前2秒延时：

例

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}
试一试»

设置多少次动画应该运行

该animation-iteration-count属性指定的时间的动画应该运行的数量。

下面的例子将运行动画3次之前停止：

例

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}
试一试»

下面的示例使用值“ infinite ”，使动画继续，直到永远。

例

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
试一试»

在反方向或交替周期中运行动画

该animation-direction属性用来让反方向或交替循环的动画运行。

下面的例子将运行在相反的方向动画：

例

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: reverse;
}
试一试»

下面的示例使用值"alternate" ，使动画第一向前跑，然后向后，再向前：

例

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: alternate;
}
试一试»

指定动画的速度曲线

该animation-timing-function属性指定动画的速度曲线。

动画定时功能属性可以有以下值：

  • ease -指定一个缓慢的开始一个动画，那时快，然后结束慢（这是默认）
  • linear -指定与从开始以相同的速度来结束动画
  • ease-in -指定一个缓慢的开始动画
  • ease-out -指定一个缓慢的结尾动画
  • ease-in-out -指定一个缓慢的开始和结束动画
  • cubic-bezier(n,n,n,n) -让您在立方贝塞尔函数定义自己的价值

下面的例子示出了一些可用于不同的速度曲线：

例

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
试一试»

动画速记属性

下面的示例使用的动画属性的六：

例

div {
    animation-name: example;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
试一试»

相同的动画效果如上述可以通过使用速记来实现animation属性：

例

div {
    animation: example 5s linear 2s infinite alternate;
}
试一试»

自测练习用！

练习1» 练习2» 练习3» 练习4» 练习5» 练习6»

CSS3动画属性

下表列出了@keyframes规则，所有的动画属性：

属性 描述
@keyframes 指定动画代码
animation 简写属性设置所有动画属性
animation-delay 指定的动画的开始的延迟
animation-direction 指定动画是否应该反方向或交替循环播放
animation-duration 指定的动画多少秒或毫秒需要完成一个周期
animation-fill-mode 指定元素样式当动画是不是在玩（当它结束时，或者当它有一个延迟）
animation-iteration-count 指定的动画应该播放的次数
animation-name 指定@keyframes动画的名称
animation-play-state 指定动画是否正在运行或暂停
animation-timing-function 指定动画的速度曲线

❮上一页 下一页章❯