Fade in animation sample

by Jordan Dayton

HTML

<div id="element" class="pretty">
  Your answer has been recorded! Please click the "Next" button below, to continue.
</div>

CSS

#element {
  -webkit-animation: 3s ease 0s normal forwards 1 fadein;
  animation: 3s ease 0s normal forwards 1 fadein;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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


/* Here are some additional styles which are not required */

.pretty {
  background: yellow;
  font-family: helvetica, arial, sans-serif;
  padding: 20px 10px;
  text-align: center;
  width: 100%;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 16px;
}