CODEWITHSUNDEEP
csscss-animations
BLAZORLOVER
BLAZORLOVER

Reputation: 2011

CSS Keyframes Transition pauses when using scale

I have the following code:

@keyframes sonar-wave {
    0% {
        transform: scale(1.00);
        opacity: 0;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

When this triggers, I see a "pause" before the scale continues. I would like a smooth scaling animation. Fiddle here:

https://jsfiddle.net/Lztxfho9/

What am I doing wrong?

Upvotes: 0

Views: 70

Answers (1)

user7148391
user7148391

Reputation:

That's because you didn't specify a timing function, So the browser will default to ease

change it to 

animation: sonar-wave 2s linear forwards;

Upvotes: 2

Related Questions