Oscilatory Animation CSS: How to avoid abrupt transition from 100% to 0%?

Question

I am trying to make an Oscillatory animation using css as shown below:

Here's how I have created my animation:

@keyframes rotateFeather {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-180deg);
    }
    50% {
        transform: rotate(-90deg);
    }
    75% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(180deg);
    }
}

Here is my class: (Using sccs)

.logo {
    height: 5rem;
    transition: all 0.3s ease;

    &box {
        position: absolute;
        top: 4rem;
        left: 4rem;
    }

    &:hover {
        animation-name: rotateFeather;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
}

Here I am facing this problem: When it reaches 180deg at 100% it abruptly resets to 0 which I want to make smooth.

How is it possible to do the same?

Answer 1

To ensure smooth transition, We need to make sure that transformation at 0 and 100% must match with the original state:

@keyframes rotateFeather {
    0% {
        transform: rotate(0deg); //-30
        transform-origin: bottom;
    }
    20% {
        transform: rotate(-30deg); //-60
        transform-origin: bottom;
    }
    40% {
        transform: rotate(0deg); //-30
        transform-origin: bottom;
    }
    60% {
        transform: rotate(30deg); // 0
        transform-origin: bottom;
    }
    80% {
        transform: rotate(60deg); //30
        transform-origin: bottom;
    }
    100% {
        transform: rotate(0deg); //30
        transform-origin: bottom;
    }
}

This helped me to solve my issue. I am not sure, if I need to add transform-origin in every stage, if someone can elaborate better on that, that would be helpful.