Learning CSS Transitions

Learning CSS Transitions image

Understand how to Animate a User Interface and Make it Memorable, Engaging, and Fun

Publisher: Infinite Skills

Release Date: July 2017

Duration: 1 hours 02 minutes

Watch on Safari with a 10-day trial

Start your free trial now

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

Chapter: Introduction

Welcome To The Course

01m 59s

About The Author

01m 12s

Chapter: CSS Transitions

Meet The CSS Transition

02m 25s

Creating A CSS Transition

05m 23s

Exercise: Image Slide On Hover

04m 52s

Timing Functions

04m 43s

Exercise Using The Cubic-Bezier Timing Function

04m 10s

Exercise Animating Links

09m 32s

A Deeper Look At The Transition Syntax

04m 32s

Creating Smooth And Performant Animations

04m 51s

Transitions And JavaScript

06m 12s

Exercise: Creating A Smooth Sliding Menu

08m 30s

The TransitionEnd Event

03m 22s

Chapter: Conclusion

Wrap Up And Thank You

00m 45s

  • Publication date: 01.08.2017
  • Source