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:
- rétrécir
- 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é pourshrink 2s ease-out
et cela a fonctionné
Vous devez vous connecter pour publier un commentaire.
Vous pouvez séparer les diverses animations avec un
,
et définissez un délai pour la seconde si nécessaire:2s
dans la deuxième animation est le retardDepuis Chrome 43 et Safari 9/9.2, la
-webkit-
préfixe n'est nécessaire que pour les Blackberry et les communications UNIFIÉES (Android) du navigateur. Ainsi, la nouvelle syntaxe correcte seraitname duration timing delay
. Seraitpulsate 4s ease-out 2s infinite