ejemplos - Animación y visualización CSS3 Ninguna

css move animation

Question

Tengo una Animación CSS 3 para un div que se desliza después de un tiempo determinado. Lo que me gustaría es que unos pocos divs llenen el espacio de la div animada que se desliza, que luego empujará esos elementos hacia abajo en la página.

Cuando intento esto en el primer div que se desliza todavía ocupa espacio incluso cuando no está visible. Si cambio el div para display:none el div no se desliza en absoluto.

¿Cómo puedo tener un div que no ocupe espacio hasta que esté programado para entrar (usando CSS para el tiempo).

Estoy usando Animate.css para las animaciones.

Así es como se ve el código:

<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>

<div id="div1"><!-- Content --></div>
<div id="div2"><!-- Content --></div>
<div id="div3"><!-- Content --></div>

Como muestra el código, me gustaría que el div principal esté oculto y los otros divs se muestren al principio. Entonces tengo el siguiente conjunto de retardo:

#main-div{
   -moz-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
   -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

Es en ese punto que me gustaría que el div principal empuje a los otros divs a medida que entra.

¿Cómo hago esto?

Nota: he considerado usar jQuery para hacer esto, sin embargo, prefiero usar estrictamente CSS, ya que es más suave y el tiempo está un poco mejor controlado.

EDITAR

Intenté lo que sugirió Duopixel, pero entendí mal y no estoy haciendo esto correctamente o no funciona. Aquí está el código:

HTML

<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>

CSS

#main-image{
    height: 0;
    overflow: hidden;
   -moz-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
   -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}
#main-image.fadeInDownBig{
    height: 375px;
}

Answer 1

Tuve el mismo problema, porque tan pronto como se display: x; está en animación, no se animará.

Terminé creando fotogramas clave personalizados, primero cambiando el valor de display y luego los otros valores. Puede dar una mejor solución.

O, en lugar de usar display: none; use position: absolute; visibility: hidden; position: absolute; visibility: hidden; Deberia de funcionar.

Answer 2

CSS (o jQuery, para el caso) no puede animar entre la display: none; y display: block; . Peor aún: no puede animar entre height: 0 y height: auto . Por lo tanto, necesita codificar la altura (si no puede codificar los valores, entonces necesita usar javascript, pero esta es una pregunta completamente diferente);

#main-image{
    height: 0;
    overflow: hidden;
    background: red;
   -prefix-animation: slide 1s ease 3.5s forwards;
}

@-prefix-keyframes slide {
  from {height: 0;}
  to {height: 300px;}
}

Mencionas que estás utilizando Animate.css, con el que no estoy familiarizado, por lo que este es un CSS vainilla.

Puedes ver una demostración aquí: http://jsfiddle.net/duopixel/qD5XX/

Answer 3

Ya hay algunas respuestas, pero esta es mi solución:

Yo uso opacity: 0 y visibility: hidden . Para asegurarnos de que la visibility esté configurada antes de la animación, debemos establecer los retrasos correctos.

Utilizo http://lesshat.com para simplificar la demostración, para usar sin esto simplemente agregue los prefijos del navegador.

(por ejemplo, -webkit-transition-duration: 0, 200ms; )

.fadeInOut {
    .transition-duration(0, 200ms);
    .transition-property(visibility, opacity);
    .transition-delay(0);

    &.hidden {
        visibility: hidden;
        .opacity(0);
        .transition-duration(200ms, 0);
        .transition-property(opacity, visibility);
        .transition-delay(0, 200ms);
    }
}

Entonces, tan pronto como agregue la clase hidden a su elemento, se desvanecerá.

Answer 4

Lo siguiente te hará animar un elemento cuando

1. Dándole una pantalla - Ninguno
2. Dándole una Pantalla - Bloque

CSS

.MyClass {
       opacity: 0;
       display:none;
       transition: opacity 0.5s linear;
       -webkit-transition: opacity 0.5s linear;
       -moz-transition: opacity 0.5s linear;
       -o-transition: opacity 0.5s linear;
       -ms-transition: opacity 0.5s linear;
 }

JavaScript

function GetThisHidden(){
    $(".MyClass").css("opacity", "0").on(''transitionend webkitTransitionEnd oTransitionEnd otransitionend'', HideTheElementAfterAnimation);
}

function GetThisDisplayed(){
    $(".MyClass").css("display", "block").css("opacity", "1").unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend");
}

function HideTheElementAfterAnimation(){
    $(".MyClass").css("display", "none");
}

Answer 5

Puede lograr tener una implementación pura de CSS con max-height

#main-image{
    max-height: 0;
    overflow: hidden;
    background: red;
   -prefix-animation: slide 1s ease 3.5s forwards;
}

@keyframes slide {
  from {max-height: 0;}
  to {max-height: 500px;}
}

Actualicé la demostración de Duopixel aquí: http://jsfiddle.net/qD5XX/231/

[como no tengo suficiente reputación para comentar su respuesta]

Answer 6

¿Cómo puedo tener un div que no ocupe espacio hasta que esté programado para entrar (usando CSS para el tiempo).

Aquí está mi solución al mismo problema.

Además, tengo un onclick en el último fotograma cargando otra presentación de diapositivas, y no debe poder hacer clic hasta que el último fotograma esté visible.

Básicamente mi solución es mantener el div 1 píxel alto usando una scale(0.001) , acercándolo cuando lo necesite. Si no le gusta el efecto de zoom, puede restablecer la opacity a 1 después de hacer zoom en la diapositiva.

#Slide_TheEnd {

    -webkit-animation-delay: 240s;
    animation-delay: 240s;

    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;

    -moz-animation-duration: 20s;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;

    -moz-animation-name: Slide_TheEnd;
    -webkit-animation-name: Slide_TheEnd;
    animation-name: Slide_TheEnd;

    -moz-animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;

    -moz-animation-direction: normal;
    -webkit-animation-direction: normal;
    animation-direction: normal;

    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    transform: scale(0.001);
    background: #cf0;
    text-align: center;
    font-size: 10vh;
    opacity: 0;
}

@-moz-keyframes Slide_TheEnd {
    0% { opacity: 0;  transform: scale(0.001); }
    10% { opacity: 1; transform: scale(1); }
    95% { opacity: 1; transform: scale(1); }
    100% { opacity: 0;  transform: scale(0.001); }
}

Otros fotogramas clave se eliminan por el bien de los bytes. Ignore la extraña codificación, está hecha por un script php que selecciona valores de un array y str_replace una plantilla: soy demasiado perezoso para volver a escribir todo para cada prefijo propietario en una presentación de más de 100 divs.