CSS 将多个css动画组合成一个整体动画

combining multiple css animations into one overall animation

提问by Hristo

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/

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 onceto 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?

我不知道如何将动画组合成一个，因为它们适用于不同的元素。我对 CSS3 动画还是很陌生，所以可以这样做吗？

Any thoughts?

有什么想法吗？

---

---

The Code

编码

HTML

HTML

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

CSS

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

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

采纳答案by Daniel Imms

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.

一个动画一个元素是当动画改变单个元素的样式时它是如何工作的。但是，您可以对动画应用延迟以实现您想要的效果，从而允许您将几乎所有内容移出 JS。

This example merges your .outsidean .insideanimations, 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;

这个例子合并了你.outside的.inside动画，基本上是在规则后面加上一个逗号，你现在 JS 只需添加这样的类-webkit-animation-name: button-bounce, rotate, skyblue;

jsFiddle

js小提琴

CSS

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

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

回答by om_jaipur

You can use multiple animations separate by comma in shorthand property:

您可以在速记属性中使用多个以逗号分隔的动画：

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