css animations animation generator code example

Example 1: 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%);
  }
  }

Example 2: animation generator css

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