I wrote this small CSS animation to rotate an element 30 degrees. It works well, except when the animation finishes, it goes back to 0 degrees instead of staying at 30.
My intention is to show the element rotating, then having it stay there, not go back to start. How can I do this? Here is my code:
div.pointer {
animation: pointer 3s;
}
@keyframes pointer {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-30deg);
}
}
Thank you in advance for any help.