WonderCSS

CSS3超绚animation动画标签

之前介绍过 CSS3 动画转换属性 Transition,今天共同学习一个新的CSS3超绚标签:Animation ,就字面上的意思,一目了然(我还是谷歌翻译了一下……)是“动画”的意思。但 CSS3 中的 Animation 与 HTML5 中的 Canvas 绘制动画又不同,Animation只应用在页面上已存在的DOM元素上。虽然他不及 Flash 和 JS(JavaScript)动画的丰富细腻略显粗糙,但对于JS有些门外汉的我来说,还是大大增加了学习“CSS动画”的热情。

了解 Keyframes 关键帧

先做些准备工作,首先我们需要了解一个概念:”Keyframes”(关键帧)。玩过 Flash 的朋友对这个词不会陌生,就是那个F6。下面我们就一起来看看这个“Keyframes”是什么东西。比如说在动画中我们要在第一个时间(第一关键帧)段执行什么动作,第二个时间(第二关键帧)段执行什么动作,这样我们单用Transition就很难实现了,此时我们也需要这样的一个“关键帧”属性来控制动画的过程。

下面我们看看Keyframes怎么应用:

Keyframes 具有其自己的语法规则,他的命名是由 @keyframes 开头,后面紧接着是这个 “动画的名称” 加上一对花括号“{}”,括号中就是一些不同时间段样式规则,有点像我们css的样式写法一样。

Keyframes可以指定任何顺序排列来决定Animation动画变化的关键位置。其具体语法规则如下:


keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';
keyframes-blocks: [ keyframe-selectors block ]* ;
keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;

对于一个”@keyframes”中的样式规则是由多个百分比构成的,如“0%”到”100%”之间,我们可以在这个规则中创建多个百分比,我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性,从而让元素达到一种在不断变化的效果,比如说移动,改变元素颜色,位置,大小,形状等。不过有一点需要注意的是,我们可以使用“fromt”“to”来代表一个动画是从哪开始,到哪结束,也就是说这个 “from”就相当于”0%”而”to”相当于”100%”。

值得一说的是,在代码书写中”0%”不能省略百分比符合“%”,因为 keyframes 的单位只接受百分比值

上述写法或许有些“复杂”那我们把语法综合起来写:


@keyframes IDENT {
 from {
   Properties:Properties value;
 }
 Percentage {
   Properties:Properties value;
 }
 to {
   Properties:Properties value;
 }
}
/*或者全部写成百分比的形式:*/
@keyframes IDENT {
  0% {
	 Properties:Properties value;
  }
  Percentage {
	 Properties:Properties value;
  }
  100% {
	 Properties:Properties value;
  }
}

其中 IDENT 是定义动画的名称,你可以随便取。Percentage是百分比值,我们可以添加许多个这样的百分比。Properties为css3的属性名,比如说 color , display 等,value就是相对应的属性的属性值。

值得一提的是,我们 from 和 to 分别对应的是 0% 和 100% 。这个我们在前面也提到过了。到目前为止支持animation动画的只有webkit内核的浏览器,所以我需要在上面的基础上加上-webkit前缀,当然 chrome 和 opera 即将改用 Blink 还是个未知数,这并不影响我们学习animation标签。

学习 animation 标签

CSS3 的 animation 类似于 transition 属性,他们都是随着时间改变元素的属性值。他们主要区别是 transition 需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性;而 animation 在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值,从而达到一种动画的效果。这样我们就可以直接在一个元素中调用 animation 的动画属性,基于这一点,css3 的 animation 就需要明确的动画属性值,这也就是回到我们上面所说的,我们需要 keyframes 来定义不同时间的css属性值,达到元素在不同时间段变化的效果。

下面我们来看看怎么使用 animation 属性:


-webkit-animation-name:'wobble'; /*动画属性名,也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 10s; /*动画持续时间*/
-webkit-animation-timing-function: ease-in-out; /*动画频率,和transition-timing-function是一样的*/
-webkit-animation-delay: 2s; /*动画延迟时间*/
-webkit-animation-iteration-count: 10; /*定义循环次数,infinite为无限次*/
-webkit-animation-direction: alternate; /*定义动画方式*/

CSS Animation动画效果将会影响元素相对应的css值,在整个动画过程中,元素的变化属性值完全是由animation来控制,动画后面的会覆盖前面的属性值。


@-webkit-keyframes 'wondercss' {
 0% {
	margin-left: 100px;
	background: green;
 }
 50% {
	margin-left: 150px;
	background: orange;
 }
 100% {
	margin-left: 100px;
	background: red;
 }
}

如上面例子:因为我们这个demo只是在不同的时间段改变了动画名为wondercss的元素的背景色和左边距,其默认值是:margin-left:100px;background: blue;

但当我们在执行动画0%时,margin-left:100px,background:green;
当执行到50%时,属性变成了:margin-left:150px;background:orange;
当动画 执行到100%时:margin-left:100px;background: red;

此时动画将完成,那么 margin-left 和 background 两个属性值将是以 100% 时的为主,他不会产生叠加效果,只是一次一次覆盖前一次出将的css属性。当动画结束后,样式回到默认效果。

1 animation-name:


animation-name: none | IDENT[,none | IDENT]*;

animation-name:是用来定义一个动画的名称,其主要有两个值:IDENT是由Keyframes创建的动画名,换句话说此处的IDENT要和Keyframes中的IDENT一致,如果不一致,将不能实现任何动画效果;none为默认值,当值为none时,将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样,我们可以同时附几个animation给一个元素,我们只需要用逗号“,”隔开。

2 animation-duration:


animation-duration: 

animation-duration是用来指定元素播放动画所持续的时间长,取值:

3 animation-timing-function:


animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )]* 

animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率,说得简单点就是动画的播放方式。他和transition中的transition-timing-function一样,具有以下六种变换方式:ease;ease-in;ease-in-out;linear;cubic-bezier。具体的使用方法大家可以点这里,查看其中transition-timing-function的使用方法。

4 animation-delay:


animation-delay: 

animation-delay:是用来指定元素动画开始时间。取值为

5 animation-iteration-count:


animation-iteration-count:infinite |  [, infinite | ]* 

animation-iteration-count是用来指定元素播放动画的循环次数,其可以取值为数字,其默认值为“1”;infinite为无限次数循环。

6 animation-direction:


animation-direction: normal | alternate [, normal | alternate]* 

animation-direction是用来指定元素动画播放的方向,其只有两个值,默认值为normal,如果设置为normal时,动画的每次循环都是向前播放;另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。

7 animation-play-state:


animation-play-state:running | paused [, running | paused]* 

animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值,running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样,可以通过paused将正在播放的动画停下了,也可以通过running将暂停的动画重新播放,我们这里的重新播放不一定是从元素动画的开始播放,而是从你暂停的那个位置开始播放。另外如果暂时了动画的播放,元素的样式将回到最原始设置状态。这个属性目前很少内核支持,所以只是稍微提一下。

animation 速写法

上面我们分别介绍了animation中的各个属性的语法和取值,那么我们综合上面的内容可以给animation属性一个速记法:


animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]* 

如下图所示

animation标签图示

那么到此有关于CSS3的animation相关应用就学习完了,赶快打开编辑器试试吧!

By 于湛 发布于 2013.04.8 1,819 次浏览

CSS3超绚animation动画标签》上有3条评论

  1. Pingback引用通告: CSS3 动画属性 Transition | WonderCSS

  2. Pingback引用通告: 利用animation制作Loading动画实例 | WonderCSS

  3. Pingback引用通告: CSS3 Transform 变形属性 | WonderCSS

发表评论

电子邮件地址不会被公开。 必填项已用*标注