@brizy/ui/style/core/animation/fade.less

React elements in Brizy style

@import url("../../variables");

@fadeInDown: ~"@{BRZ_PREFIX}-fadeInDown";
@fadeInUp: ~"@{BRZ_PREFIX}-fadeInUp";
@fadeIn: ~"@{BRZ_PREFIX}-fadeIn";
@fadeInLeft: ~"@{BRZ_PREFIX}-fadeInLeft";

.@{BRZ_PREFIX}-animated {
  &--fadeInDown {
    animation-name: @fadeInDown;
  }

  &--fadeInUp {
    animation-name: @fadeInUp;
  }

  &--fadeIn {
    animation-name: @fadeIn;
  }

  &--fadeInLeft {
    animation-name: @fadeInLeft;
  }
}

@keyframes @fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes @fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes @fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes @fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-10px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}