MDN Using CSS Transition

See Also

Competencies

• Interface Prototyping HTML & CSS
• Interaction Design Responsive Layout
• Interaction Design Interaction Animations

Lessons

• CSS Animations
• Coding review
• Layouts with CSS
• Motion for Interaction

Resources

References

• MDN Keyframe
• CSS Transition Property
• Keyframe syntax
• CSS Syntax
• MDN’s documentation for CSS
• CSS: Cascading Style Sheets
• A Complete Guide to Flexbox
• A Complete Guide to Grid
• Learn CSS Grid
• CSS Reference
• Media Queries for Standard Devices

Tutorials

• An Interactive Guide to CSS Transitions
• CSS Diner
• Flexbox Froggy
• Grid Garden
• Grid by Example
• Learn to Code HTML & CSS
• The Experimental Layout Lab

Tools

• Google Fonts

Articles

• How Functional Animation Helps Improve User Experience