FITURE

If you can fight, fight.

首页 >> 分享>>HTML/CSS>>CSS3 Animations-记CSS3动画基础(三)

CSS3 Animations-记CSS3动画基础(三)

Posted by fiture / 2012年04月17日 / HTML/CSS

最近的感触很大,感觉自己有点漂浮,有点不在状态,然后也遇到了一些苦逼的时候,在这个拼爹,拼金钱钱的时代,你不拼命你就完了。打住,接着说CSS3动画,目前用Transform,Transition可以创建一些简单有趣的动画了,不过CSS3里面还有一个强大的动画属性,现在的主题就是它:CSS3 Animation。

还是先看看这些晦涩难懂的语法(animation),大概就是这几个属性值:

    animation  [animation-name || animation-duration || animation-timing-function || animation-delay ||
               animation-iteration-count || animation-direction || animation-fill-mode]
  

1、animation-name

CSS3 动画,用animations创建动画,需要创建@keyframes规则,来实现。所谓的@keyframes就好像是一个Function,它规定该怎样去具体的实现一个动画过程。而这个function的名称,就是animation-name,所以我们再使用animation的时候需要先定义一个@keyframes。

2、@keyframes

@keyframes 规则:

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

@keyframes 的用法(以背景变换为例):

    @keyframes animationName
    {
      from {background: red;}
      to {background: yellow;}
    }
  

参数变换过程:from 起始位置/to 结束位置,变换过程参数,也可以用百分比来表示,如:

    @keyframes animationName
    {
      0%   {background: red;}
      25%  {background: yellow;}
      50%  {background: blue;}
      100% {background: green;}
    }
  

定义好@keyframes规则过后,我们就需要在指定的时候调用它,就行了。@keyframes 功能很强大,这里只是简单的背景颜色的示例,它可以添加很多你可以想到的具体的动画变换内容。

3、animation-iteration-count

animation-iteration-count,动画循环次数,默认为1,如果需要永久循环,值为:infinite.

4、animation-direction

animation-direction,是否反向循环动画,默认为:'normal',alternate,反向循环。当方向循环是timing-fuction也会循环,如:ease-in当其反向循环时,会用ease-out出现。

5、animation-play-state

animation-play-state,动画播放状态,可以配合Javascript控制动画的播放状态。running | paused

6、animation-fill-mode

animation-fill-mode,定义动画播放完后的状态,因为每个动画播放都有开始状态和结束状态,在不同状态有不同的CSS样式,故该属性有四个值:none\forwards\backwards\both。none当动画完成后,不保留任何动画之中的样式,forwards,保留动画播放结束时的样式,一般在keyframes中的100%。backwards,保留动画开始时的状态,一般在keyframes中的0%。both,保留开始和结束时的状态。

关于CSS3动画的DEMO,可以参看CSS3 制作Loading效果DEMO ,以上是animation的各个参数,其他没有提到的参数和Transition里面的大同小异。

4条回应:“CSS3 Animations-记CSS3动画基础(三)”

  1. 刘印博客说道:

    在折腾CSS3呢。。

  2. 小呆说道:

    需要再看,CSS理论上来说,不是太难!呵呵!

  3. 西门说道:

    要动手自己写DEMO啊!

发表评论

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