CODEWITHSUNDEEP
csscss-animations
Ben Holness
Ben Holness

Reputation: 2707

How can I make a css animation that doesn't get "stuck" at each end

The code that I currently have is:

.pulsing {
    -webkit-animation: color_change 1s infinite alternate;
    color: rgba(161, 8, 40, 0.9);
}

@-webkit-keyframes color_change {
    0% { color: rgba(161, 8, 40, 0.9); }
    100% { color: red; }

}

Demo here

The problem is that it gets to 100% and stays there for (presumably) 2 seconds. I would like it to hit 100% and then immediately reverse, or maybe stay at the 100% color for 0.25 seconds or something, but I'm not sure how to do this.

Upvotes: 1

Views: 322

Answers (3)

Rickard Elimää
Rickard Elimää

Reputation: 7591

This may seem like a weird bug, and I will go one bit further and tell you how I solved this.

I use Chrome most of the times, but when it comes to CSS then Firefox is unbeatable. I selected your .pulsing element and selected the Animation tab. Here you can see clearly what's going on.

enter image description here

Look at the purple field. You have an ease-in-ease-out transition timing function as a default and, because you alternate, the yellow will just be briefly seen because it will be in both the ease-in and the ease-out animation.

Just add linear to the animation to make that purple area straight. If you want to make it stay longer on yellow (which I used in the example below), you need to create a custom bezier transition timing function. Perhaps so that the orange part of the animation (see image) is around 50%. Otherwise it will still look like the animation is stopping on red.

.pulsing {
    -webkit-animation: color_change 1s infinite alternate linear;
    color: yellow;
}

@-webkit-keyframes color_change {
    0% { color: yellow; }
    100% { color: red; }

}
<div class="pulsing">
 TEXT
</div>

Upvotes: 4

TalOrlanczyk
TalOrlanczyk

Reputation: 1213

the thing is it's not really stuck there it's just got to the 100% and then he stays there for the rest of the time. think about you put 1s and it got to the 100% in 200ms so it got 800ms to finish the cycle

.pulsing {
    -webkit-animation: color_change 3s infinite alternate;
    color: rgba(161, 8, 40, 0.9);
}

@-webkit-keyframes color_change {
    0% { color: green; }
    100% { color: yellow; }
}

in this code, I use the green and the yellow and when it got to the 3s it reverses itself, it got to the yellow fast so it wait to the 3s to pass to start the reverse.

UPDATE you have 2 option as I see it:

  1. make the animation shorter (but it's also make the color transition to accrue faster).

  2. do like @Maverick Fabroa did and set the color as the 50% and the 100% be the first color like this:

    @-webkit-keyframes color_change { 0% { color: green; } 50% { color: yellow; } 100% { color: green; } }

Upvotes: 0

Maverick Fabroa
Maverick Fabroa

Reputation: 1173

Try this:

.pulsing {
    -webkit-animation: 1s color_change infinite;
}

@-webkit-keyframes color_change {
    0% {
        color: rgba(161, 8, 40, 0.9);
    }

    50% {
        color: red;
    }

    100% {
        color: rgba(161, 8, 40, 0.9);
    }
}

Upvotes: 0

Related Questions