CSS Master Code Examples: Chapter 6

Transitions Demos

• Simple transition
• Simple transition with JavaScript trigger
• Negative transition-delay value
• steps timing function
• Timing functions
• Multiple or compound transitions
• transitionend event handling

Animations Demos

If you have a physical condition that may be triggered by spinning, pulsing, or flickering animations, you may wish to avoid these demos.

• Simple animation
• Animation direction
• @keyframes using percentages
• animation-fill-mode property
• animation-play-state property
• Animation events