mozilla
您的搜索结果

    动画

    这是一个实验中的功能
    此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀.由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变.

    概述

     

    css属性animation是如下属性的简写形式:animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-directionanimation-fill-mode.

    支持动画的css属性请查看,值得注意的是这些支持的属性和CSS变换相同。

    • 初始值 the concatenation of the initial values of its longhand properties:
      • animation-name: none
      • animation-duration: 0s
      • animation-timing-function: ease
      • animation-delay: 0s
      • animation-iteration-count: 1
      • animation-direction: normal
      • animation-fill-mode: none
    • 适用元素 all elements, ::before and ::after pseudo-elements
    • 可继承 no
    • 适用媒体 visual
    • 计算值 as each of the properties of the shorthand:
      • animation-name: as specified
      • animation-duration: as specified
      • animation-timing-function: as specified
      • animation-delay: as specified
      • animation-direction: as specified
      • animation-iteration-count: as specified
      • animation-fill-mode: as specified
      • animation-play-state: as specified
    • 可动画
    • Canonical order order of appearance in the formal grammar of the values

    语法

    Formal syntax: <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>
    

    对于动画定义来说,顺序是重要的:第一个 <time> 值可强制为 animation-duration, 第二个 <time> 值赋于 animation-delay.

    例子

    css动画的例子: CSS animations

    规范

    Specification Status Comment
    CSS Animations Working Draft  

    浏览器兼容性

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support (Yes)-webkit 5.0 (5.0)-moz
    16.0 (16.0)
    10 12-o
    12.10 #
    4.0-webkit
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? 5.0 (5.0)-moz
    16.0 (16.0)
    ? ? iOS 2.0-webkit

    跨浏览器动画

    参考上文所述,这里是一个移动的眼睛动画,采用了linear渐变,支持firefox,chrome,opera和IE10

    Cylon Eye

    <div class="view_port">
      <div class="polling_message">
        Listening for dispatches
      </div>
      <div class="cylon_eye"></div>
    </div>
    
    .polling_message {
      color:white;
      float:left;
      margin-right:2%;            
    }
    
    .view_port {
      background-color:black;
      height:25px;
      width:100%;
      overflow: hidden;
    }
    
    .cylon_eye {
      color:white;
      height: 100%;
      width: 20%;
    
      background-color: red;
      background-image: -webkit-linear-gradient(left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
      background-image:    -moz-linear-gradient(left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
      background-image:     -ms-linear-gradient(left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
      background-image:      -o-linear-gradient(left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
      background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
    
      -webkit-animation: move_eye 4s linear 0s infinite alternate;
         -moz-animation: move_eye 4s linear 0s infinite alternate;
           -o-animation: move_eye 4s linear 0s infinite alternate;
              animation: move_eye 4s linear 0s infinite alternate;
    }
    
    @-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
       @-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
         @-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
            @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
    

    See also

    文档标签和贡献者

    此页面的贡献者有: ziyunfei, fishenal, teoli
    最后编辑者: ziyunfei,