mozilla
您的搜索结果

    animation-fill-mode

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

    概述

    animation-fill-mode CSS 属性指定动画执行之前之后的样式。

    语法

    Formal syntax: <single-animation-fill-mode>#
    
    animation-fill-mode: none
    animation-fill-mode: forwards
    animation-fill-mode: backwards
    animation-fill-mode: both
    
    The # indicates that several values may be given, separated by commas.
    Each applies to the animation defined in the same order in animation-name.
    animation-fill-mode: none, backwards
    animation-fill-mode: both, forwards, none
    

    none
    动画执行前后不改变任何样式
    forwards
    目标保持动画最后一帧的样式,最后一帧是哪个取决于animation-direction和 animation-iteration-count:
    animation-direction animation-iteration-count last keyframe encountered
    normal even or odd 100% or to
    reverse even or odd 0% or from
    alternate even 0% or from
    alternate odd 100% or to
    alternate-reverse even 100% or to
    alternate-reverse odd 0% or from
    backwards
    动画采用相应第一帧的样式,保持 animation-delay,第一帧取法如下:
    animation-direction first relevant keyframe
    normal or alternate 0% or from
    reverse or alternate-reverse 100% or to
    both
    同时forwards 和  backwards
    The animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.

    Example

    You can see the effect of animation-fill-mode in the following example.  For animations that run for an infinite time, you might want them to end on the last state rather than the first.

    HTML content

    <p>Move your mouse over the grey box</p>
    <div class="demo">
      <div class="grows">This just grows</div>
      <div class="growsandstays">This grows and stays big</div>
    </div>

    CSS content

    .demo {
      border-top: 100px solid #ccc;
      height: 300px;
      font-family: sans-serif;
    }
    @keyframes grow {
        0% { font-size: 0 }
        100% { font-size: 40px }
    }
    @-webkit-keyframes grow {
        0% { font-size: 0 }
        100% { font-size: 40px }
    }
    .demo:hover .grows {
        animation-name: grow;
        animation-duration: 3s;
        -webkit-animation-name: grow;
        -webkit-animation-duration: 3s;
    }
    .demo:hover .growsandstays {
        animation-name: grow;
        animation-duration: 3s;
        animation-fill-mode: forwards;
        -webkit-animation-name: grow;
        -webkit-animation-duration: 3s;
        -webkit-animation-fill-mode: forwards;
    }

    Specifications

    Specification Status Comment
    CSS Animations Working Draft  

    Browser compatibility

    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)
    ? ? ?

    See also

    文档标签和贡献者

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