You'll begin the course by learning about Desmond's creative journey that led him into the world of motion design, including his experience collaborating with the NBA, Turner Classic Movies, Adobe, and Cartoon Network.
The transition-property accepts one or more CSS property names in a comma-separated list.Optionally, you may use transition-property: all to indicate that every property should transition.transition-duration #The transition-duration property is used to define the length of time that a transition will take to complete.transition-duration accepts time units, either in seconds (s) or milliseconds (ms) and defaults to 0s.transition-timing-function #Use the transition-timing-function property to vary the speed of a CSS transition over the course of the transition-duration.By default, CSS will transition your elements at a constant speed (transition-timing-function: linear). Linear transitions can end up looking somewhat artificial, though: in real life, objects have weight and can't stop and start instantly. Easing into or out of a transition can make your transitions more lively and natural.Our module on CSS Animation has a good overview of timing functions.You can use DevTools to experiment with different timing functions in real-time.
CSS transitions are not for everyone. For some people, transitions and animations can cause motion sickness or discomfort. Thankfully, CSS has a media feature called prefers-reduced-motion that detects if a user has indicated a preference for less motion from their device.
Check out our blog post prefers-reduced-motion: Sometimes less movement is more for more information on this media feature.Performance considerations #When working with CSS transitions, you may encounter performance issues if you add transitions for certain CSS properties. For example, when properties such as width or height change, they push content around on the rest of the page. This forces CSS to calculate new positions for every affected element for each frame of the transition. When possible, we recommend using properties like transform and opacity instead.Check out our guide on high-performance CSS animations for a deep-dive on this topic.
Velocity.js is a powerful animation library that combines the best of jQuery and CSS transitions, enabling you to do a ton of things such as easing, color animations, transforms, SVG support, and much more. It has an incredibly fast animation engine and offers a host of features and functionality. 153554b96e