Animation

Material in motion is responsive and natural. Use these easing curves and duration patterns to create smooth and consistent motion.

Design & API Documentation

Installation

Usage

Sass Variables

We provide timing functions which you can use with the animation or transition CSS properties

VariableDescription
$deceleration-curve-timing-functionTiming function to decelerate
$standard-curve-timing-functionTiming function to quickly accelerate and slowly decelerate
$acceleration-curve-timing-functionTiming function to accelerate
$sharp-curve-timing-functionTiming function to quickly accelerate and decelerate

The following functions create transitions given $name and the $duration. You can also specify $delay, but the default is 0ms. $name can either refer to the keyframe, or to CSS property used in transition.

FunctionDescription
enter($name, $duration, $delay)Defines transition for entering the frame
exit-permanent($name, $duration, $delay)Defines transition for exiting the frame permanently
exit-temporary($name, $duration, $delay)Defines transition for exiting the frame temporarily

JavaScript

These functions handle prefixing across various browsers

Method SignatureDescription
getCorrectEventName(windowObj: Window, eventType: StandardJsEventType) => StandardJsEventType | PrefixedJsEventTypeReturns a JavaScript event name, prefixed if necessary. See types.ts for supported values.
getCorrectPropertyName(windowObj: Window, cssProperty: StandardCssPropertyName) => StandardCssPropertyName | PrefixedCssPropertyNameReturns a CSS property name, prefixed if necessary. See types.ts for supported values.