Stretch, Slide, and Tilt

CSS animation practice for INFOST 320

1. Stretch (transition)

Hover over the orange box to make it wider. The change takes 1.5 seconds.

Stretch

2. Slide (continuous animation)

The blue square moves back and forth automatically. Each direction takes 4 seconds.

Slide

3. Tilt (hover animation)

Hover over the purple box to rock it from side to side. Each cycle takes 2 seconds. Move away to pause.

Tilt

You can also use Tab to focus the two hover examples.