CSS3 动画
CSS3 动画
CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画,和JAVAScripts!
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 | 指定动画的速度曲线 |