How to make a non fading animation in CSS

Question

I'm trying to make a blinking animation for a piece of text that goes from black to white instantly with no fading. Right now it fades to to white then instantly snaps to white

my code:

.flash {

    animation-name:blinkAni;
    animation-duration:1s;
    animation-iteration-count:infinite;
}

@keyframes blinkAni {
        0% {color:black}
        100% {color:white}
}

It is because you have the duration set as 1s. try using a delay so it waits then changes instantly. — norcal johnny, Aug 08 '18 at 02:22

score 0 · Answer 1 · answered Aug 08 '18 at 02:21

Use the animation-timing-function: steps(1) property and set your white state at 50%:

.flash {
    background: #CCC;
    animation-name:blinkAni;
    animation-duration:1s;
    animation-iteration-count:infinite;
    animation-timing-function: steps(1);
}

@keyframes blinkAni {
   0% {color:black}
   50% {color:white}
}

<p class="flash">Hello</p>

How to make a non fading animation in CSS

1 Answers1