35
Estoy tratando de ejecutar múltiples animaciones de webkit a la vez. Demo puede be seen here:Múltiples animaciones de webkit
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 tiene dos animaciones:
- psiquiatra
- pulsate (difícil de ver, pero que está ahí)
Tal vez tengo que encontrar una buena manera de sincronización de ellos. Una vez que termine la animación de contracción, pulse. No puedo ejecutarlos a la vez, así que las pulsaciones están comentadas en .dot.
¿Alguna sugerencia? Gracias.
En realidad, no veo ninguna animación en curso. –
@MadaraUchiha Pulsate es la animación actual y es realmente difícil de ver. Busque la sombra alrededor (el zoom podría ayudar). Gracias. – ialphan
No, incluso después de hacer zoom, no puedo decir nada. Mi inspector me dice "valor de propiedad no válido" en la propiedad de animación. –