Jump to content

Keyframe animation keeps reversing

Recommended Posts

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
  • Replies 0
  • Views 84
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.