Live animation preview. Adjust controls on the right.
@keyframes myAnimation {
from {
transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
opacity: 1;
}
to {
transform: translateX(0px) translateY(-40px) rotate(360deg) scale(1.2);
opacity: 1;
}
}
.animated-element {
animation: myAnimation 1.5s ease-in-out 0s 1 normal none;
}From → To transform states
From (0%)
To (100%)