Question

I have a simple question (I think).

Is there any way to chain CSS3 animations like:

    #element { animation: fadeIn 5s 0s linear, fadeOut 5s 25s linear ; }

    @keyframes fadeOut {
        from { opacity:1; }
        to { opacity:0; }
    }

    @keyframes fadeIn {
        from { opacity:0; }
        to { opacity:1; }
    }

In this case, I think I could fadingIn and fadingOut different elements with different delays.
Thanks a lot,
Lionel

Answer 1

Yes, you can use 0%, 25%, etc. increments and chain the whole animation.

Take a look at this fiddle.

What I have done is using incremenets to make the animation one big chain.

@-webkit-keyframes move {
0%   {top:  100px;
      left: 100px;
      -webkit-transform: rotate(135deg);}
25%  {top:  250px;
      left: 250px;
      -webkit-transform: rotate(135deg);}
50%  {top:  100px;
      left: 250px;
      -webkit-transform: rotate(0deg);}
75%  {top:  250px;
      left: 100px;
      -webkit-transform: rotate(-135deg);}
100% {top:  100px;
      left: 100px;
      -webkit-transform: rotate(0deg);}
}

The % timings are stops where the animation should change, so to change when your object fades in and out, just change those percentages accordingly.