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

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_

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

_x000D_

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   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   lt img class  image  src  http   makeameme org media templates 120 grumpy cat jpg  alt    width  120  height  120  gt  x000D   x000D   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

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

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

[css] Play multiple CSS animations at the same time

Examples related to css

Examples related to css-animations