I want to add a unique touch to my text by sliding it in and creating a bouncing effect as if it's hitting a wall before settling into place.
However, the issue I'm encountering is that whenever I incorporate rotation, the text rotates while still in motion instead of rotating once it has reached a certain point.
To clarify - I am looking for the div to start rotating once it hits -30px, then return to its original position without rotation, change direction, and finally settle into place.
Below is the current CSS code I am using...
@-webkit-keyframes slide {
from {right: 1500px; -webkit-transform: rotate(0deg)}
50% {right: -30px; -webkit-transform:rotate(5deg)}
75% { right: 20px}
to {right: 0px}
}
div {
-webkit-animation: slide 5s;
}