CSS3 动画 Animation

原创 2015年11月17日 17:28:10

在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是”Keyframes”,我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生。下面我们就一起来看看这个“Keyframes”是什么东西。前面我们在使用transition制作一个简单的transition效果时,我们包括了初始属性和最终属性,一个开始执行动作时间和一个延续动作时间以及动作的变换速率,其实这些值都是一个中间值,如果我们要控制的更细一些,比如说我要第一个时间段执行什么动作,第二个时间段执行什么动作(换到flash中说,就是第一帧我要执行什么动作,第二帧我要执行什么动作),这样我们用Transition就很难实现了,此时我们也需要这样的一个“关键帧”来控制。那么CSS3的Animation就是由“keyframes”这个属性来实现这样的效果。下面我们一起先来看看Keyframes:

Keyframes具有其自己的语法规则,他的命名是由”@keyframes”开头,后面紧接着是这个“动画的名称”加上一对花括号“{}”,括号中就是一些不同时间段样式规则,有点像我们css的样式写法一样。对于一个”@keyframes”中的样式规则是由多个百分比构成的,如“0%”到”100%”之间,我们可以在这个规则中创建多个百分比,我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性,从而让元素达到一种在不断变化的效果,比如说移动,改变元素颜色,位置,大小,形状等,不过有一点需要注意的是,我们可以使用“fromt”“to”来代表一个动画是从哪开始,到哪结束,也就是说这个 “from”就相当于”0%”而”to”相当于”100%”,值得一说的是,其中”0%”不能像别的属性取值一样把百分比符号省略,我们在这里必须加上百分符号(“%”)如果没有加上的话,我们这个keyframes是无效的,不起任何作用。因为keyframes的单位只接受百分比值。

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

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

把上面的语法综合起来

@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为css的属性名,比如说left,background等,value就是相对应的属性的属性值。值得一提的是,我们from和to 分别对应的是0%和100%。这个我们在前面也提到过了。到目前为止支技animation动画的只有webkit内核的浏览器,所以我需要在上面的基础上加上-webkit前缀,据说Firefox5可以支持css3的 animation动画属性。

实例(来着W3C官网):

 @-webkit-keyframes 'wobble' {
     0% {
        margin-left: 100px;
        background: green;
     }
     40% {
        margin-left: 150px;
        background: orange;
     }
     60% {
        margin-left: 75px;
        background: blue;
     }
     100% {
        margin-left: 100px;
        background: red;
     }
  }

这里我们定义了一个叫“wobble”的动画,他的动画是从0%开始到100%时结束,从中还经历了一个40%和60%两个过程,上面代码具体意思是:wobble动画在0%时元素定位到left为100px的位置背景色为green,然后40%时元素过渡到left为150px的位置并且背景色为orange,60%时元素过渡到left为75px的位置,背景色为blue,最后100%结束动画的位置元素又回到起点left为100px处,背景色变成red。假设置我们只给这个动画有10s的执行时间,那么他每一段执行的状态如下图所示:

Keyframes定义好了以后,我们需要怎么去调用刚才定义好的动画“wobble”

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

怎么给一个元素调用animation属性?

  .demo1 {
     width: 50px;
     height: 50px;
     margin-left: 100px;
     background: blue;
     -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来控制,动画后面的会覆盖前面的属性值。如上面例子:因为我们这个demo只是在不同的时间段改变了demo1的背景色和左边距,其默认值是:margin-left:100px;background: blue;但当我们在执行动画0%时,margin-left:100px,background:green;当执行到40%时,属性变成了:margin-left:150px;background:orange;当执行到60%时margin-left:75px;background:blue;当动画 执行到100%时:margin-left:100px;background: red;此时动画将完成,那么margin-left和background两个属性值将是以100%时的为主,他不会产生叠加效果,只是一次一次覆盖前一次出将的css属性。就如我们平时的css一样,最后出现的权根是最大的。当动画结束后,样式回到默认效果。


从上面的Demo中我们可以看出animation和transition一样有自己相对应的属性,那么在animation主要有以下几种:animation-name;animation-duration;animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state。下面我们分别来看看这几个属性的使用:

  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: <time>[,<time>]*
    取值说明:
    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: <time>[,<time>]* 取值说明:
    animation-delay:是用来指定元素动画开始时间。取值为

  5. animation-iteration-count 语法:animation-iteration-count:infinite |
    <number> [, infinite | <number>]*
    取值说明:
    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-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>] ]* 

如下图所示:

第四课:css3-圆角 | 文本属性(文本超出部分省略) | 过渡transition | 动画animation

一、圆角|文本属性 1、知识点汇总 a、border-radius: 百分比 | px;当大于或等于正方形盒子宽度的一半就变成了圆; b、border-image: 兼容性不是很好,不做整理; c、...

css3 动画(animation)、渐变(transition)和改变(transform)整理

这两天在优化页面,准备做一些

CSS3动画——@keyframes规则和animation属性

简介:@keyframes定义关键帧,即动画每一帧执行的是什么,animation是来定义动画的每一帧如何执行的。一.@keyframe 语法:@keyframes animationname {ke...

CSS3动画animation语音滚动

现的图像动画效果大致是这样的:语音滚动! 【代码效果】 CSS3动画animation语音滚动 html,body { padding: 0; margin: 0; } .r...

CSS3 animation实现点点点loading动画

一、再续前缘 去年夏天,写了篇名为“CSS3 animation渐进实现点点点等待提示效果”的文章,主要内容是实现类似下面打点等待提示效果,比干巴巴的字符...要更人性化: 之前实现的...

浅谈CSS3新特性——动画animation

animation-timing-function:linear指定动画从头到尾的速度相同 animation-fill-mode:forwards在动画结束后(由 animation-iterati...

CSS3 动画属性 animation 的基本用法

CSS3新增了一个令人心动的属性:animation,尽管利用animation做出来的动画没有flash或者javascript做出的动画流畅绚丽,但是从代码量和浏览器性能上有着明显的优点。 ...

深入理解CSS3 Animation 帧动画

CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术。 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关...
  • judyge
  • judyge
  • 2016年07月08日 16:32
  • 314

CSS3之transition和animation动画

在写完css3之变形后,感觉一下子对transform的使用清晰了很多,所以决定再把css3中其他重要新功能也梳理一下。本文将梳理transition和animation动画功能 本文示例中使用到的h...

css3 动画之transition,animation

css3动画   csss3实现动画的方式主要有两种方式:一种是用transition过渡效果来实现动画,另外一种直接使用animation配合keyframe来实现。虽然这两种方式都能实现动画效...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3 动画 Animation
举报原因:
原因补充:

(最多只允许输入30个字)