Saltar al contenido

animación de transición de cadena css

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;  
       
]
    
I slid in
I'm 2nd
I'm 3rd

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;

Demostración de violín JS

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *