Using ease with css animation

Question

.about5 {
    animation: 
    fade 4s ease forwards; animation-delay: 5s;} 



     @keyframes fade {
     0% { opacity: 0; }
     50% { opacity: 1; }
    100% { opacity: 0;}}

<div class="about5">About</div>

The animation delays for 5s correctly, but before fading, flashes once. Why? Is this because I'm using ease and should I use linear?

Page on desktop here.

`.about5` does not have it's opacity set to `0` initially, so it's essentially `1` at the start - then, as soon as the animation starts, it's set to `0` and then fades in. Adding `.about5 { opacity: 0; ... }` will fix your issue. — Patrick Hübl-Neschkudla, Nov 05 '19 at 13:45

score 0 · Accepted Answer · answered Nov 05 '19 at 14:17

If you only want your content to fade-out, you could set the opacity to the 0% keyframe at 1 like this:

...
@keyframes fade {
 0% { opacity: 1; }
 50% { opacity: 1; }
100% { opacity: 0;}}

For more information about ease & linear, this post could explain it way better than I could :)

Using ease with css animation

1 Answers1