Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

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>
thumb

CSS Videos

Animation Rigging

Folding Content Nav Menu CSS3 Animation JavaScript TutorialBackground Position keyframes Animation CSS TutorialParallax Effect Animation Multiple Background CSS TutorialPure CSS Animated Menu Button Transitionskeyframes Animation Tutorial Floating ElementsAnimated Repeating Tile Background keyframes TutorialFlip 3D Boxes and Cards Animation CSS TutorialFlash and Pulse Effects keyframes Animation TutorialImage Zoom Effect Animation CSS3 HTML Tutorial