Animation How to - Fade in text in animation

Question

We would like to know how to fade in text in animation.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
h1 {<!--   w w w .  j a v  a2 s  .  c  om-->
  color: green;
  font-size: 25px
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
}

@-webkit-keyframes fadeOutDownMed { 
   0% {
      opacity: 1;
    -webkit-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0);
   }
   100%{
      opacity:0;
      -webkit-transform:translateY(150px) translateX(150 px);
      transform:translateY(150 px) translateX(150 px);
   }
}
@keyframes fadeOutDownMed { 
  0% {
  opacity: 1;
  -webkit-transform: translateY(0) translateX(0);
  -ms-transform: translateY(0) translateX(0);
  transform: translateY(0) translateX(0);
  }
  100%{
    opacity:0;
    -webkit-transform:translateY(150 px) translateX(150 px);
    -ms-transform:translateY (150 px) translateX(150 px);
    transform:translateY(150 px) translateX(150px);
  }
}
.fadeOutDownMed {
  -webkit-animation-name: fadeOutDownMed;
  animation-name: fadeOutDownMed;
}
</style>
</head>
<body>
  <h1 class="animated fadeOutDownMed">Title</h1>
</body>
</html>

The code above is rendered as follows: