# Animation Material in motion is responsive and natural. Use these easing curves and duration patterns to create smooth and consistent motion. ## Design & API Documentation

• Material Design guidelines: Duration & easing

## Installation ``` npm install @material/animation ``` ## Usage ### Sass Variables We provide timing functions which you can use with the `animation` or `transition` CSS properties ```scss @import "../animation/variables"; .my-element--animating { animation: foo-keyframe 175ms $mdc-animation-standard-curve-timing-function; } ``` 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`. ```scss @import "../animation/functions"; .my-element { transition: mdc-animation-exit-permanent(/* $name: */ opacity, /* $duration: */ 175ms, /* $delay: */ 150ms); opacity: 0; will-change: opacity; &--animating { transition: mdc-animation-enter(/* $name: */ opacity, /* $duration: */ 175ms); opacity: 1; } } ``` ```scss @import "../animation/functions"; @keyframes fade-in { from { transform: translateY(-80px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .my-element { animation: mdc-animation-enter(/* $name: */ fade-in, /* $duration: */ 350ms); } ``` 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 ```js import {getCorrectEventName} from '@material/animation'; const eventToListenFor = getCorrectEventName(window, 'animationstart'); ``` 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