1. Hover Transition
Hover over the box to change its color, border, and size. Each change takes one second. Move away to reverse the transition.
Hover over me
2. Continuous Timed Animation
This box starts moving when the page loads. It moves from left to right over three seconds, then returns. The animation repeats continuously.
Moving
3. Hover Timed Animation
Hover over this area to trigger a two-second keyframe animation. The box rotates, grows, and changes color, then returns to its starting appearance. Move away and hover again to replay it.
Hover here
4. Gradient Background
This background uses a linear gradient that blends blue, purple, and pink from left to right.
CSS3 Linear Gradient