动画是使元素从一种样式逐渐变化为另一种样式的效果。通过 CSS3,能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
如需在 CSS3 中创建动画,需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。通过 animation 相关动画属性完成整个 CSS3 动画效果。
1.@keyframes 指定动画名称和动画效果
@keyframes定义的动画名称用来被animation-name所使用。
定义动画时,简单的动画可以直接使用关键字from和to,即从一种状态过渡到另一种状态。
语法:
@keyframes <identifier> { <keyframes-blocks> }
<keyframes-blocks>:[ [ from | to | <percentage> ]{ sRules } ] [ [ , from | to | <percentage> ]{ sRules } ]
取值:
- <identifier>:identifier定义一个动画名称
- <keyframes-blocks>:定义动画在每个阶段的样式,即帧动画
示例:
@keyframes testanimations {
from { transform: translate(0, 0); }
20% { transform: translate(20px, 20px); }
40% { transform: translate(40px, 0); }
60% { transform: translate(60px, 20); }
80% { transform: translate(80px, 0); }
to { transform: translate(100px, 20px); }
}
/* 或者 */
@keyframes testanimations{
0% { transform: translate(0, 0); }
20% { transform: translate(20px, 20px); }
40% { transform: translate(40px, 0); }
60% { transform: translate(60px, 20px); }
80% { transform: translate(80px, 0); }
100% { transform: translate(100px, 20px); }
}
2.animation-name 检索或设置对象所应用的动画名称
必须与规则 @keyframes 配合使用,因为动画名称由@keyframes定义。如果提供多个属性值,以逗号进行分隔。
语法:
animation-name:<single-animation-name>[,<single-animation-name>]
<single-animation-name> = none | <identifier>
取值:
- none:不引用任何动画名称
- <identifier>:定义一个或多个动画名称(identifier标识)
示例:
@keyframes slide{
0%{transform:scale(0);opacity:0;}
40%{transform:scale(1);opacity:1;}
100%{opacity:1;}
}
@-webkit-keyframes slide{
0%{-webkit-transform:scale(0);opacity:0;}
40%{-webkit-transform:scale(1);opacity:1;}
100%{opacity:1;}
}
.slide-box{
animation-name: slide;
}
3.animation-duration 设置对象动画的持续时间
如果提供多个属性值,以逗号进行分隔。
语法:
animation-duration:<time>[,<time>]
取值:
- <time>:指定对象动画的持续时间
示例:
.slide-box{
animation-duration: .8s;
}
4.animation-timing-function 设置对象动画的过渡类型
如果提供多个属性值,以逗号进行分隔。
语法:
animation-timing-function:<single-animation-timing-function>[,<single-animation-timing-function>]
<single-animation-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)
取值:
- linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
- ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
- ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
- ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
- ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
- step-start:等同于 steps(1, start)
- step-end:等同于 steps(1, end)
- steps(<integer>[, [ start | end ] ]?):接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。
- cubic-bezier(<number>, <number>, <number>, <number>):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
示例:
.slide-box{
animation-timing-function: ease-in;
}
5.animation-delay 设置对象动画的延迟时间
如果提供多个属性值,以逗号进行分隔。
语法:
animation-delay:<time>[,<time>]
取值:
- <time>:指定对象动画延迟的时间
示例:
.slide-box{
animation-delay: .5s;
}
6.animation-iteration-count 设置对象动画的循环次数
如果提供多个属性值,以逗号进行分隔。
语法:
animation-iteration-count:<single-animation-iteration-count>[,<single-animation-iteration-count>]
<single-animation-iteration-count> = infinite | <number>
取值:
- infinite:无限循环
- <number>:指定对象动画的具体循环次数
示例:
.slide-box{
animation-iteration-count: infinite;/* 无限循环 */
}
7.animation-direction 设置对象动画在循环中是否反向运动
如果提供多个属性值,以逗号进行分隔。
语法:
animation-direction:<single-animation-direction>[,<single-animation-direction>]
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
取值:
- normal:正常方向
- reverse:反方向运行
- alternate:动画先正常运行再反方向运行,并持续交替运行
- alternate-reverse:动画先反运行再正方向运行,并持续交替运行
示例:
.slide-box{
animation-direction: reverse;/* 反方向运行循环 */
}
8.animation-play-state 设置对象动画的状态
如果提供多个属性值,以逗号进行分隔。
语法:
animation-play-state:<single-animation-play-state>[,<single-animation-play-state>]
<single-animation-play-state> = running | paused
取值:
- running:运动
- paused:暂停
示例:
.slide-box{
animation-play-state: running;
}
9.animation-fill-mode 设置对象动画时间之外的状态
如果提供多个属性值,以逗号进行分隔。
语法:
animation-fill-mode:<single-animation-fill-mode>[,<single-animation-fill-mode>]
<single-animation-fill-mode> = none | forwards | backwards | both
取值:
- none:默认值。不设置对象动画之外的状态
- forwards:设置对象状态为动画结束时的状态
- backwards:设置对象状态为动画开始时的状态
- both:设置对象状态为动画结束或开始的状态
示例:
.slide-box{
animation-fill-mode: backwards;
}
10.animation 复合属性,设置对象所应用的动画特效
如果提供多组属性值,以逗号进行分隔。
注意:如果只提供一个<time>参数,则为 <' animation-duration '> 的值定义;如果提供二个<time>参数,则第一个为 <' animation-duration '> 的值定义,第二个为 <' animation-delay '> 的值定义。
语法:
animation:<single-animation>[,<single-animation>]
<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>
取值:
- <' animation-name '>:检索或设置对象所应用的动画名称
- <' animation-duration '>:检索或设置对象动画的持续时间
- <' animation-timing-function '>:检索或设置对象动画的过渡类型
- <' animation-delay '>:检索或设置对象动画延迟的时间
- <' animation-iteration-count '>:检索或设置对象动画的循环次数
- <' animation-direction '>:检索或设置对象动画在循环中是否反向运动
- <' animation-fill-mode '>:检索或设置对象动画时间之外的状态
- <' animation-play-state '>:检索或设置对象动画的状态。w3c正考虑是否将该属性移除,因为动画的状态可以通过其它的方式实现,比如重设样式
示例:
.slide-box{
-webkit-animation:animations 2s ease-out forwards;
animation:animations 2s ease-out forwards;
}