Translate and scale animation issue - css

Question

#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?

Answer 1

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>