Multiple CSS Keyframe Animations Using Transform Property Not Working

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

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.

css keyframes animation with transform not working on SVG

You can achieve this if you set the animation for the position on the parent SVG, and the animation for the color on the text element.

See https://jsfiddle.net/cgbqq0f6/

EDIT:

After some experimentation, it looks like you can't use css transform animations on path or text elements. You can, however, apply these to a wrapper element (such as a generic g tag, or a specific one if tied to an ID or class):

@-webkit-keyframes pulse {

  0% {

    -webkit-transform: translate(0, 0);

            transform: translate(0, 0);

  }

  25% {

    -webkit-transform: translate(0, 0);

            transform: translate(0, 0);

  }

  50% {

    -webkit-transform: translate(0, -20px);

            transform: translate(0, -20px);

  }

  75% {

    -webkit-transform: translate(0, 0);

            transform: translate(0, 0);

  }

  100% {

    -webkit-transform: translate(0, 0);

            transform: translate(0, 0);

  }

}

@keyframes pulse {

  0% {

    -webkit-transform: translate(0, 0);

            transform: translate(0, 0);

  }

  25% {

    -webkit-transform: translate(0, 0);

            transform: translate(0, 0);

  }

  50% {

    -webkit-transform: translate(0, -20px);

            transform: translate(0, -20px);

  }

  75% {

    -webkit-transform: translate(0, 0);

            transform: translate(0, 0);

  }

  100% {

    -webkit-transform: translate(0, 0);

            transform: translate(0, 0);

  }

}

@-webkit-keyframes colorText {

  0% {

    fill: #000000;

  }

  25% {

    fill: #000000;

  }

  50% {

    fill: #ff4a4a;

  }

  75% {

    fill: #000000;

  }

  100% {

    fill: #000000;

  }

}

@keyframes colorText {

  0% {

    fill: #000000;

  }

  25% {

    fill: #000000;

  }

  50% {

    fill: #ff4a4a;

  }

  75% {

    fill: #000000;

  }

  100% {

    fill: #000000;

  }

}

.animatable {

    position: relative;

    fill: #000;

     -webkit-animation: pulse 3s infinite ;

          animation: pulse 3s infinite ;

}

g.animatable {

    position: relative;

    fill: #000;

     -webkit-animation: pulse 2s infinite ;

          animation: pulse 2s infinite ;

}

.animatable text {

    

  -webkit-animation: colorText 3s infinite ;

          animation: colorText 3s infinite ;

}

<svg height="60" width="200" id="voer">

  <text x="0" y="15" fill="red" class="animatable">Voer</text>

    <g class="animatable"><text x="0" y="30" fill="red" class="two">Another</text></g>

    <g class="animatable">

   <path d="M150 0 L75 200 L225 200 Z" />

  </g>

</svg>

css animation-name property does not allow transform property

As vals stated earlier..an animation overrides the static properties. For what you're trying to achieve, you're best bet is to wrap your swipe-button class with a new fadeInLeftBig div:

<div class="fadeInLeftBig animated">
<div class="swipe-button b-left animated"></div>
</div>

Then use keyframe animations on both divs. This separates your animations so that your "fade in" doesn't start over once you unhover your swipe-button. Here's a working fiddle. https://jsfiddle.net/kj4v36ye/2/ Let me know if you're trying to achieve something else and I can easily modify it.

---

Related Topics