How to make fadeout text in css

Question

I made fadein for text in css. Code is

.text {
    -webkit-box-shadow: 0px 0px 5px #333;
    -moz-box-shadow: 0px 0px 5px #333;
    -ms-box-shadow: 0px 0px 5px #333;
    -o-box-shadow: 0px 0px 5px #333;
    box-shadow: 0px 0px 5px #333;
    opacity:0;
    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    -o-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-delay:1s;
    -moz-animation-delay:1s;
    -o-animation-delay:1s;
    animation-delay:1s;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

And this code works nice. But i want when text appear stand for example 2 seconds and than fadeout same way like fadein (1s, 2s fadeout doesn't matter). I try a lot of stuff but i couldn't make it work.

Can someone assist please. Thanks in advance!

Do you mean this? http://stackoverflow.com/questions/16344354/how-to-make-blinking-flashing-text-with-css3/16344389#16344389 — Mr. Alien, Feb 04 '14 at 12:09

Miguelos · Answer 1 · 2014-02-04T13:08:00.797

You can redefine the keyframe and change percentage values to adjust showing time.

Here is an example: http://jsfiddle.net/2H9CU/.

.text {
    -webkit-box-shadow: 0px 0px 5px #333;
    -moz-box-shadow: 0px 0px 5px #333;
    -ms-box-shadow: 0px 0px 5px #333;
    -o-box-shadow: 0px 0px 5px #333;
    box-shadow: 0px 0px 5px #333;
    opacity:0;
    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    -o-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-duration:3s;
    -moz-animation-duration:3s;
    -o-animation-duration:3s;
    animation-duration:3s;
    -webkit-animation-delay:1s;
    -moz-animation-delay:1s;
    -o-animation-delay:1s;
    animation-delay:1s;
}

@-webkit-keyframes fadeIn { 0% { opacity: 0.0; } 25% { opacity: 1.0; } 75% { opacity: 1.0; } 0% { opacity: 0; }}
@-moz-keyframes fadeIn { 0% { opacity: 0.0; } 25% { opacity: 1.0; } 75% { opacity: 1.0; } 0% { opacity: 0; }}
@-o-keyframes fadeIn { 0% { opacity: 0.0; } 25% { opacity: 1.0; } 75% { opacity: 1.0; }     0% { opacity: 0; }}
@keyframes fadeIn { 0% { opacity: 0.0; } 25% { opacity: 1.0; } 75% { opacity: 1.0; } 0% { opacity: 0; }}

Hi, thanks a lot for reply! I just add code that you provide. It works like i wanted. But i am using this text in slider. So when i use just my code with FadeIn when last slider is over and go again of first my text is showing nice. But with this code when my last slider is over and go on first text is not showing any more. Is it possible to fix this. Should i add some kind a repeat time or something. Thanks a lot again for code, but is this possible to be fixes? — Miller John, Feb 05 '14 at 13:15
No problem. You can use javascript for that. Restart the animation each time a slide is being loaded. Removing ".text" class and reading it again with delay will work. [Here](http://css-tricks.com/restart-css-animation/) is an example of how to do it. — Miguelos, Feb 05 '14 at 15:22

score 0 · Answer 2 · answered Oct 01 '15 at 18:20

0

It would be like this?

.text {
  text-shadow: 0px 0px 5px #333;
  opacity: 1;
  transition: 1s;
}
.text:hover {
  transition: 2s;
  opacity: 0;
}

<h1 class="text">Hello!</h1>

answered Oct 01 '15 at 18:20

Angelo Lucas

517
6
13

How to make fadeout text in css

2 Answers2