I need to create an animation that makes a transform function value "jump" in an animation.
Within my @keyframes rule are three percentages with the transform property in each one. I specifically want only the scale to transition from 0.5 to 1 between the first and third percentages (just like the color change) instead of transitioning from the first to the second percentage.
The issue arises because the transform implicitly applies a scale(1) at the second percentage.
Is there a way to achieve this without having to set up multiple animations?
.block {
background-color: #333;
height: 150px;
width: 150px;
margin: 100px;
animation: rolling 3s forwards infinite;
}
@keyframes rolling {
33% {
background: green;
transform: scale(0.5);
} 66% {
transform: translate(20%);
} 100% {
background: red;
transform: scale(1) translate(100%);
}
}<div class="block"></div>