将多个CSS动画合并为一个总体动画

Question

将多个CSS动画合并为一个总体动画

csscss-animations

40

我有一组动画，我将它们依次排列以创建一个更大的整体动画。为了简单起见，我创建了一个简单的演示例子，但这只是我想要实现的简化版本（底部的代码）...

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

我想做的是将所有这些合并为一个动画，而不是几个动画。目前，我添加一个类来触发动画的不同阶段，但我想做的是仅添加一个类来启动动画，然后它将继续播放。

我不知道如何将这些动画合并为一个，因为它们作用于不同的元素。我对CSS3动画仍然相当新手，所以能否做到这一点呢？

任何想法吗？

代码

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

翻译为：

JavaScript

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

- Hristo

2个回答

27

您可以在简写属性中使用逗号分隔多个动画：

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

- om_jaipur

从我所看到的情况来看，它无法与webkit动画和两个3D旋转一起使用。 - clearlight

试试这个：-webkit-animation: 动画名称 2秒无限, 其他动画名称 1秒; - om_jaipur

7

显然，对于相同类型的动画（如旋转等），它不起作用...第二个会覆盖第一个。我读到的解决方法建议将元素包装在div中，并将一个动画应用于元素，另一个动画应用于包含的div。 - clearlight

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Daniel Imms · Accepted Answer

通过改变单个元素的样式，一个动画就能实现。你可以对动画应用延迟来达到你想要的效果，使你几乎可以将所有东西移出JS。

这个例子将你的.outside和.inside动画合并起来，基本上是将它们附加到规则中，并且现在只需像这样添加类：-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;
}

新动画

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