W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS3 动画



CSS3 动画

CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画,和JAVAScripts!

CSS3
Animation

浏览器支持

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

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

属性
@keyframes 43.0
4.0 -webkit-
12.0 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-
12.0 10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-

CSS3动画是什么?

动画让元素逐渐从一种风格变为另一种风格。

你可以有很多的CSS属性。

使用CSS3动画,你必须首先指定一些关键帧动画。

关键帧将决定元素在某些时候显示什么风格。


CSS3 @keyframes 规则

要创建CSS3动画,你将不得不了解@keyframes规则。 @keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

Example

/* 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 。 

Example

/* 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%:

Example

/* 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秒的延迟:

Example

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

设置一个动画运行的次数

animation-iteration-count 属性指定动画运行的次数。

下面的实例将在停止之前运行动画3次:

Example

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

下面的示例使用值 "infinite" 使动画永远持续:

Example

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

反向或交替循环运行动画

animation-direction 属性用于让动画反向或交替循环运行。

下面的实例将反向运行动画:

Example

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

下面的示例使用值 "alternate" 使动画向前运行,然后向后,然后向前:

Example

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 属性指定动画的速度曲线。

animation-timing-function 属性可以有以下值:

  • ease - 指定动画缓慢启动,然后快速,然后缓慢结束(默认)
  • linear - 指定一个动画,以相同的速度从开始到结束
  • ease-in - 指定一个缓慢启动动画
  • ease-out - 指定一个慢速结束动画
  • ease-in-out - 指定一个缓慢启动和结束动画
  • cubic-bezier(n,n,n,n) - 让你定义自己的一组值在cubic-bezier函数中国

下面的例子显示了一些不同的速度曲线:

Example

#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;}
尝试一下 »

动画简写属性

下面的例子使用了六个动画的属性:

Example

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

通过使用简写 animation 属性,可以达到如上所述的动画效果:

Example

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

CSS3 动画属性

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

属性 描述
@keyframes 指定动画的代码
animation 用于设置所有动画属性的简写属性
animation-delay 指定动画开始时的延迟
animation-direction 指定动画是否应反向播放或交替循环
animation-duration 指定动画需要多少秒或毫秒完成一个周期
animation-fill-mode 指定元素在动画未播放(当它完成时,或它有延迟时)的样式。
animation-iteration-count 指定要播放动画的次数
animation-name 指定的关键帧动画的名字
animation-play-state 指定动画是否正在运行或暂停
animation-timing-function 指定动画的速度曲线