Play multiple CSS animations at the same time

css css-animations
Don P picture Don P · Nov 18, 2014 · Viewed 179.3k times · Source

How can I have two CSS animations playing at different speeds?

  • The image should be rotating and growing at the same time.
  • The rotation will cycle every 2 seconds.
  • The growth will cycle every 4 seconds.

Example Code:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 2s linear infinite;
    -webkit-animation:scale 4s linear infinite;
}

@-webkit-keyframes spin { 
    100% { 
        transform: rotate(180deg);
    } 
}

@-webkit-keyframes scale {
    100% {
         transform: scaleX(2) scaleY(2);
    }
}

http://jsfiddle.net/Ugc5g/3388/ - only one animation (the last one declared) plays.

Answer

Critical Error picture Critical Error · Oct 15, 2015

In case anyone new is coming along and catching this thread, you can specify multiple animations--each with their own properties--with a comma.

Example:

animation: rotate 1s, spin 3s;

Related questions

How to make blinking/flashing text with CSS 3

Currently, I have this code: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } It blinks, but it only blinks in "one direction". I mean, it only fades out, and then it appears back …

Read More
css3 transition animation on load?

Is it possible to use CSS3 transition animation on page load without using Javascript? This is kind of what I want, but on page load: http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html What I found so far CSS3 …

Read More
CSS3 Spin Animation

I have reviewed quite a few demos and have no idea why I can't get the CSS3 spin to function. I am using the latest stable release of Chrome. The fiddle: http://jsfiddle.net/9Ryvs/1/

Read More