CODEWITHSUNDEEP
htmlcss
MAZIN
MAZIN

Reputation: 35

How can I make fade out text

This is my first question on this platform. I am trying to make anki card that shows a question for a number of seconds then I need it to fade out.

this is the code that I have found.

@-webkit-keyframes fadeIn {
100%,0%{opacity:.5;}
0%,0%{opacity:1;}
}
.fade-out {
font-size:20px;
color: dodgerblue;
background:white; 
padding:10px;
opacity:0;
-webkit-animation:fadeIn ease-in 1; 
-webkit-animation-fill-mode:forwards;
-webkit-animation-duration:2s;
-webkit-animation-delay:4s;

Upvotes: 0

Views: 359

Answers (2)

BigBongo
BigBongo

Reputation: 1

You can make an animation with the @keyframes tag. For instance

@keyframes fade-out {
  100%{
    opacity: 0%;
  }
}

and then also in your CSS you have something like this:

.your-class{
  animation: fade-out 3s linear 10s 1;
  animation-fill-mode: forwards;
}

And then in your HTML you have this:

<div class="your-class">What is 1+1?</div>

The values in the CSS mean that the "fade-out" animation will be played in a 3s time and a linear animation. The 10s mean that after 10s the animation will play, so it means that the card will disappear after 10s. and the "1" means it will only play 1 time, this is optional since 1 is the default value. animation-fill-mode means that the value that's in the animation (opacity: 0%) will remain and only goes away when you refresh the page for instance. It will overtake the default value which is normally 100%;

Hoped this helped you.

Upvotes: 0

velez_dot
velez_dot

Reputation: 122

This kind of stuff is usually easy to just google, but anyways this is a solution that will work perfectly

.fader {
  animation: fadeOut ease 8s;
  -webkit-animation: fadeOut ease 8s;
  -moz-animation: fadeOut ease 8s;
  -o-animation: fadeOut ease 8s;
  -ms-animation: fadeOut ease 8s;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
<h1 class="fader">
  Hey!
</h1>

Upvotes: 1

Related Questions