日期:2014-05-16  浏览次数:20607 次

CSS3之动画Animation

  CSS3发布已经有很多日子了,现在很多网站都开始尝试用CSS3制作一些好玩的东西,甚至有些公司把CSS3作为制作网站的技术来广泛应用。今天和大家分享CSS3之动画Animation的一些小东东,希望能对大家有所帮助。

 

  一、Animation的语法

 

  1、@keyframes——插入关键帧


  (1)FormTo形式:

@keyframes demo {
     from {
       Properties:Properties value;
     }
     Percentage {
       Properties:Properties value;
     }
     to {
       Properties:Properties value;
     }
}

  (2)百分比的形式:

@keyframes demo {
      0% {
         Properties:Properties value;
      }
      Percentage {
         Properties:Properties value;
      }
      100% {
         Properties:Properties value;
      }
}

  2、animation-name——定义动画的名称

animation-name: none | “动画的名称”;

  (1)动画的名称是由Keyframes创建的动画名,这里必须和创建的动画名保持一致。如果不一致,将不能实现任何动画效果

  (2)none为默认值,当值为none时,将没有任何动画效果


  3、animation-duration

 animation-duration: time (s)

  animation-duration是指定元素播放动画所持续的时间,取值为数值,单位为秒(s),其默认值为“0”。


  4、animation-timing-function

animation-timing-function:ease(缓冲) || ease-in(加速) || ease-out(减速) || ease-in-out(先加速后减速) || linear(匀速) || cubic-bezier(自定义一个时间曲线)

  animation-timing-function是用来指定动画的播放方式,具有以下六种变换方式:ease(缓冲);ease-in(加速);ease-out(减速);ease-in-out(先加速后减速);linear(匀速);cubic-bezier(自定义一个时间曲线)。


  5、animation-delay

animation-delay: time(s)

  animation-delay:是用来指定元素动画开始时间。取值为数值,单位为秒(s),其默认值为“0”。这个属性和animation-duration使用方法是一样的。


  6、animation-iteration-count

animation-iteration-count:infinite || number 

  animation-iteration-count是指定元素播放动画的循环次数,其取值为数字,默认值为“1”或者infinite(无限次数循环)。


  7、animation-direction

animation-direction: normal || alternate

  animation-direction是指定元素动画播放的方向,如果是normal,那么动画的每次循环都是向前播放;如果是alternate,那么动画播放在第偶数次向前播放,第奇数次向反方向播放。


  8、animation-play-state

animation-play-state:running || paused

  animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值,running和paused,其中running为默认值。这个属性目前很少内核支持,所以只是稍微提一下。


  二、Animation的综合写法

  

animation:定义动画的名称 || 动画持续时间 || 动画的播放方式 || 动画开始时间 || 动画循环次数 || 动画播放方向


  三、Animation的兼容情况

 

梦龙小站


  四、Animation的小实例


  CSS代码:

/*全局样式*/
.wraper {width:960px;margin:0 auto;}
h1 b {font-size:20px;}
li a,h1 b span {text-decoration:none;color:#f00;}
li a:hover {text-decoration:underline;}


/*过渡的样式*/
#timings-demo {border: 1px solid #ccc;padding: 10px;hei