CSS3 动画
CSS3 动画
CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts！
CSS3
Animation
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 属性，可以达到如上所述的动画效果：
CSS3 动画属性
下表列出了 @keyframes 规则和所有的动画属性：
| 属性 | 描述 |
|---|---|
| @keyframes | 指定动画的代码 |
| animation | 用于设置所有动画属性的简写属性 |
| animation-delay | 指定动画开始时的延迟 |
| animation-direction | 指定动画是否应反向播放或交替循环 |
| animation-duration | 指定动画需要多少秒或毫秒完成一个周期 |
| animation-fill-mode | 指定元素在动画未播放（当它完成时，或它有延迟时）的样式。 |
| animation-iteration-count | 指定要播放动画的次数 |
| animation-name | 指定的关键帧动画的名字 |
| animation-play-state | 指定动画是否正在运行或暂停 |
| animation-timing-function | 指定动画的速度曲线 |
