Translating and scaling animation
@keyframes my-animation {
0% {
transform: translate(0, 40%) scale(0);
}
10% {
transform: scale(1.1);
}
20% {
transform: scale(1);
}
100% {
transform: translateY(0%);
}
}
I am trying to make my element pop and then move along the Y axis, but the above doesn't work.
Where am I going wrong?
source to share
The Transform property is overridden during animation. So while a keyframe at 0% says a translation of 40% on the Y-axis, a second frame at 10% negates it. There is movement between 0% and 10%, but this is almost invisible because the element is just emerging.
You need to save translate(0, 40%)
until the point where the element is supposed to remain translated 40% on the Y-axis. In the snippet below, I kept it in the translated state for the 20%
duration of the animation and then between 20%
and 100%
it returns to its 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>
source to share