web-dev-qa-db-fra.com

combinaison de plusieurs animations css en une seule animation globale

J'ai un ensemble d'animations que j'attends les unes après les autres pour créer une animation globale plus grande. Par souci de simplicité, j'ai créé un simple violon pour faire la démonstration de ce que je veux dire, mais c'est une version simplifiée de ce que j'essaie de réaliser (code en bas) ...

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

Ce que je veux faire, c'est combiner tout cela en une seule animation au lieu de plusieurs. Actuellement, j'ajoute une classe pour déclencher les différentes étapes de l'animation, mais ce que je voudrais faire, c'est ajouter une classe une seule fois pour démarrer l'animation , puis ça ira.

Je ne vois pas comment combiner les animations en une seule car elles fonctionnent sur différents éléments. Je suis encore relativement nouveau dans les animations CSS3, est-il possible de le faire?

Des pensées?

Le code

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);
          });
        });
    });
});
css3css-animations
35
Hristo

Une animation, un élément, c'est comment cela fonctionne, car les animations changent les styles d'un seul élément. Vous pouvez cependant appliquer des retards aux animations pour obtenir ce que vous voulez, vous permettant de déplacer à peu près tout de JS.

Cet exemple fusionne votre .outside un .inside animations, en les ajoutant simplement par une virgule à la règle et vous JS ajoute maintenant simplement la classe comme ceci -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;
}

Nouvelles animations

@-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');
                }
            });
        }
    });
});
23
Daniel Imms

Vous pouvez utiliser plusieurs animations séparées par une virgule dans la propriété de raccourci:

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