Creating animation with CSS3 is simple to implement and requires fewer lines of code. It helps you to create simple and even complex animations. The best part about CSS3 animations is the smoothness and running without any glitches if implemented properly. Images are an integral part of any web application and with the help of CSS, eye-catching animations can be implemented on the images. This short post talks about creating a flash like effect on an image on hover event using CSS3.
HTML Markup
Let’s start off by creating the HTML markup. Define three image tags decorated with CSS class called “flash”. For the purposes of this demo, the images used are taken from FreeImages.
<h1> Hover for flash effect </h1> <img class="flash" src="http://images.freeimages.com/images/large-previews/389/mitze-1380778.jpg" /> <br/> <img class="flash" src="http://images.freeimages.com/images/large-previews/72c/fox-1522156.jpg" /> <br/> <img class="flash" src="http://images.freeimages.com/images/large-previews/c23/hello-3-1564990.jpg" />
CSS
Creating a flash effect is very simple, and all that is required is to manipulate the opacity of the element at different stages to form a flash effect. To manipulate the opacity at different stages we can leverage CSS3’s @keyframe rule. The @keyframes rule specifies the animation code and the animation is created by gradually changing from one set of CSS styles to another. We can define the start and end of the animation in percentages. 0% is the beginning of the animation, 100% is when the animation is complete. So you may define any number between 0% and 100% to apply different CSS styles.
First, define the @keyframe rule named “flash”. Inside it, change the opacity to 0.3 at the beginning of the animation (which is 0%) and then reset it to 1 at 100%. Like:
@-webkit-keyframes flash {
0% { opacity: .3; }
100% { opacity: 1; }
}
@keyframes flash {
0% { opacity: .3; }
100% { opacity: 1; }
}
We already applied the “flash” CSS class to all the images. So, on hover event on the images, call the @keyframe animation. Like:
.flash:hover {
opacity: 1;
-webkit-animation: flash 1s;
animation: flash 1s;
}
Here, the duration to complete the animation is set to 1 second. You can check out a working demo here. This is a very simple implementation of creating a flash-like effect. You can make it more fancy and fast via changing the opacity at different percentages. Such as:
@-webkit-keyframes flash {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}
@keyframes flash {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}
As you can see, opacity value is changed from 0 to 1 at 5 intervals to create a more fast flashing effect. You can check out a working demo here.
Conclusion
To conclude, CSS3’s @keyframe rule helps to create different styles of animation as it allows to apply different sets of CSS styles at various intervals. In this post, we’ve just learned how to create flash-like effects on images using CSS3. You can change the animation to whatever suits your needs!