Creating CSS3 Animated Backgrounds From Scratch

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 animation-iteration-count: infinite to make the animation a loop.

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 animation invert(0%) and at the half of the animation set invert value to their maximum value invert(100%).

Explosion Animated filter

Here the trigger of the animation is a click event and in this case animation-duration:8s. The animation starts with an explosion of saturation and brightness. The brightness set at its maximum brightness( 200%) and saturation of twenty times of the original image saturate(20). At 25% of the animation the brightness return to original image value that is brightness(100%), the saturation also decreases at a value saturate(5). At the end of the animation, the saturation return at its original value of the image saturate(1).

Thunder Animated filter

This time take animation-duration:9s 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 brightness( 200%) and also is set an 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 brightness( 100%), opacity(1). Now just have to repeat the same filter twice using the same filters, to finish the ending have a fluid blur filter.

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.