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.
Creative CSS Animations Transitions And Transforms Course
Here are some common properties you can transition.Transform #Browser support chrome 36, Supported 36 firefox 16, Supported 16 edge 12, Supported 12 safari 9, Supported 9 SourceThe transform CSS property is commonly transitioned because it is a GPU-accelerated property that results in smoother animation that also consumes less battery. This property lets you arbitrarily scale, rotate, translate, or skew an element.Check out the section on transforms in our Functions module.Color #Before, during, and after interaction, color can be a great indicator of state. For example, a button might change color if it's being hovered. This color change can provide feedback to the user that the button is clickable.The color, background-color, and border-color properties are just a few places where color can be transitioned upon interaction.Color transitions do not usually need to be behind a reduced motion preference. Use your best judgment.Check out our module on color.Shadows #Shadows are often transitioned to indicate elevation change, like from user focus.Check out our module on shadows.Filters #filter is a powerful CSS property that lets you add graphic effects on the fly. Transitioning between different filter states can create some pretty impressive results.Check out our module on filters.Transition triggers #Your CSS must include a change of state and an event that triggers that state change for CSS transitions to activate. A typical example of such a trigger is the :hover pseudo-class. This pseudo-class matches when the user hovers over an element with their cursor.Below is a list of some pseudo-classes and events that can trigger state changes in your elements.:hover: matches if the cursor is over the element.:focus: matches if the element is focused.:focus-within : matches if the element or any of its descendants are focused.:target: matches when the current URL's fragment matches the element's id.:active: matches when the element is being activated (typically when the mouse is pressed over it).class change from JavaScript: when an element's CSS class changes via JavaScript, CSS will transition eligible properties that have changed.Different transitions for enter or exit #By setting different transition properties on hover/focus, it's possible to create some interesting effects.
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.
2ff7e9595c
Comments