• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • animation

    版本:CSS3

    CSSanimation属性是animation-nameanimation-duration,animation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state属性的一个简写属性形式。

    示例

    /* @keyframes duration  |  timing-function  |  delay  | 
       iteration-count  |  direction  |  fill-mode  |  play-state  |  name */
    animation: 3s ease-in 1s 2 reverse both paused slidein;
    
    /* @keyframes duration  |  timing-function  |  delay  |  name */
    animation: 3s linear 1s slidein;
    
    /* @keyframes duration  |  name */
    animation: 3s slidein;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE10以上版本的浏览器都支持animation

    语法

    animation:<single-animation-iteration-count>| <single-animation-direction>| <single-animation-fill-mode>| <single-animation-play-state>

    animation属性用来指定一组或多组动画,每组之间用逗号相隔。

    每组动画规定的属性如下:

    • 以下属性出现0次或1次:<single-transition-timing-function><single-animation-iteration-count><single-animation-direction><single-animation-fill-mode><single-animation-play-state>
    • animation 的 name 值可能是:none<custom-ident><string>
    • <time>可能会出现0、1 或 2 次

    每个动画定义中的属性值的顺序很重要:可以被解析为<time>的第一个值被分配给animation-duration,第二个分配给animation-delay

    每个动画定义中的值的顺序,对于区分animation-name值与其他关键字也很重要。解析时,对于除animation-name之外的有效的关键字,必须被前面的简写中没有找到值的属性所接受。此外,在序列化时,animation-name与以及其他属性值做区分等情况下,必须输出其他属性的默认值。

    取值

    • <single-animation-iteration-count>:动画播放的次数。该值必须是animation-iteration-count可用的值之一。
    • <single-animation-direction>:动画播放的方向。该值必须是animation-direction可用的值之一。
    • <single-animation-fill-mode>:确定动画在执行之前和之后这两个阶段应用的样式。该值必须是animation-fill-mode可用的值之一。
    • <single-animation-play-state>:确定动画是否正在播放。该值必须是animation-play-state中可用的值之一。
    默认值看每个独立属性
    适用于所有元素,包含伪对象::beforeand::after
    继承性
    动画性
    计算值指定值
    媒体交互

    实例

    <div class="grid">
     <div class="col">
     <div class="note">
     given the following animation:
     <pre>@keyframes slidein {
     from { transform: scalex(0); }
     to { transform: scalex(1); }
    }
    </pre>
     </div>
     <div class="row">
     <div class="cell">
     <button class="play" title="play"></button>
     </div>
     <div class="cell flx">
     <div class="overlay">animation: 3s ease-in 1s 2 reverse both paused slidein;</div>
     <div class="animation a1"></div>
     </div>
     </div>
     <div class="row">
     <div class="cell">
     <button class="pause" title="pause"></button>
     </div>
     <div class="cell flx">
     <div class="overlay">animation: 3s linear 1s slidein;</div>
     <div class="animation a2"></div>
     </div>
     </div>
     <div class="row">
     <div class="cell">
     <button class="pause" title="pause"></button>
     </div>
     <div class="cell flx">
     <div class="overlay">animation: 3s slidein;</div>
     <div class="animation a3"></div>
     </div>
     </div>
     </div>
    </div>
    
    //JS
    
    window.addeventlistener('load', function () {
      var animation = array.from(document.queryselectorall('.animation'));
      var button    = array.from(document.queryselectorall('button'));
    
      function togglebutton (btn, type) {
        btn.classlist.remove('play', 'pause', 'restart');
        btn.classlist.add(type);
     btn.title = type.touppercase(type);
      }
    
      function playpause (i) {
        var btn  = button[i];
        var anim = animation[i];
    
        if (btn.classlist.contains('play')) {
          anim.style.animationplaystate = 'running';
          togglebutton(btn, 'pause');
        }
     else if (btn.classlist.contains('pause')) {
          anim.style.animationplaystate = 'paused';
          togglebutton(btn, 'play');
        }
     else {
          anim.classlist.remove('a' + (i + 1));
          settimeout(function () {
            togglebutton(btn, i === 0 ? 'play' : 'pause');
            anim.style.animationplaystate = '';
            anim.classlist.add('a' + (i + 1));
          }
    , 100)
        }
      }
    
      animation.foreach(function (node, index) {
        node.addeventlistener('animationstart', function () { togglebutton(button[index], 'pause');   }
    );
        node.addeventlistener('animationend',   function () { togglebutton(button[index], 'restart'); }
    );
      }
    );
    
      button.foreach(function (btn, index) {
        btn.addeventlistener('click', function () { playpause(index); }
    );
      }
    );
    }
    )
    <div class="view_port">
      <div class="polling_message">
        listening for dispatches
      </div>
      <div class="cylon_eye"></div>
    </div>
    
    //CSS
    .polling_message {
      color: white;
      float: left;
      margin-right: 2%;            
    }
    
    .view_port {
      background-color: black;
      height: 25px;
      width: 100%;
      overflow: hidden;
    }
    
    .cylon_eye {
      background-color: red;
      background-image: linear-gradient(to right,
          rgba(0, 0, 0, .9) 25%,
          rgba(0, 0, 0, .1) 50%,
          rgba(0, 0, 0, .9) 75%);
      color: white;
      height: 100%;
      width: 20%;
    
      -webkit-animation: 4s linear 0s infinite alternate move_eye;
              animation: 4s linear 0s infinite alternate move_eye;
    }
    
    @-webkit-keyframes move_eye { from { margin-left: -20%; }
     to { margin-left: 100%; }
      }
            @keyframes move_eye { from { margin-left: -20%; }
     to { margin-left: 100%; }
      }
    

    潜在的问题

    眨眼和闪烁的动画对于有认知问题的人来说是有问题的,比如注意力缺陷多动障碍(ADHD)。此外,某些动画效果可以触发前庭神经紊乱、癫痫、偏头痛和暗点敏感性。

    考虑提供一种暂停或禁用动画的机制,以及使用Reduced Motion Media Query(简约运动媒体查询),为那些表示不喜欢动画的用户创建一个良好的体验。

    <style>
    div
    {
    	width:100px;
    	height:100px;
    	background:red;
    	position:relative;
    	animation:demp5sinfinite;
    	-webkit-animation:demo5sinfinite;
    }
    @keyframesdemo
    {
    	from{left:0px;}
    	to{left:450px;}
    }
    @-webkit-keyframes demo
    {
    	from{left:0px;}
    	to{left:450px;}
    }
    </style>
    </head>
    <body>
    <div></div>

    效果图:

    注意:Internet Explorer 9 及更早IE版本不支持 animation 属性。