CODEWITHSUNDEEP
csscss-animationscss-transforms
panthro
panthro

Reputation: 24099

Translate and scale animation issue

@keyframes my-animation {
    0% {
        transform: translate(0, 40%) scale(0);
    }
    10% {
        transform: scale(1.1);
    }
    20% {
        transform: scale(1);
   }
   100% {
        transform: translateY(0%);
   }
}

I'm trying to make my element pop then move on the Y axis, but the above fails to work.

Where am I going wrong?

Upvotes: 1

Views: 7038

Answers (1)

Harry
Harry

Reputation: 89780

Transform property gets overridden during your animation. So even though the keyframe at 0% says translate by 40% in Y-axis, the second frame at 10% nullifies it. There is a movement between 0% and 10% but that is almost invisible because the element is just then coming into view.

You need to retain the translate(0, 40%) till the time the element needs to remain translated by 40% in the Y-axis. In the below snippet, I have retained it at the translated position till 20% of the animation duration and then from between 20% to 100% it goes back to the original position.

@keyframes my-animation {
    0% {
        transform: translate(0, 40%) scale(0);
    }
    10% {
        transform: translate(0, 40%) scale(1.1);
    }
    20% {
        transform: translate(0, 40%) scale(1);
   }
   100% {
        transform: translateY(0%);
   }
}
div{
  height: 100px;
  width: 100px;
  border: 1px solid;
  animation: my-animation 4s linear forwards;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Some</div>

Upvotes: 9

Related Questions