Animation How to - Create CSS3 Blink animation

Question

We would like to know how to create CSS3 Blink animation.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
@keyframes blinking {<!--   w w  w . j  a  v a2  s .  com-->
    0% { opacity: 1; }
    20% { opacity: 1; }
    50% { opacity: 0; }
    80% { opacity: 1; }
    100% { opacity: 1; }
}
@-webkit-keyframes blinking {
    0% { opacity: 1; }
    20% { opacity: 1; }
    50% { opacity: 0; }
    80% { opacity: 1; }
    100% { opacity: 1; }
}
.blink {
    animation: blinking 3s ease-in-out infinite;
    -webkit-animation: blinking 3s ease-in-out infinite;
}
@keyframes blink2 {
  0% {
    visibility: hidden;
    animation-timing-function: step-end;
  }
  25%, 100% {
    visibility: visible;
  }
}
@-webkit-keyframes blink2 {
  0% {
    visibility: hidden;
    -webkit-animation-timing-function: step-end;
  }
  25%, 100% {
    visibility: visible;
  }
}
.blink2 {
  animation: blink2 2s infinite;
  -webkit-animation: blink2 2s infinite;
}
  </style>
</head>
<body>
  <p class="blink">java2s.com</p>
  <p class="blink2">java2s.com</p>
</body>
</html>

The code above is rendered as follows: