CODEWITHSUNDEEP
csscss-animations
Miller John
Miller John

Reputation: 41

How to make fadeout text in css

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!

Upvotes: 1

Views: 412

Answers (2)

Angelo Lucas
Angelo Lucas

Reputation: 627

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>

Upvotes: 0

Miguelos
Miguelos

Reputation: 302

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; }}

Upvotes: 3

Related Questions