combining multiple css animations into one overall animation

Question

I have a set of animations that I queue up one after the other to create a bigger overall animation. For the sake of simplicity, I've created a simple fiddle to demo what I mean, but it's a simplified version of what I'm trying to achieve (code on bottom)...

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

What I want to do is combine all of these into one animation instead of several. Currently, I add a class to trigger the different stages of the animation, but what I would like to do is add a class only once to start the animation, and then it'll just go.

I don't see how to combine the animations into one since they work on different elements. I'm still fairly new to CSS3 animations, so is it possible to do this?

Any thoughts?

---

The 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);
          });
        });
    });
});

Answer 1

One animation one element is how it works as the animations change the styles of a single element. You can however apply delays to the animations to achieve what you want, allowing you to move pretty much everything out of JS.

This example merges your .outside an .inside animations, by basically appending them with a comma to the rule and you JS now just adds the class like this -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;
}

New 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');
                }
            });
        }
    });
});