Animations webkit multiples

J'essaie d'exécuter plusieurs animations webkit à la fois. Démo être vu ici:

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 a deux animations:

  1. rétrécir
  2. vibrer (difficile à voir, mais il est là)

Peut-être que je dois trouver un bon moyen de les synchroniser. Une fois l'animation de rétrécissement terminée, pulser. Je ne peux pas les exécuter tous les deux à la fois, donc pulsate est commenté .dot.

Des suggestions? Grâce.

36
demandé sur JakeGould 2012-09-26 00:30:19

1 réponses

Vous pouvez séparer plusieurs animations avec un , et définir un délai sur le second si nécessaire: 

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

2s dans la deuxième animation est le retard

Depuis Chrome 43 et Safari 9/9. 2, le préfixe -webkit- n'est nécessaire que pour le navigateur Blackberry et UC (Android). Ainsi, la nouvelle syntaxe correcte serait

animation: shrink 2s ease-out, pulsate 4s 2s infinite ease-in-out;
75
répondu Giona 2016-01-29 09:17:27