Question

I have any image which I would like to rotate and move from right to left in CSS3. After a short delay I would then like to move the image from it’s new current state up and fade it out of the container.

I am able to achieve the first animation easily enough using keyframes and some jQuery to trigger the animation however whenever I try to add the second animation the image returns to it’s initial state and then executes the second animation. Here is what I have so far

@-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

Yes, it is possible to chain animations on the same element:

Example:

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

A simple search at Mr. Google!

You can read a good tutorial about the animations syntax here!

An article from a fellow Stacker!

A nice example to some elements being chained animated.

---

EDITED

Added a simple Fiddle example with a div being animated with an animated gif set as background.