Animation How to - Create CSS3 Pulse Effect Animation

Question

We would like to know how to create CSS3 Pulse Effect Animation.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
@keyframes pulse { <!--from  w  w  w. j  a va 2  s .  co  m-->
   0% {transform: rotate(0deg);}
   50%{transform:rotate(7deg);}
   100%{transform:rotate(-14deg);}
}

@-webkit-keyframes pulse { 
   0% {-webkit-transform: rotate(0deg);}
   50%{-webkit-transform:rotate(14deg);}
   100%{-webkit-transform:rotate(-14deg);}
}
.pulse {
  animation-name: pulse;
  animation-delay: 1s;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  animation-duration: 200ms;
  animation-iteration-count: infinite;
  animation-play-state: running;
  -webkit-animation-name: pulse;
  -webkit-animation-delay: 1s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
  -webkit-animation-duration: 200ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-play-state: running;
}

.pulse:hover {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
</style>
</head>
<body>
  <div style="display: inline-block; background-color: #EEE;"
    class="pulse">java2s.com</div>
</body>
</html>

The code above is rendered as follows: