by Kirupa Chinnathambi | Publisher: Infinite Skills | Release Date: July 2017 | ISBN: 9781491994771

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.

1. Introduction
   • Welcome To The Course 00:01:59
   • About The Author 00:01:12
2. 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
3. Conclusion
   • Wrap Up And Thank You 00:00:46