⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Flash and Pulse Effects keyframes Animation Tutorial

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
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>
▲