Use CSS Filter and Keyframes to Create Awesome Effects One CSS property not commonly used is the filter property, CSS Filters are a powerful tool. Authors can use to achieve varying visual effects (sort of like Photoshop filters for the browser). The CSS filter property provides access to effects like blur or color shifting on an element’s rendering before the element display. The filters are used to adjust the rendering of an image, a background, or a border. There are a bunch of CSS filters properties it really depends on how we want to use them to create some interesting effects. It is used on images, backgrounds or in a complete web page, this is some properties of the filters: blur(px) brightness(%) contrast(%) drop-shadow() grayscale(%) hue-rotate(deg) invert(%) opacity(%) saturate(%) sepia(%) How to Use Filters To use a filter you just have to set the value, the property of the filter, and yeah, It’s done, the images now have a filter. Using More Than One Property At The Same Time Also, another awesome feature of the filter is that we can use more than one property at the same time. Setting many properties for being used: Using filter and keyframes Filters can be used with keyframes to get a whole bunch of awesome effects. This is commonly used in sponsoring advertising that is on every place on the internet. Commonly use brightness color to get the attention of the users also is used in games, etc. To give a better explanation of how to use it I’m going show how to get some animated background with filters. Sponsored Animated Filter In the sponsored advertising shown use brightness color and loop animation with a few seconds of duration.  The trigger of the animation can be a hover or click event or by the way just set the animation as property on the image or in the container. The first to set here is a very short animation-duration less than 0.5. Seconds also an to make the animation a loop. animation-iteration-count: infinite The filter used in this case is the invert filter that allows changing the color of the element to their opposite color (negative). Setting the values at the start of the and at the half of the animation set invert value to their maximum value . animation invert(0%) invert(100%) Explosion Animated filter Here the trigger of the animation is a click event and in this case . The animation starts with an explosion of saturation and brightness. The brightness set at its maximum and saturation of twenty times of the original image . At 25% of the animation the brightness return to original image value that is , the saturation also decreases at a value . At the end of the animation, the saturation return at its original value of the image . animation-duration:8s brightness( 200%) saturate(20) brightness(100%) saturate(5) saturate(1) Thunder Animated filter This time take the animation starts with two flashing lights like a clap of thunder. The way to get this effect it to set at the start of the animation the brightness at its maximum and also is set an . animation-duration:9s brightness( 200%) opacity(0.2) Close to 0 because when the opacity is close to 0 the element turn totally white. So it's used to make brightness more blinder and without losing its fluidness. Then the filters return to the original state , . Now just have to repeat the same filter twice using the same filters, to finish the ending have a fluid blur filter. brightness( 100%) opacity(1) Now you can create an animated background go and try it by your own. now just need a nice background and a few creativity. Also, you can add sound to improve your animation, and use SVG images, set more effect on different containers. There is tons of thing that you can do with filter and keyframes. if like diving straight into practicing what you have learned so far? go ahead and try to make more complex animation. If you got here thanks and Happy Coding.

BUNCH

Coding Guru of 2022

Nominated for Coding Guru of 2022

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Creating CSS3 Animated Backgrounds From Scratch

Too Long; Didn't Read

Company Mentioned

Alexoid

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Creating CSS3 Animated Backgrounds From Scratch

Too Long; Didn't Read

Company Mentioned

Alexoid

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES