CSS Background Animation

This module provides a feature to add motion shapes as background to any defined section in the page. User can define the shapes with below mentioned options
Selector - ID.
GIF demo: Click Here.

No External library required.

Following configuration are available for animation settings:

1. Number of shapes to add
2. Size of the shape (small, medium and large )
3. Color of the shape

The available shapes for animation:

1. Bubbles (or rings)
2. Circles
3. Squares

The available effects for animation:

1. Move horizontally
2. Move vertically
3. Grow
4. Glow

Steps to configure:
After enabling the module navigate to '/admin/config/user-interface/css-background-animation' and fill the data for:

1. Selector - Enter an ID. Eg: '#myselector'
2. Animation Shape - Select an Animation Shape
3. Color - Select a color.
4. Number of small items - Enter number
5. Number of medium items - Enter number
6. Number of large items - Enter number
7. Transition Effect - Select an effect
8. Create a content and add id '#myselector'
9. Enjoy the effect