Cssnewbie.com Website Review

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. Let’s start off by creating the HTML markup. Define three image tags decorated with CSS clas* called “flash”. For the purposes of this 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 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 We already applied the “flash” CSS clas* to all the images. So, on hover event on the images, call the @keyframe animation. Like: Here, the duration to complete the animation is set to 1 second. You can check out a working demo here make it more fancy and fast via changing the opacity at different percentages. Such as: @-webkit-keyframes flash {  0%, 50%, 100% { opacity: 1; }  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 To conclude, CSS3’s @keyframe rule helps to create different styles of animation as it allows to apply different sets of CSS styles at