Video description
A link that underlines itself when you hover over it. A menu that flies in when you tap on a button. A word that gets bigger when you click it. These are just a few of the animation effects today's web developers employ to make a user interface (UI) more memorable, engaging, and fun. Designed for learners with a basic familiarity with CSS, HTML, and JavaScript, this course teaches you how to use CSS transitions, the tool that makes these types of animations possible.
- Understand the different ways to animate CSS property changes
- Learn how to control property changes caused by user interactions or by changes in code
- Explore cubic-bezier timing functions and transition syntax
- Understand the interplay between transitions and JavaScript
- Gain experience creating UI animations like smooth sliding menus and more
Kirupa Chinnathambi has spent most of his life trying to teach others to love web development as much as he does. When he isn't writing on kirupa.com or talking about web development, he spends his waking hours helping make the web more awesome as a program manager with the web platform team at Microsoft. Kirupa holds a Bachelor's degree in computer science from MIT.
Table of Contents
Introduction
Welcome To The Course
00:01:59
About The Author
00:01:12
CSS Transitions
Meet The CSS Transition
00:02:25
Creating A CSS Transition
00:05:24
Exercise: Image Slide On Hover
00:04:52
Timing Functions
00:04:44
Exercise Using The Cubic-Bezier Timing Function
00:04:11
Exercise Animating Links
00:09:33
A Deeper Look At The Transition Syntax
00:04:32
Creating Smooth And Performant Animations
00:04:51
Transitions And JavaScript
00:06:12
Exercise: Creating A Smooth Sliding Menu
00:08:30
The TransitionEnd Event
00:03:22
Conclusion
Wrap Up And Thank You
00:00:46