JorenS Posted April 28, 2023 Share Posted April 28, 2023 Trying to animate a <g> path inside an SVG, it rotates around itself but after the animation has been played, it reverses back to its original state. I've searched for a bit and found a few answers but nothing seems to be working.. .c-letterA { background-color: hotpink; position: relative; z-index: 10; animation-name: letterA; animation-duration: 7s; transform-box: fill-box; animation-iteration-count: infinite; animation-fill-mode: forwards; transform-origin: 50% 50%; animation-delay: 0s; animation-direction: forwards; animation-timing-function: linear; } @keyframes letterA { 0% { transform: rotate(90deg); } 5% { transform: rotate(180deg); } 25% { transform: rotate(180deg); } 30% { transform: rotate(270deg); } 50% { transform: rotate(270deg); } 55% { transform: rotate(0deg); } 75% { transform: rotate(0deg); } 80% { transform: rotate(89deg); } 100% { transform: rotate(89deg); } } Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment