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?

What is `&box`? Looks like a typo. `&.box` or `.box` perhaps? — Aaron Sarnat, Aug 01 '21 at 08:28

score 2 · Accepted Answer · answered Aug 01 '21 at 07:51

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.

+1 for figuring out you needed to end up where you started to avoid the skip. :) To answer your second question, you can set `transform-origin` once globally. See my answer below, as I also had a few more suggested edits with a working example. — Aaron Sarnat, Aug 01 '21 at 08:53
Hey, thanks for your amazing explanation! It was really helpful — Shivam Sahil, Aug 01 '21 at 10:23

Aaron Sarnat · Answer 2 · 2021-08-01T08:59:02.970

Here's a simplified version of your latest animation code (with a Codepen to see it in action):

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

.logo {
    transform-origin: bottom;

    &:hover {
        animation: rotateFeather 1s linear infinite;
    }
}

Some points about the above tweaks:

You don't need transform-origin at every keyframe. You can set it globally.
You can roll all of your animation properties into a single shorthand rule.
You can skip keyframes that are mathematically interpolating where the animation would be going anyway (notice I omitted 40% and 60% above and it looks the same).
You don't need any transition rules on elements that you are animating with keyframes. Unless you're using it for something else, but you want to be careful to avoid attempting to animate the same property on the same element with both animation and transition simultaneously, as it will break the animation in question.

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

2 Answers2