The pure css3 circle spreads the animation effect from the center to the surrounding area, and the css3 circle spreads the animation

The pure css3 circle spreads the animation effect from the center to the surrounding area, and the css3 circle spreads the animation

View results:
Http://hovertree.com/texiao/css3/37/

Let's take a simple example, for example:

@ Keyframes hovertreemove
{
From {top: 30px ;}
To {top: 130px ;}
}

Effect:
Http://hovertree.com/texiao/css3/37/1.htm

You can use the @ keyframes rule to create an animation.

The principle of creating an animation is to gradually change one set of CSS styles to another.
You can change the CSS style multiple times during the animation process.
Specify the time when a change occurs by percentage, or use the keywords "from" and "to", which is equivalent to 0% and 100%.
0% is the start time of the animation, and 100% is the end time of the animation.
For optimal browser support, you should always define the 0% and 100% selectors.

The following is the code for up and down motion:

<! DOCTYPE html> 
The following is the circular diffusion code:
<! DOCTYPE html>