TypeScript icon, indicating that this package has built-in type declarations

4.0.1-p4.0.0.1 • 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 @limetech/mdc-animation


Sass Variables

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

@import "@limetech/mdc-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.

@import "@limetech/mdc-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;
@import "@limetech/mdc-animation/functions";

@keyframes fade-in {
  from {
    transform: translateY(-5rem);
    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


These functions handle prefixing across various browsers

import {getCorrectEventName} from '@limetech/mdc-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 @limetech/mdc-animation

DownloadsWeekly Downloads






Unpacked Size

19.3 kB

Total Files


Last publish


  • flippare
  • cybercap
  • specularrain
  • anderssonjohan