代码改变世界

Css3 Animation

2012-07-04 10:46  BlackBird  阅读(1859)  评论(0)  编辑  收藏  举报

简介

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

支持的浏览器

    目前支持application cache的浏览器如下：

  • n  IE 10+
  • n  Firefox 12+
  • n  Chome 19+
  • n  Safari 5.1+
  • n  Opera1 12+
  • n  Android browser 4.0+
  • n  Ios safari 3.2+

　　　　

语法

使用animation创建动画主要分两步：

1，  使用Keyframes创建关键帧集合。

2，  在元素中通过animation-name属性引用关键帧集合，并设置其他的animation属性来辅助。浏览器将根据设置的持续时间，延时，速度曲线等来平滑过度关键帧集合中的关键帧，形成动画。

 

Keyframes语法：

@keyframes IDENT {

     from {

       Properties:Properties value;

     }

     Percentage {

       Properties:Properties value;

     }

     to {

       Properties:Properties value;

     }

   }

Percentage 用百分号表示，整个动画过程的时间切片。其中from和to可以分别用0%和100%表示。Properties:Properties value和正常的设置css属性一样。

 

Animation相关属性

  • n  animation-name
  • n  animation-duration
  • n  animation-timing-function
  • n  animation-delay
  • n  animation-iteration-count
  • n  animation-direction
  • n  animation-play-state
属性名参数要求默认值描述.
animation-name 对应的关键帧集名 none 关键帧集名 .
animation-duration 单位秒 0s 动画持续时间 .
animation-timing-function 取值范围同transition的timing-function：ease linear ease-in ease-out ease-in-out step-start step-end steps(start end ) cubic-bezier（num1 num2 num3 num4） ease 速率曲线 .
animation-delay 单位秒 0s 延迟时间 .
animation-iteration-count 数字 1 循环播放次数 .
animation-direction normal:正常播放 alternate:偶数次顺播，奇数次反播 normal 播放顺序 .
animation-play-state running :播放 paused 暂停 running 播放状态 .

Demo

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
/*给这个按钮创建一个动名名称：buttonLight，然后在每个时间段设置不同的background,color来达到变色效果，改变box-shadow来达到发光效果*/ 
    @-webkit-keyframes 'buttonLight' { 
            from { 
                top:0px;
                left:0px;
            } 
            25% { 
                top:200px;
                left:200px;
                width:200px;
                height: 200px;
            } 
            50% { 
                top:220px;
                left:100px;
                width:100px;
                height:30px;

            } 
            75% { 
                top:400px;
                left:300px;
            } 
            to {
                top:500px;
                left:500px;

            }
        } 
        a.btn { /*按钮的基本属性*/ 
            width:100px;
            height:30px;
            background: #999; 
            font-size: 16px; 
            top:0px;
            left:0px;
            position: absolute;
            padding: 10px 15px; 
            color: #fff; 
            text-align: center; 
            text-decoration: none; 
            font-weight: bold; 
            text-shadow: 0 -1px 1px rgba(0,0,0,0.3); 
            -webkit-border-radius: 5px; 
            -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8); 

            /*调用animation属性，从而让按钮在载入页面时就具有动画效果*/ 
            -webkit-animation-name: "buttonLight"; /*动画名称，需要跟@keyframes定义的名称一致*/
            -webkit-animation-duration: 5s;/*动画持续的时间长*/ 
            -webkit-animation-iteration-count: infinite;/*动画循环播放的次数*/
            -webkit-animation-timing-function: ease-in-out; 

        }

</style>
</head>
<body>
    <a href="" class="btn">动画</a>111111111111111
</body>
</html>