I start to learn CSS animation and I think CodePen is a place where I can find best example and resources about it. Some of the pens are really inspirational, like these animated CSS Bokehs that are beautiful to use for a website background.
CSS Bokeh with Blur Effect by Anna Prenzel
This one has simple slow animation effect. It requires jQuery to run.
Change the zoom in 0.25x with zoon option at the right bottom of this Pen bellow then Rerun it to see the effect in a better way.
See the Pen CSS Bokeh with Blur Effect by Anna Prenzel (@blaustern_fotografie) on CodePen.
Animated snow bokeh (pure css) by Valeriya
The bokeh animates downward like the falling snow. It was created with pure CSS animation. The falling snow is set to fade with lower opacity after 20s to 30s.
See the Pen Animated snow bokeh (pure css) by Valeriya (@wwwebneko) on CodePen.
Bokeh effect (CSS) by Louis Hoebregts PRO
Using pure CSS, the animation effect is bouncing smooth and randomized by animation duration.
See the Pen Bokeh effect (CSS) by Louis Hoebregts (@Mamboleoo) on CodePen.
Bokeh Pattern by Owlypixel
This bokeh animation is rather stylized with how it is animated and presented. It has gradient background and multiple bokeh dots that seem to animate in different layers which also do slightly different movement from one to another. This effect works with jQuery to randomize stuffs in each bokeh dot element.
See the Pen Bokeh Pattern by Owlypixel (@owlypixel) on CodePen.
Hex Bokeh by Will Boyd PRO
In a glance, this reminds me a lot to parallax effect. But actually the animation of the shapes starts when we scroll. It’s a nifty physics-based background scroll effects with the use of Matter.js, an excellent open-source JavaScript framework, to handle the physics of animation.
Change the zoom in 0.25x with zoon option at the right bottom of this Pen bellow then Rerun it to see the effect in a better way.
See the Pen Hex Bokeh by Will Boyd (@lonekorean) on CodePen.
