enami/dist/enami.css

Animation on scroll package

/*!
 * enami
 * Animation on scroll
 * 2020 Enzo Vergara
 * MIT License
 * https://github.com/enzoemb/enami
 */
[data-enami-in] {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

[data-enami="fade-up"][data-enami-in] {
  -webkit-animation-name: fadeUp;
          animation-name: fadeUp;
  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
          animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

@-webkit-keyframes fadeUp {
  from {
    transform: translate3d(0, 40px, 0) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
}

@keyframes fadeUp {
  from {
    transform: translate3d(0, 40px, 0) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
}

[data-enami="fade-left"][data-enami-in] {
  -webkit-animation-name: fadeLeft;
          animation-name: fadeLeft;
  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
          animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

@-webkit-keyframes fadeLeft {
  from {
    transform: translate3d(-40px, 0, 0) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
}

@keyframes fadeLeft {
  from {
    transform: translate3d(-40px, 0, 0) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
}

[data-enami="fade-right"][data-enami-in] {
  -webkit-animation-name: fadeRight;
          animation-name: fadeRight;
  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
          animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

@-webkit-keyframes fadeRight {
  from {
    transform: translate3d(40px, 0, 0) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
}

@keyframes fadeRight {
  from {
    transform: translate3d(40px, 0, 0) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
}

[data-enami="fade-down"][data-enami-in] {
  -webkit-animation-name: fadeDown;
          animation-name: fadeDown;
  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
          animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

@-webkit-keyframes fadeDown {
  from {
    transform: translate3d(0, -40px, 0) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
}

@keyframes fadeDown {
  from {
    transform: translate3d(0, -40px, 0) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
}

[data-enami="fade-in"][data-enami-in] {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
          animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

[data-enami="fade-up-out"][data-enami-in] {
  animation-direction: reverse;
  -webkit-animation-name: fadeUp;
          animation-name: fadeUp;
}

[data-enami="fade-left-out"][data-enami-in] {
  -webkit-animation-name: fadeLeft;
          animation-name: fadeLeft;
  animation-direction: reverse;
}

[data-enami="fade-right-out"][data-enami-in] {
  -webkit-animation-name: fadeRight;
          animation-name: fadeRight;
  animation-direction: reverse;
}

[data-enami="fade-down-out"][data-enami-in] {
  -webkit-animation-name: fadeDown;
          animation-name: fadeDown;
  animation-direction: reverse;
}

[data-enami="fade-in-out"][data-enami-in] {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  animation-direction: reverse;
}

[data-enami="jump-in"][data-enami-in] {
  -webkit-animation-name: jumpIn;
          animation-name: jumpIn;
  -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
          animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
}

@-webkit-keyframes jumpIn {
  from {
    transform: scale(0) rotate(2deg) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0deg) rotate(0deg);
    opacity: 1;
  }
}

@keyframes jumpIn {
  from {
    transform: scale(0) rotate(2deg) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0deg) rotate(0deg);
    opacity: 1;
  }
}

[data-enami="jump-up"][data-enami-in] {
  -webkit-animation-name: jumpUp;
          animation-name: jumpUp;
  -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
          animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
}

@-webkit-keyframes jumpUp {
  from {
    transform: translate3d(0, 20px, 0) rotate(2deg) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) rotate(0deg) rotate(0deg);
    opacity: 1;
  }
}

@keyframes jumpUp {
  from {
    transform: translate3d(0, 20px, 0) rotate(2deg) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) rotate(0deg) rotate(0deg);
    opacity: 1;
  }
}

[data-enami="jump-left"][data-enami-in] {
  -webkit-animation-name: jumpLeft;
          animation-name: jumpLeft;
  -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
          animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
}

@-webkit-keyframes jumpLeft {
  from {
    transform: translate3d(-20px, 0, 0) rotate(2deg) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) rotate(0deg) rotate(0deg);
    opacity: 1;
  }
}

@keyframes jumpLeft {
  from {
    transform: translate3d(-20px, 0, 0) rotate(2deg) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) rotate(0deg) rotate(0deg);
    opacity: 1;
  }
}

[data-enami="jump-right"][data-enami-in] {
  -webkit-animation-name: jumpRight;
          animation-name: jumpRight;
  -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
          animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
}

@-webkit-keyframes jumpRight {
  from {
    transform: translate3d(20px, 0, 0) rotate(2deg) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) rotate(0deg) rotate(0deg);
    opacity: 1;
  }
}

@keyframes jumpRight {
  from {
    transform: translate3d(20px, 0, 0) rotate(2deg) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) rotate(0deg) rotate(0deg);
    opacity: 1;
  }
}

[data-enami="jump-down"][data-enami-in] {
  -webkit-animation-name: jumpDown;
          animation-name: jumpDown;
  -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
          animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
}

@-webkit-keyframes jumpDown {
  from {
    transform: translate3d(0, -20px, 0) rotate(2deg) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) rotate(0deg) rotate(0deg);
    opacity: 1;
  }
}

@keyframes jumpDown {
  from {
    transform: translate3d(0, -20px, 0) rotate(2deg) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) rotate(0deg) rotate(0deg);
    opacity: 1;
  }
}

[data-enami="jump-out"][data-enami-in] {
  -webkit-animation-name: jumpIn;
          animation-name: jumpIn;
  -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
          animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
  animation-direction: reverse;
}

[data-enami="jump-up-out"][data-enami-in] {
  -webkit-animation-name: jumpUp;
          animation-name: jumpUp;
  -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
          animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
  animation-direction: reverse;
}

[data-enami="jump-left-out"][data-enami-in] {
  -webkit-animation-name: jumpLeft;
          animation-name: jumpLeft;
  -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
          animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
  animation-direction: reverse;
}

[data-enami="jump-right-out"][data-enami-in] {
  -webkit-animation-name: jumpRight;
          animation-name: jumpRight;
  -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
          animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
  animation-direction: reverse;
}

[data-enami="jump-down-out"][data-enami-in] {
  -webkit-animation-name: jumpDown;
          animation-name: jumpDown;
  -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
          animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
  -webkit-animation: 0.5s jumpDown forwards cubic-bezier(0.68, -0.55, 0.265, 2.4);
          animation: 0.5s jumpDown forwards cubic-bezier(0.68, -0.55, 0.265, 2.4);
  animation-direction: reverse;
}

[data-enami="scale-in"][data-enami-in] {
  -webkit-animation-name: scaleIn;
          animation-name: scaleIn;
  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
          animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

@-webkit-keyframes scaleIn {
  from {
    transform: scale(0.6) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.6) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

[data-enami="scale-up"][data-enami-in] {
  -webkit-animation-name: scaleUp;
          animation-name: scaleUp;
  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
          animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

@-webkit-keyframes scaleUp {
  from {
    transform: scale(0.6) translateY(100px) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes scaleUp {
  from {
    transform: scale(0.6) translateY(100px) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

[data-enami="scale-left"][data-enami-in] {
  -webkit-animation-name: scaleLeft;
          animation-name: scaleLeft;
  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
          animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

@-webkit-keyframes scaleLeft {
  from {
    transform: scale(0.6) translateX(100px) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes scaleLeft {
  from {
    transform: scale(0.6) translateX(100px) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

[data-enami="scale-right"][data-enami-in] {
  -webkit-animation-name: scaleRight;
          animation-name: scaleRight;
  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
          animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

@-webkit-keyframes scaleRight {
  from {
    transform: scale(0.6) translateX(-100px) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes scaleRight {
  from {
    transform: scale(0.6) translateX(-100px) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

[data-enami="scale-down"][data-enami-in] {
  -webkit-animation-name: scaleDown;
          animation-name: scaleDown;
  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
          animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

@-webkit-keyframes scaleDown {
  from {
    transform: scale(0.6) translateY(-100px) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes scaleDown {
  from {
    transform: scale(0.6) translateY(-100px) rotate(0.02deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

[data-enami="scale-out"][data-enami-in] {
  -webkit-animation-name: scaleIn;
          animation-name: scaleIn;
  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
          animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  animation-direction: reverse;
}

[data-enami="scale-up-out"][data-enami-in] {
  -webkit-animation-name: scaleUp;
          animation-name: scaleUp;
  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
          animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  animation-direction: reverse;
}

[data-enami="scale-left-out"][data-enami-in] {
  -webkit-animation-name: scaleLeft;
          animation-name: scaleLeft;
  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
          animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  animation-direction: reverse;
}

[data-enami="scale-right-out"][data-enami-in] {
  -webkit-animation-name: scaleRight;
          animation-name: scaleRight;
  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
          animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  animation-direction: reverse;
}

[data-enami="scale-down-out"][data-enami-in] {
  -webkit-animation-name: scaleDown;
          animation-name: scaleDown;
  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
          animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  animation-direction: reverse;
}

[data-enami="pop-in"][data-enami-in] {
  -webkit-animation-name: popIn;
          animation-name: popIn;
  -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
          animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
}

@-webkit-keyframes popIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes popIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

[data-enami="pop-out"][data-enami-in] {
  -webkit-animation-name: popOut;
          animation-name: popOut;
  -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
          animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 2.4);
}

@-webkit-keyframes popOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0);
  }
}

@keyframes popOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0);
  }
}