Answers for "css animation generator"

animation generator css

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeOutUp {
  0% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  }
  @keyframes fadeOutUp {
  0% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  }

css animation generator

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes slideOutUp {
  0% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  100% {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  }
  }
  @keyframes slideOutUp {
  0% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  100% {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  }
  }

animation generator css

<div id="animated-example" class="animated zoomIn"></div>