shayo-animation

0.0.10

Animation & transition.

shayo-animation is a fork from @material/animation.

Installation

$ npm install shayo-animation

Usage

Sass

@import "path/to/node_modules/shayo-animation/animation";

@keyframes animation-name {
  from {
    property: 0%;
  }

  to {
    property: 100%;
  }
}

.foo {
  animation: _s-animation("animation-name", 3s);
}

.foo--deceleration-progress {
  animation: s-animation-deceleration-progress("animation-name", 3s);
}

.foo--standard-progress {
  animation: s-animation-standard-progress("animation-name", 3s);
}

.foo--acceleration-progress {
  animation: s-animation-acceleration-progress("animation-name", 3s);
}

.foo--sharp-progress {
  animation: s-animation-sharp-progress("animation-name", 3s);
}

.bar {
  transition: _s-animation-transition("property", 2s);
  will-change: property;
}

.bar {
  @include _s-animation-transition(
    (
      ("another-property", 2s),
    )
  );
}

.bar {
  @include _s-animation-transition(
    (
      ("property", 2s),
      ("property", 2s, null, 0.5s),
      ("another-property", 2s, "ease-in-out"),
    )
  );
}

Css

@keyframes animation-name {
  from {
    property: 0%;
  }
  to {
    property: 100%;
  }
}

.foo {
  animation: animation-name 3s;
}

.foo--deceleration-progress {
  animation: animation-name 3s cubic-bezier(0, 0, 0.2, 1);
}

.foo--standard-progress {
  animation: animation-name 3s cubic-bezier(0.4, 0, 0.2, 1);
}

.foo--acceleration-progress {
  animation: animation-name 3s cubic-bezier(0.4, 0, 1, 1);
}

.foo--sharp-progress {
  animation: animation-name 3s cubic-bezier(0.4, 0, 0.6, 1);
}

.bar {
  transition: property 2s;
  will-change: property;
}

.bar {
  transition: another-property 2s;
  will-change: another-property;
}

.bar {
  transition: property 2s, another-property 2s ease-in-out;
  will-change: property, another-property;
}

Author

Zaza Agency

This work is licensed under the Creative Commons Attribution 4.0 International License. To view a copy of this license, visit creativecommons.org/licenses.