Nightingale Posing Mischievously

    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/material__animation package

    14.0.0 • Public • Published


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

    Design & API Documentation


    npm install @material/animation


    Sass Variables

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

    @use "@material/animation";
    .my-element--animating {
      animation: foo-keyframe 175ms animation.$standard-curve-timing-function;
    Variable Description
    $deceleration-curve-timing-function Timing function to decelerate
    $standard-curve-timing-function Timing function to quickly accelerate and slowly decelerate
    $acceleration-curve-timing-function Timing function to accelerate
    $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.

    @use "@material/animation";
    .my-element {
      transition: animation.exit-permanent(/* $name: */ opacity, /* $duration: */ 175ms, /* $delay: */ 150ms);
      opacity: 0;
      will-change: opacity;
      &--animating {
        transition: animation.enter(/* $name: */ opacity, /* $duration: */ 175ms);
        opacity: 1;
    @use "@material/animation";
    @keyframes fade-in {
      from {
        transform: translateY(-80px);
        opacity: 0;
      to {
        transform: translateY(0);
        opacity: 1;
    .my-element {
      animation: animation.enter(/* $name: */ fade-in, /* $duration: */ 350ms);
    Function Description
    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


    These functions handle prefixing across various browsers

    import {getCorrectEventName} from '@material/animation';
    const eventToListenFor = getCorrectEventName(window, 'animationstart');
    Method Signature Description
    getCorrectEventName(windowObj: Window, eventType: StandardJsEventType) => StandardJsEventType | PrefixedJsEventType Returns a JavaScript event name, prefixed if necessary. See types.ts for supported values.
    getCorrectPropertyName(windowObj: Window, cssProperty: StandardCssPropertyName) => StandardCssPropertyName | PrefixedCssPropertyName Returns a CSS property name, prefixed if necessary. See types.ts for supported values.


    npm i @material/animation

    DownloadsWeekly Downloads






    Unpacked Size

    64.7 kB

    Total Files


    Last publish


    • material-admin
    • yefim
    • abhiomkar
    • azakus
    • bicknellr
    • aprigogin
    • patrickrodee
    • aomarks
    • emarquez
    • allanchen
    • esgonzalez
    • asyncliz
    • candysonya
    • ssuarez
    • taylorv