Ya no tienes que buscar más por todo internet porque has llegado al sitio necesario, tenemos la solución que quieres encontrar pero sin problemas.
Solución:
El truco consiste en realizar una animación primero para ocultar todos los elementos (cuando se carga la página) y encadenarlo a la animación que revelará los elementos. Este es un ejemplo de trabajo para usted en CSS PURO Y HTML:
div.slideIn
position: absolute;
top: 200px;
width: 100px;
height: 100px;
border: 1px solid black;
animation-name: hide, slideIn;
animation-duration: 5s;
animation-timing-function: ease-in;
animation-iteration-count: 1;
-moz-animation-name: hide, slideIn;
-moz-animation-duration: 5s;
-moz-animation-timing-function: ease-in;
-moz-animation-iteration-count: 1;
-webkit-animation-name: hide, slideIn;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
-o-animation-name: hide, slideIn;
-o-animation-duration: 5s;
-o-animation-timing-function: ease-in;
-o-animation-iteration-count: 1;
opacity: 1;
div.slideIn.first
left: 50px;
animation-delay: 0s, 0s;
-moz-animation-delay: 0s, 0s;
-webkit-animation-delay: 0s, 0s;
-o-animation-delay: 0s, 0s;
div.slideIn.second
left: 150px;
animation-delay: 0s, 2s;
-moz-animation-delay: 0s, 2s;
-webkit-animation-delay: 0s, 2s;
-o-animation-delay: 0s, 2s;
div.slideIn.third
left: 250px;
animation-delay: 0s, 4s;
-moz-animation-delay: 0s, 4s;
-webkit-animation-delay: 0s, 4s;
-o-animation-delay: 0s, 4s;
@keyframes hide
from opacity: 0; to opacity: 0
@-moz-keyframes hide
from opacity: 0; to opacity: 0
@-webkit-keyframes hide
from opacity: 0; to opacity: 0
@-o-keyframes hide
from opacity: 0; to opacity: 0
@keyframes slideIn
0% opacity: 0; top: -100px;
1% opacity: 1; top: -100px;
100% opacity: 1; top: 200px;
@-moz-keyframes slideIn
0% opacity: 0; top: -100px;
1% opacity: 1; top: -100px;
100% opacity: 1; top: 200px;
@-webkit-keyframes slideIn
0% opacity: 0; top: -100px;
1% opacity: 1; top: -100px;
100% opacity: 1; top: 200px;
@-o-keyframes slideIn
0% opacity: 0; top: -100px;
1% opacity: 1; top: -100px;
100% opacity: 1; top: 200px;
]
Nota: elimine la línea del 1% de la animación slideIn para que aparezca gradualmente mientras se desliza hacia adentro.
Nota: IE aún no admite animaciones CSS3.
Lo que probablemente estés buscando son devoluciones de llamada de animación para transiciones CSS. Fabrizio Stelluto escribió un gran artículo sobre el tema, demostrando varios enfoques para abordar este problema.
Si está utilizando jQuery, puede evitar la sobrecarga de la detección de características (olfateo) ya que ya se ha escrito un complemento (por supuesto…) para este propósito. Puede usarlo para encadenar transiciones CSS como lo haría normalmente usando llamadas de animación de JavaScript bajo jQuery, es decir, usando las devoluciones de llamada de animación para invocar devoluciones de llamada adicionales.
Además, se han publicado varias preguntas aquí en StackOverflow que puede encontrar útiles:
- Devolución de llamada en la transición de CSS
- ¿Hay una devolución de llamada al completar una animación CSS3?
- Devolución de llamada cuando finaliza la transición de CSS3
Usando un marco como jQuery Transit, puede lograr esto con lo siguiente:
JavaScript:
$(document).ready(function ()
showDiv($('div:first'));
function showDiv(div)
div.transition(
opacity: 1
, 1000, function ()
//call back
showDiv(div.next("div"));
);
);
HTML:
CSS:
div
margin: 20px;
width: 100px;
height: 100px;
background-color: black;
float: left;
opacity: 0;