CODEWITHSUNDEEP
javascriptcsswebkit
sazr
sazr

Reputation: 25928

Have an element with 2 CSS Animations executing at the same time

I am experimenting with WebKits animations.

Is it possible for a HTML element to have more than one animation executing at the same time?

For example:

    @-webkit-keyframes FADE 
    {
       from {
          opacity: 0;
       }
       to {
          opacity: 1;
       }
    }

    @-webkit-keyframes TRICKY 
    {
       0% {
          -webkit-transform: translate(0px,0) rotate(-5deg) skew(-15deg,0);
       }
       50% {
          -webkit-transform: translate(-100px,0) rotate(-15deg) skew(-25deg,0);
       }
       75% {
          -webkit-transform: translate(-200px,0) rotate(-5deg) skew(-15deg,0);
       }
       100% {
          -webkit-transform: translate(0px,0) rotate(0) skew(0,0);
       }
    }

// Can this element have FADE execute for 5 seconds BUT halfway between that animation
// can I then start the TRICKY animation & make it execute for 2.5 seconds?
#myEle {
    -Webkit-animation-name: FADE TRICKY;
    -Webkit-animation-duration: 5s 2.5s;
}

The above was a really simple example. I would have many libraries of animations such as rotate, fade, etc. And I dont want to have to write a special animation if I want to have an element execute 2 animations at the same time.

Is this possible...

//Not sure if this is even valid CSS: can I merge 2 animations easily like this?
@-webkit-keyframes FADETRICKY
{
   FADE TRICKY;
}

Upvotes: 15

Views: 12502

Answers (2)

lemon郑
lemon郑

Reputation: 690

#myEle {
    -Webkit-animation-name: FADE,TRICKY;
    -Webkit-animation-duration: 5s,2.5s;
}

Use ',' no space. I was in Chrome version 16.0.899.0 to try.

Upvotes: 32

Stein G. Strindhaug
Stein G. Strindhaug

Reputation: 5119

You'll have to manually merge the animations, I think.

If you need to use something like this in several places I'd take a look at Less CSS or similar, so that you can use "mixins" (e.g. functions) to generate css. I use it for abstracting vendor specific css so that in the main .less file 5 or 6 lines of browser specific code can be replaced by one method.

Upvotes: 2

Related Questions