How to Animate Multiple CSS Transform Properties Separately Using Keyframe Animation

How to animate multiple CSS transform properties separately using keyframe animation

Yes, it is possible. Instead of calling two animation-names, create only one animation with both actions inside:

@keyframes translateXandZ {
    100% {
        transform: translateX(100px) rotateZ(80deg);
    }
}

Look at Google's "Animate your HTML5" presentation.

Here is a workaround, even though it is a bit of a coarse version:

@-webkit-keyframes translateXandZ {
    0% {-webkit-transform: translateX(0px) rotateZ(0deg);}
    2% {-webkit-transform: translateX(1px) rotateZ(0deg);}
    5% {-webkit-transform: translateX(3px) rotateZ(0deg);}
    20% {-webkit-transform: translateX(20px) rotateZ(0deg);}
    80% {-webkit-transform: translateX(80px) rotateZ(80deg);}
    95% {-webkit-transform: translateX(97px) rotateZ(80deg);}
    98% {-webkit-transform: translateX(99px) rotateZ(80deg);}
    100% {-webkit-transform: translateX(100px) rotateZ(80deg);}
}

Your animation is linear, but to make it ease-in-out, I played with the beginning and ending of the animation. It's still not perfect, but this is the only way I see how you could get what you want.

Can we perform multiple transformations on an element through different animations?

transform can take more than one rule/value at once. you can mix those values and add as many steps as you wish.

Basicly:

@import 'https://necolas.github.io/normalize.css/latest/normalize.css';

/* //////////////////////////////// INITIAL //////////////////////////////// */

html, body{ height:100% } body{ background:#eee }

#btnCont{

  display:block; width:100px; height:100px; margin:0 auto; position:relative;

  transform:translateY(-50%); top:50%; perspective:1000px

}

#btn {

  width:100%; height:100%; background:#333; color:#eee; border:0; outline:0;

  text-transform:uppercase; transform:rotateX(93deg) translateX(0);

  transform-origin:bottom

}

/* //////////////////////////////// __ANIM_ //////////////////////////////// */

.rotUp.movUp{

  animation-name:anim; animation-duration:1.5s; animation-fill-mode:forwards

}

@keyframes anim{ 

  0%{ transform:rotateX(93deg) translateX(0) }

  75%{ transform:rotateX(25deg)  translateX(90px) }

  100%{ transform:rotateX(0deg)  translateX(95px) }

}

<div id="btnCont"> <button id="btn" class="rotUp movUp">button</button> </div>

Play multiple CSS animations at the same time

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 <div> and animate each one separately and at different speeds.

http://jsfiddle.net/rnrlabs/x9cu53hp/

.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);
    }
}

<div class="spinner">
<img class="scaler" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="Sample Image" width="120" height="120">
<div>

How to sync two animations using css keyframes?

I think you might be looking for the animation iteration event and the animation start event.

Instead of just using the myLoop function to call itself, try using these listeners to call it instead.

The end of your js file would look like:

var i = 0;

function myLoop() {
  var dataType = document.getElementById("typewriter").dataset.typewriter,
    w = dataType.split(",");

  if (i < w.length -1 ) {
    typewriter(w[i]);
  }

  i++;
}

var imageElems = Array.from(document.querySelectorAll('.addsp_320x50_img'));
imageElems.forEach(elem=>{
 elem.addEventListener('animationstart',myLoop);
});

Where ".addsp_320x50_img" is just whatever common selector you give to all the images.

Multiple CSS keyframe animations using transform property not working

You cannot animate same attribute ( here transform attribute ) more than once, on a same element, the last one will overwrite other,

You should put your target element into a div, and apply one transform-animation on the div and other transform-animation on the target element....

.div_class
{
    animation:animate1 1000ms linear infinite;
}

.element
{     
   animation:animate2 3000ms linear infinite;
}

JS: How to save chained animations as a variable to play, pause, etc

You can either chain two separate animations using DOM events (or even promises):

const firstPart = element.animate({
  transform: ['scale(1)', 'scale(1.5)']
}, {
  duration: 1000,
  fill: 'both'
});

firstPart.finished.then(() => {
  const secondPart = element.animate({
    transform: ['rotate(0deg)', 'rotate(180deg)']
  }, {
    duration: 1500,
    fill: 'both'
  });
  return secondPart.finished;
});

Or you can create a single animation with multiple keyframes:

element.animate([
  { offset: 0, transform: 'scale(1)' },
  { offset: .6, transform: 'scale(1.5) rotate(0deg)' }
  { offset: 1, transform: 'scale(1.5) rotate(180deg)' }
], {
  duration: 2500,
  fill: 'both',
  composite: 'add'
});

The keyframes solution also allows animating both properties at the same time if you want. However, animating two transforms indepdently is a bit complicated.

---

Related Topics