Play multiple CSS animations at the same time

Question

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

User · Answer

You cannot play two animations since the attribute can be defined only once. Rather why don't you include the second animation in the first and adjust the keyframes to get the timing right?

_x000D_

.image {_x000D_
    position: absolute;_x000D_
    top: 50%;_x000D_
    left: 50%;_x000D_
    width: 120px;_x000D_
    height: 120px;_x000D_
    margin:-60px 0 0 -60px;_x000D_
    -webkit-animation:spin-scale 4s linear infinite;_x000D_
}_x000D_
_x000D_
@-webkit-keyframes spin-scale { _x000D_
    50%{_x000D_
        transform: rotate(360deg) scale(2);_x000D_
    }_x000D_
    100% { _x000D_
        transform: rotate(720deg) scale(1);_x000D_
    } _x000D_
}

_x000D_

<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

_x000D_

User · Answer

TL DR With a comma  you can specify multiple animations each with their own properties as stated in the CriticalError answer below  Example  animation  rotate 1s  spin 3s   Original answer There are two issues here   1 -webkit-animation spin 2s linear infinite  -webkit-animation scale 4s linear infinite   The second line replaces the first one  So  has no effect   2 Both keyframes applies on the same property transform As an alternative you could to wrap the image in a  lt div gt  and animate each one separately and at different speeds  http   jsfiddle net rnrlabs x9cu53hp   x000D   x000D   scaler       position  absolute      top  100       left  50       width  120px      height  120px      margin -60px 0 0 -60px      animation  scale 4s infinite linear          spinner       position  relative      top  150px      animation  spin 2s infinite linear       keyframes spin        100             transform  rotate 180deg              keyframes scale       100             transform  scaleX 2  scaleY 2           x000D   lt div class  spinner  gt   lt img class  scaler  src  http   makeameme org media templates 120 grumpy cat jpg  alt    width  120  height  120  gt   lt div gt  x000D   x000D   x000D

User · Answer

you can try something like this  set the parent to rotate and the image to scale so that the rotate and scale time can be different   x000D   x000D  div   x000D    position  absolute  x000D    top  50   x000D    left  50   x000D    width  120px  x000D    height  120px  x000D    margin  -60px 0 0 -60px  x000D    -webkit-animation  spin 2s linear infinite  x000D    x000D   image   x000D    position  absolute  x000D    top  50   x000D    left  50   x000D    width  120px  x000D    height  120px  x000D    margin  -60px 0 0 -60px  x000D    -webkit-animation  scale 4s linear infinite  x000D    x000D   -webkit-keyframes spin   x000D    100    x000D      transform  rotate 180deg   x000D      x000D    x000D   -webkit-keyframes scale   x000D    100    x000D      transform  scale 2   x000D      x000D    x000D   lt div gt  x000D     lt img class  image  src  http   makeameme org media templates 120 grumpy cat jpg  alt    width  120  height  120    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can indeed run multiple animations simultaneously  but your example has two problems   First  the syntax you use only specifies one animation   The second style rule hides the first   You can specify two animations using syntax like this   -webkit-animation-name  spin  scale -webkit-animation-duration  2s  4s   as in this fiddle  where I replaced  scale  with  fade  due to the other problem explained below    Bear with me    http   jsfiddle net rwaldin fwk5bqt6   Second  both of your animations alter the same CSS property  transform  of the same DOM element   I don t believe you can do that   You can specify two animations on different elements  the image and a container element perhaps   Just apply one of the animations to the container  as in this fiddle  http   jsfiddle net rwaldin fwk5bqt6 2

User · Answer

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

[css] Play multiple CSS animations at the same time

Examples related to css

Examples related to css-animations