De multiples animations webkit

Je suis en train de lancer plusieurs webkit animations à la fois. Démonstration peut ê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 j'ai besoin de trouver un bon moyen de les synchroniser. Une fois rétrécir animation est réalisée, tremblent. Je ne peux pas les utiliser tous les deux à la fois si palpitent est commenté dans .dot.

Des suggestions? Merci.

  • En fait, je ne vois pas l'animation en cours.
  • Pulsate est l'animation en cours et c'est vraiment dur à voir. Recherchez l'ombre autour (le zoom peut aider). Merci.
  • Nope, même après un zoom avant, je ne peux pas dire une chose. Mon inspecteur me dit "invalid valeur de propriété" sur la propriété d'une animation.
  • Peut-être en raison de la shrink 2.s ease-out, je l'ai changé pour shrink 2s ease-out et cela a fonctionné
InformationsquelleAutor ialphan | 2012-09-25