From the course: CSS: Transforms and Transitions
Join today to access over 22,700 courses taught by industry experts or purchase this course individually.
Create an asymmetric transition - CSS Tutorial
From the course: CSS: Transforms and Transitions
Create an asymmetric transition
- [Instructor] In this video, we'll complete our chapter of CSS transitions by learning how to create and employ asymmetric transitions. So far, all of our transitions have been symmetric, so that the transition goes forward to the end state, and then reverses itself, as the object returns to its initial state. But in some applications, we might want to have one transition going forward, and a totally different transition coming back. To create this effect, we need to create a transition style for both the initial and end states. This demo provides options for specifying transition styles in both directions. With no transition styles, we simply jump from the initial state, and then back to the end state. And if I apply a transition style simply to the initial state, I then get a symmetric transition that looks the same forwards and backwards, except being mirror-imaged. So no surprise there. But now let's see what happens if I apply the same transition only to the end state. In that…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.