combinar múltiples animaciones css en una animación general

Question

combinar múltiples animaciones css en una animación general

Tengo un conjunto de animaciones que pongo en cola una tras otra para crear una animación general más grande. En aras de la simplicidad, he creado un violín simple para demostrar lo que quiero decir, pero es una versión simplificada de lo que estoy tratando de lograr (código en la parte inferior)...

Http://jsfiddle.net/UnsungHero97/qgvrs/5 /

Lo que quiero hacer es combinar todo esto en una animación en lugar de varias. Actualmente, agrego una clase para activar las diferentes etapas de la animación, pero lo que me gustaría hacer es agregar una clase solo una vez para iniciar la animación, y luego simplemente se irá.

No veo cómo combinar las animaciones en una, ya que funcionan en diferentes elementos. Todavía soy bastante nuevo en las animaciones CSS3, así que ¿es posible hacer esto?

¿Algún pensamiento?

El Código

HTML

<div class="outside">
    <div class="inside"></div>
</div>

CSS

.outside {
    border: 1px solid magenta;
    height: 100px;
    width: 100px;
    position: relative;
}

.inside {
    border: 1px solid skyblue;
    height: 60px;
    width: 60px;
    margin-top: -31px;
    margin-left: -31px;
    position: absolute;
    top: 50%;
    left: 50%;
}

@-webkit-keyframes scale-in {
  0% {
    -webkit-transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scale(1);
  }
  25% {
    -webkit-transform: scale(.8);
  }
  50% {
    -webkit-transform: scale(1);
  }
  75% {
    -webkit-transform: scale(.9);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

@-webkit-keyframes rotate {
    0% {
    -webkit-transform: rotate(0deg);
    }
    100% { 
    -webkit-transform: rotate(360deg);
    }
}

.bounce {
  -webkit-animation-duration: 500ms;
    -webkit-animation-name: bounce;
}

.animate {
    -webkit-animation-delay: 0s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    -webkit-transform: translateZ(0);
}

.click {
    border: 1px solid skyblue;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-name: rotate;
}

.click .inside {
    border: 1px solid magenta;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-name: rotate;
}

.clicked {
    border: 1px solid magenta;
}

.clicked .inside {
    border: 1px solid skyblue;
    -webkit-animation-duration: 750ms;
    -webkit-animation-name: scale-in;
}

JS

$(document).ready(function() {
    $(document).click(function() {
        var jqElement = $('.outside');

        jqElement
          .off()
          .addClass('animate')
          .addClass('bounce');

        jqElement.on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(event) {

          event.stopPropagation();

          jqElement
            .removeClass('bounce')
            .removeClass('animate')
            .off()
            .addClass('animate')
            .addClass('click');

          jqElement.on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(event) {

            event.stopPropagation();

            jqElement
              .removeClass('click')
              .removeClass('animate')
              .off()
              .addClass('clicked');

            setTimeout(function() {
              jqElement.removeClass('clicked');
            }, 500);
          });
        });
    });
});

33

css3 css-animations

Author: Hristo, 2013-03-29

Source

2 answers

Puede usar varias animaciones separadas por coma en la propiedad taquigrafía:

.selector
{
    animation: animation-name 2s infinite,
    other-animation-name 1s;
}

12

Author: om.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-22 12:42:19

score 22 · Accepted Answer

Una animación un elemento es cómo funciona a medida que las animaciones cambian los estilos de un solo elemento. Sin embargo, puede aplicar retrasos a las animaciones para lograr lo que desea, lo que le permite mover casi todo fuera de JS.

Este ejemplo fusiona sus animaciones .outside y .inside, básicamente agregándolas con una coma a la regla y ahora JS solo agrega la clase así -webkit-animation-name: button-bounce, rotate, skyblue;

JsFiddle

CSS

.outside.animate {
    -webkit-animation-delay: 0s, .5s, .5s;
    -webkit-animation-duration: 500ms, 1000ms, 1000ms;
    -webkit-animation-name: button-bounce, rotate, skyblue;
}

.animate {
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    -webkit-transform: translateZ(0);
}

.outside.animate .inside {
    -webkit-animation-delay: .5s, .5s, 1.5s;
    -webkit-animation-duration: 1000ms, 1000ms, 750ms;
    -webkit-animation-name: rotate, magenta, scale-in;
}

Nuevo animaciones

@-webkit-keyframes magenta {
    0% { border: 1px solid magenta; }
    99.99% { border: 1px solid magenta; }
    100% { border: 1px solid skyblue; }
}
@-webkit-keyframes skyblue {
    0% { border: 1px solid skyblue; }
    99.99% { border: 1px solid skyblue; }
    100% { border: 1px solid magenta; }
}

JavaScript

$(document).ready(function() {
    $(document).click(function() {
        var count = 0;
        var jqElement = $('.outside');
        if (!jqElement.hasClass('animate')) {
            jqElement.addClass('animate');
            jqElement.on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(event) {
                count++;
                if (count >= 6) {
                    jqElement.off('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd');
                    jqElement.removeClass('animate');
                }
            });
        }
    });
});