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
npm install @material/animation
Usage
Sass Variables
We provide timing functions which you can use with the animation
or transition
CSS properties
; .my-element--animating
Variable | Description |
---|---|
mdc-animation-deceleration-curve-timing-function |
Timing function to decelerate |
mdc-animation-standard-curve-timing-function |
Timing function to quickly accelerate and slowly decelerate |
mdc-animation-acceleration-curve-timing-function |
Timing function to accelerate |
mdc-animation-sharp-curve-timing-function |
Timing 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
.
; .my-element
; .my-element
Function | Description |
---|---|
mdc-animation-enter($name, $duration, $delay) |
Defines transition for entering the frame |
mdc-animation-exit-permanent($name, $duration, $delay) |
Defines transition for exiting the frame permanently |
mdc-animation-exit-temporary($name, $duration, $delay) |
Defines transition for exiting the frame temporarily |
JavaScript
These functions handle prefixing across various browsers
; const eventToListenFor = ;
Method Signature | Description |
---|---|
getCorrectEventName(windowObj, eventType) |
Returns a JavaScript event name, prefixed if necessary |
getCorrectPropertyName(windowObj, eventType) |
Returns a CSS property name, prefixed if necessary |