- Source Code & Resources PRO
- Lesson 1: Introduction PUBLIC
- Lesson 2: The Difference Between UI and UX PUBLIC
- Lesson 3: General Concepts PUBLIC
- Lesson 4: A Brief Introduction to Accessibility PRO
- Lesson 5: Navigation Concepts PRO
- Lesson 6: Actual Performance & Perceived Performance PRO
- Lesson 7: Controlling the Layout PRO
- Lesson 8: Utilising CSS Grid & Flexbox PRO
- Lesson 9: Creating a Layout That Adapts to Desktop PRO
- Lesson 10: CSS Variables and Syntactically Awesome Style Sheets (SASS) PRO
- Lesson 11: Improving Form UX PRO
- Lesson 12: Animating with CSS PRO
- Lesson 13: Animating with Angular PRO
- Lesson 14: Animating with Ionic and the Web Animations API PRO
- Lesson 16: Scalable Vector Graphics (SVG) PRO
- Lesson 17: Conclusion PRO
transition CSS property.
This approach is generally useful for creating more complex effects in response to user input, for example creating a parallax effect when the content area is scrolled:
With the previous approaches, we defined a specific animation, and then played that animation at a particular point in time. This approach allows us to add more logic to our animations as they are playing.
We've briefly mentioned the
transition property in CSS and you will likely have used it in the past. This property allows you to animate the change of CSS properties, like going from full opacity to no opacity, or from one position to another.