Flash and Pulse Effects keyframes Animation Tutorial
Learn to rig Flash or Pulse effect animations using CSS3.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{ background:#000; color:#FFF; text-align:center; }
/* Flash class and keyframe animation */
.flashit{
-webkit-animation: flash linear 1s infinite;
animation: flash linear 1s infinite;
}
@-webkit-keyframes flash {
0% { opacity: 1; }
50% { opacity: .1; }
100% { opacity: 1; }
}
@keyframes flash {
0% { opacity: 1; }
50% { opacity: .1; }
100% { opacity: 1; }
}
/* Pulse class and keyframe animation */
.pulseit{
-webkit-animation: pulse linear .5s infinite;
animation: pulse linear .5s infinite;
}
@-webkit-keyframes pulse {
0% { width:200px; }
50% { width:240px; }
100% { width:200px; }
}
@keyframes pulse {
0% { width:200px; }
50% { width:240px; }
100% { width:200px; }
}
</style>
</head>
<body>
<h1>CSS Flash and Pulse Effects</h1>
<h1 class="flashit">Flashing Elements</h1>
<img class="pulseit" src="heart.png" alt="Heart">
</body>
</html>