2

Siguiendo el tutorial que detallo abajo he conseguido cargar animaciones realizadas con animista en Muse.

Lo que no consigo es enlazar varias animaciones consecutivas.

Por ejemplo, quiero conseguir enlazar los efectos scale-up-right y scale-up-left de forma consecutiva en un mismo elemento.

De forma independiente, cada uno de los efectos tiene este código:

.scale-up-right {
        -webkit-animation: scale-up-right 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        -moz-animation: scale-up-right 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        animation: scale-up-right 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    }

.scale-up-left {
    -webkit-animation: scale-up-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    -moz-animation: scale-up-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2017-4-28 20:47:46
 * http://animista.net
 * T: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes flip-horizontal-bottom{0%{-webkit-transform:rotateX(0);transform:rotateX(0)}100%{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}}@keyframes flip-horizontal-bottom{0%{-webkit-transform:rotateX(0);transform:rotateX(0)}100%{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}}
@-webkit-keyframes slit-in-vertical{0%{-webkit-transform:translateZ(-800px) rotateY(90deg);transform:translateZ(-800px) rotateY(90deg);opacity:0}54%{-webkit-transform:translateZ(-160px) rotateY(87deg);transform:translateZ(-160px) rotateY(87deg);opacity:1}100%{-webkit-transform:translateZ(0) rotateY(0);transform:translateZ(0) rotateY(0)}}@keyframes slit-in-vertical{0%{-webkit-transform:translateZ(-800px) rotateY(90deg);transform:translateZ(-800px) rotateY(90deg);opacity:0}54%{-webkit-transform:translateZ(-160px) rotateY(87deg);transform:translateZ(-160px) rotateY(87deg);opacity:1}100%{-webkit-transform:translateZ(0) rotateY(0);transform:translateZ(0) rotateY(0)}}
@-webkit-keyframes scale-up-right{0%{-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:100% 50%;transform-origin:100% 50%}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:100% 50%;transform-origin:100% 50%}}@keyframes scale-up-right{0%{-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:100% 50%;transform-origin:100% 50%}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:100% 50%;transform-origin:100% 50%}}
@-webkit-keyframes scale-up-left{0%{-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 50%;transform-origin:0 50%}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%}}@keyframes scale-up-left{0%{-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 50%;transform-origin:0 50%}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%}}

He probado bastantes combinaciones pero no soy capaz de conseguirlo.

Gracias!

Tutorial de Animista en Muse: http://responsive-muse.com/2017/04/12/creating-easy-css-animations-muse-animista/

Web de Animista: http://animista.net/

1
  • 1
    "He probado bastantes combinaciones pero no soy capaz de conseguirlo". Por favor, incluye las combinaciones que hayas intentado para poder ver si alguna de ellas tiene algún error y por eso no funciona, y también para evitar probar cosas que ya hayas intentado y comprobado que no funcionan.
    – Alvaro Montoro
    Commented el 29 abr. 2017 a las 4:53

2 respuestas 2

1

Existe la propiedad animation-delay. Esta propiedad acepta una cantidad de tiempo (en segundos o milisegundos) que será tomada para rerasar la animación. En tu caso, el delay lo tendría obviamente la clase que dispara la segunda animación y la cantida de tiempo será la duración de la primera animación.

.scale-up-left {
    animation: scale-up-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) .4s 1 normal both;
}

PD: El valor 1 corresponde a animation-iteration-count y normal a animation-direction.

1

El problema con el que te encuentras en el código que compartes es que si le pones a un elemento las clases scale-up-right scale-up-left, como ambas tienen animación definidas, una "pisará" a la otra y sólo una de las animaciones se ejecutará y no las dos a la vez o una seguida de la otra (aunque las tengas definidas en clases diferentes y aunque tengas animation-delay en las dos).

Pero en CSS puedes añadir varias animaciones a un elemento separándolas por comas. Y de igual manera, si quieres añadir propiedades a las animaciones, las tendrás que separar con comas y se aplicarán a la animación correspondiente en el orden en el que se pongan. Por ejemplo:

miSelector {
    animation-name: nombre_animacion_A, nombre_animacion_B;
    animation-duration: duracion_animacion_A, duracion_animacion_B;
    animation-direction: direccion_animacion_A, direccion_animacion_B;
    ...
}

Entonces para este caso, lo que quieres hacer es crear una nueva regla CSS, que combine las animaciones de scale-up-right y scale-up-left en una sola, separándolas con comas. Y después añadir un animation-delay para que la primera se ejecute transcurridos 0 segundos, mientras que la segunda se ejecute transcurrida la duración de la primera (así se ejecutarán encadenadas y sin pausa).

Aquí abajo lo puedes ver funcionando. Primero se ejecuta la animación de scale-up-left (creciendo en tamaño) y después se ejecuta la animación de scale-up-right (moviéndose de derecha a izquierda).

Para simplificarlo un poco y que no haya mucho ruido, he quitado los prefijos de navegador, tú deberías volver a añadirlos:

.midiv {
  animation-name: scale-up-left, scale-up-right;
  animation-duration: 0.4s, 0.4s;
  animation-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000), cubic-bezier(0.390, 0.575, 0.565, 1.000);
  animation-direction: both, both;
  animation-delay:0s, 0.4s;
}

@keyframes scale-up-right {
  0% {
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%
  }
}

@keyframes scale-up-left {
  0% {
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%
  }
}
<div class="midiv">
  TEXTO
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.