CSS3基础学习CSS3动画效果(animation和@keyframes)

学习CSS3动画效果(animation和@keyframes)

在CSS3中可以创建动画,实现以往在Flash或JavaScript才能实现的效果。创建动画所使用的规则是:@keyframes(keyframes中文翻译为关键帧),在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果,例如:

@keyframes changebg
{
from {background:red;}
to {background:blue;}
}

这里所定义的from和to分别是动画开始和结束的状态,如果用百分比来表示,则"from" 和 "to",相当于0%和100%。0%是动画的开始,100%是动画的完成,使用百分比的方式定义动画兼容性更强,所以推荐大家使用,也就是上面的定义可以写为:

@keyframes changebg
{
0% {background:red;}
100% {background:blue;}
}

我们还可以定义多次变化,例如:

@keyframes changebg
{
0% {background:red;}
30% {background:orange;letter-spacing:1px;}
65% {background:purple;}
100% {background:blue;}
}

我现在定义了这个个名为changebg的动画,将元素的背景颜色从红色变成橙色,再变成紫色和蓝色,接下来需要把这个动画绑定到需要产生变化的选择器。

将动画与选择器绑定要用到animation属性(animation中文翻译为动画),下面我们先来做一个示例试试效果:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
@keyframes changebg
{
0% {background: red;}
30% {background: orange;letter-spacing:1px;}
65% {background: purple;}
100% {background: blue;}
}
div {animation: changebg 6s;
background:#000;
width:300px;height:100px;color:#fff;
}
</style>
</head>
<body>
<div>The Commonwealth of Australia</div>
</body>
</html>

浏览后发现div框的背景颜色由红色变成橙色,再逐渐变成了紫色和蓝色,随后变成它原本的背景颜色黑色,效果如下(如果没看到效果请刷新本页面):

ABCDEFG

我们看到animation属性定义了两个值,一般定义两项动画属性,即可将动画绑定到选择器,分别是:

A. 规定动画的名称 B. 规定动画的时长

animation实际上是一个简写属性,它用于设置六个动画属性,分别是:

animation-name 规定需要绑定到选择器的keyframes名称

animation-duration 规定完成动画所花费的时间,单位秒或毫秒

animation-timing-function 规定动画的速度曲线

animation-delay 规定在动画开始之前的延迟

animation-iteration-count 规定动画播放的次数

animation-direction 规定是否反向播放动画

animation-fill-mode 规定动画的时间外属性

其中animation-timing-function规定动画的速度曲线:

cubic-bezier(n,n,n,n) 自定义值,可能的值是0至1之间的数值

linear 规定以相同速度开始至结束的过渡效果相当于cubic-bezier(0,0,1,1)

ease 规定慢速开始然后变快,然后慢速结束的过渡效果,相当于cubic-bezier(0.25,0.1,0.25,1),这个是过渡效果的默认值。

ease-in 规定以慢速开始的过渡效果,相当于 cubic-bezier(0.42,0,1,1)

ease-out 规定以慢速结束的过渡效果,相当于cubic-bezier(0,0,0.58,1)

ease-in-out 规定以慢速开始和结束的过渡效果,相当于cubic-bezier(0.42,0,0.58,1)

steps(x,start/end) 规定非线性渐变动画,而是帧跳跃动画,其中x表示间隔数量,而start或end,指在每个间隔的起点或是终点发生阶跃变化。

其中animation-iteration-count属性可以定义具体的数值表示次数,也可以定义为infinite表示无限循环播放。

其中animation-direction如果定义为alternate则表示动画反向播放,否则是其默认值normal不反向播放。

其中animation-fill-mode可以设置none,forwards,backwards,both几个值:

默认值none,表示动画播完后,恢复到初始状态。

forwards表示当动画播完后,保持定格在动画最后一帧。

backwards表示开始播动画时,应用@keyframes里第一帧的属性(设置了animation-delay才有效果),both表示forwards和backforwards都使用。

下面做个示例来试试效果:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
@keyframes changebg
{
0% {background: red;}
30% {background: orange;letter-spacing:1px}
65% {background: purple;}
100% {background: blue;}
}
div {animation: changebg 4s ease 1s 4 alternate forwards;
background:#000;
width:300px;height:100px;color:#fff;
}
</style>
</head>
<body>
<div>The Commonwealth of Australia</div>
</body>
</html>

浏览这个网页,我们发现div块在4秒内产生了4次变化,并产生了反向播放,播放完成后画面产生了定格。

ABCDEFG

我们试试将以上例子中的ease值改为steps(2,start),便能感知到线性渐变动画和帧跳跃动画的区别。

ABCDEFG

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/css3/32.html