多个webkit动画

时间:2012-09-25 20:30:19

标签: css animation webkit

我正在尝试一次运行多个webkit动画。演示可以be seen here

HTML:

<body>
  <div class="dot"></div>
</body>

JavaScript的:

$(function(){

    $('body').append('<div class="dot" style="left:100px; top:200px"></div>');


});

CSS:

body{
  background: #333;
}

.dot{
    background: -webkit-radial-gradient(center, ellipse cover, #f00 90%, #fff 10%);
    border-radius: 6px;
    background: red;
    display: block;
    height: 6px;
    position: absolute;
    margin: 40px 0 0 40px;
    width: 6px;
    -webkit-box-shadow: 0 0 2px 2px #222;




    -webkit-animation: shrink 2.s ease-out;

    -webkit-animation: pulsate 4s infinite ease-in-out;
  }


  @-webkit-keyframes shrink{
    0%{
      -webkit-box-shadow: 0 0 2px 2px #222;
      -webkit-transform: scale(2);
    }
    50%{
      -webkit-box-shadow: 0 0 2px 2px #222;
          -webkit-transform: scale(1.5);
      }
    100%{
      -webkit-box-shadow: 0 0 2px 2px #222;
          -webkit-transform: scale(1);
      }
  }

    @-webkit-keyframes pulsate{
      0%{
          -webkit-transform: scale(1);
      -webkit-box-shadow: 0 0 2px 2px #222;
      }
      50%{
          -webkit-transform: scale(1.1);
      -webkit-box-shadow: 0 0 2px 2px #111;
      }
    100%{ 
          -webkit-transform: scale(1);
      -webkit-box-shadow: 0 0 2px 2px #222;
      }
  }

.dot有两个动画:

  1. 脉动(很难看,但它在那里)
  2. 也许我需要找到一个同步它们的好方法。一旦完成缩小动画,就会产生脉动。我不能同时运行它们所以搏动在.dot。

    中被注释掉了

    有什么建议吗?感谢。

1 个答案:

答案 0 :(得分:76)

您可以使用,分隔多个动画,并根据需要在第二个动画上设置延迟:

-webkit-animation: shrink 2s ease-out, pulsate 4s 2s infinite ease-in-out;
第二个动画中的

2s是延迟


自Chrome 43和Safari 9 / 9.2起,只有Blackberry和UC(Android)浏览器才需要-webkit-前缀。所以新的正确语法将是

animation: shrink 2s ease-out, pulsate 4s 2s infinite ease-in-out;