jquery - 是否可以在 CSS3 中的同一元素上链接动画

Question

我想在 CSS3 中旋转并从右向左移动任何图像。在短暂的延迟之后，我想将图像从它的新当前状态向上移动并将其从容器中淡出。

我能够使用关键帧和一些 jQuery 来触发动画很容易地实现第一个动画，但是每当我尝试添加第二个动画时，图像都会返回到它的初始状态，然后执行第二个动画。这是我目前所拥有的

@-webkit-keyframes image-slide-right-to-left {
    0%   { opacity: 1; }
100% { opacity: 1;  -webkit-transform: translate(-400px, 60px) rotate(-55deg);}
}

@-webkit-keyframes image-slide-up-and-out {
        0%   { opacity: 1; }
        100% { opacity: 1;  -webkit-transform: translate(400px, 260px) rotate(-55deg);}
    }

.image-slide-right-to-left{
        -webkit-animation: image-slide-right-to-left 3s, image-slide-up-and-out 3s;
        -moz-animation:    image-slide-right-to-left 3s, image-slide-up-and-out 3s;
        -ms-animation:     image-slide-right-to-left 3s, image-slide-up-and-out 3s;

        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        -ms-animation-fill-mode: forwards;

        -webkit-animation-delay: 4s, 8s;
        -moz-animation-delay: 4s, 8s;
        -ms-animation-delay: 4s, 8s;

        animation-timing-function: ease-in-out;
    }

<script>
    $(window).load(function() {
        $('.feature1 .implant').addClass('image-slide-right-to-left');
</script>

Answer 1

是的，可以在同一个元素上链接动画:

示例:

.animate-this {
   -webkit-animation:
      first-animation 2s infinite,
      another-animation 1s;
}

在 Mr. Google 上进行简单搜索!

您可以阅读关于 animations syntax here! 的很好的教程

来自 fellow Stacker! 的文章

一些元素的一个很好的例子是 chained animated .

---

已编辑

添加了一个 simple Fiddle example使用动画 gif 设置为背景的 div 动画。