@brightleaf/elements/lib/css/animations.css

React UI elements styled with Bulma CSS

.animated {
  animation-duration: 0.25s;
  animation-fill-mode: both;
}


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

.fadeOut {
  animation-name: fadeOut; }

@keyframes fadeOutDown {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0); } }

.fadeOutDown {
  animation-name: fadeOutDown; }

@keyframes fadeOutUp {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0); } }

.fadeOutUp {
  animation-name: fadeOutUp; }

  @keyframes fadeOutLeft {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
  }

  .fadeOutLeft {
    animation-name: fadeOutLeft;
  }

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

.fadeIn {
  animation-name: fadeIn; }

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0); }
  to {
    opacity: 1;
    transform: none; } }

.fadeInDown {
  animation-name: fadeInDown; }

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

.fadeInUp {
  animation-name: fadeInUp; }



  @keyframes zoomIn {
    from {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
      opacity: 1;
    }
  }

  .zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
  }

/**
 * Transitions
 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 150ms ease-out; }

.fade-enter,
.fade-leave-to {
  opacity: 0; }

.zoom-in-enter-active,
.zoom-in-leave-active {
  transition: opacity 150ms ease-out; }
  .zoom-in-enter-active .animation-content,
  .zoom-in-enter-active .animation-content,
  .zoom-in-leave-active .animation-content,
  .zoom-in-leave-active .animation-content {
    transition: transform 150ms ease-out; }

.zoom-in-enter,
.zoom-in-leave-active {
  opacity: 0; }
  .zoom-in-enter .animation-content,
  .zoom-in-enter .animation-content,
  .zoom-in-leave-active .animation-content,
  .zoom-in-leave-active .animation-content {
    transform: scale(0.95); }

.zoom-out-enter-active,
.zoom-out-leave-active {
  transition: opacity 150ms ease-out; }
  .zoom-out-enter-active .animation-content,
  .zoom-out-enter-active .animation-content,
  .zoom-out-leave-active .animation-content,
  .zoom-out-leave-active .animation-content {
    transition: transform 150ms ease-out; }

.zoom-out-enter,
.zoom-out-leave-active {
  opacity: 0; }
  .zoom-out-enter .animation-content,
  .zoom-out-enter .animation-content,
  .zoom-out-leave-active .animation-content,
  .zoom-out-leave-active .animation-content {
    transform: scale(1.05); }

.slide-next-enter-active,
.slide-next-leave-active,
.slide-prev-enter-active,
.slide-prev-leave-active {
  transition: transform 250ms cubic-bezier(0.785, 0.135, 0.15, 0.86); }

.slide-prev-leave-to, .slide-next-enter {
  transform: translate3d(-100%, 0, 0);
  position: absolute;
  width: 100%; }

.slide-prev-enter, .slide-next-leave-to {
  transform: translate3d(100%, 0, 0);
  position: absolute;
  width: 100%; }




  @keyframes zoomOut {
    from {
      opacity: 1;
    }

    50% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }

    to {
      opacity: 0;
    }
  }

  .zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
  }

  @keyframes scale-display {
    0% {
      opacity: 0;
      transform: scale(0);
      -webkit-transform: scale(0);
    }

    100% {
      opacity: 1;
      transform: scale(1);
      -webkit-transform: scale(1);
    }
  }







  @keyframes slideInDown {
    from {
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
      visibility: visible;
    }

    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

  .slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
  }

  @-webkit-keyframes slideInLeft {
    from {
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
      visibility: visible;
    }

    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

  @-webkit-keyframes slideInUp {
    from {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
      visibility: visible;
    }

    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes slideInUp {
    from {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
      visibility: visible;
    }

    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

  .slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
  }


@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}