Practice your CSS Transition and Animation skill

Here, you will become familiar with a variety of CSS3 transitions and will have the opportunity to practice them in order to improve your skills and understanding of how to use them in your web development projects.

Single-property Transition

Width Transition

This transition stretch the width from 100px to 300px when hovered

Size Transition

This transition stretch the height from 70px to 50px and width from 100px to 100px

Rotation Transition

This transition rotates the box 0 - 360deg

Scale Transition

This transition scale the box from 100% - 120%

Border Transition

Add 10px border when hover

Multi-property transition

Scales and rotate

This transition Scale by 150% at the same time it rotate 0 - 360deg

Pointing transition

This transition Scale by 150% at the same time it rotate 0 - 360deg

pointing hand

Animation

Bounce

This animation bounce infinite

ball

Infinite rotate

This animation rotates infinite

ball

Pulse

This animation simulates a pulsating or throbbing movement

heart

Wobble

This animation simulates an object or element shaking or vibrating

ball