/*animation element*/
.animation-element {
  opacity: 0;
}

/* Fade In */
.animation-element.fade-in {
  opacity: 0;
  transition: opacity 1500ms linear;
}

.animation-element.fade-in.in-view {
  opacity: 1;
}

/* Fade Out */
.animation-element.fade-out {
  opacity: 1;
  transition: opacity 500ms linear;
}

.animation-element.fade-out.in-view {
  opacity: 0;
}

/* Zoom In */
.animation-element.zoom-in {
  opacity: 0;
  transition: all 1000ms linear;
  transform: scale(0.5);
}

.animation-element.zoom-in.in-view {
  opacity: 1;
  transform: scale(1);
}

/* Zoom Out */
.animation-element.zoom-out {
  opacity: 1;
  transition: all 500ms linear;
  transform: scale(1);
}

.animation-element.zoom-out.in-view {
  opacity: 0;
  transform: scale(0.5);
}

/* Move Top */
.animation-element.move-top {
  opacity: 0;
  transition: all 500ms linear;
  transform: translate3d(0, -100px, 0);
}

.animation-element.move-top.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Move Bottom */
.animation-element.move-bottom {
  opacity: 0;
  transition: all 500ms linear;
  transform: translate3d(0, 100px, 0);
}

.animation-element.move-bottom.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Move Left */
.animation-element.move-left {
  opacity: 0;
  transition: all 500ms linear;
  transform: translate3d(-100px, 0, 0);
}

.animation-element.move-left.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Move Right */
.animation-element.move-right {
  opacity: 0;
  transition: all 500ms linear;
  transform: translate3d(100px, 0, 0);
}

.animation-element.move-right.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Move Spin */
.animation-element.move-spin {
  opacity: 0;
  transition: all 500ms linear;
  transform: rotate(-360deg);
}

.animation-element.move-spin.in-view {
  opacity: 1;
  transform: rotate(0deg);
}

/*animation element sliding left*/
.animation-element.slide-left {
  opacity: 0;
  transition: all 1500ms linear;
  transform: translate3d(-100px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}

/*animation element sliding right*/
.animation-element.slide-right {
  opacity: 0;
  transition: all 1500ms linear;
  transform: translate3d(100px, 0, 0);
}

.animation-element.slide-right.in-view {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}

/*animation element sliding up*/
.animation-element.slide-up {
  opacity: 0;
  transition: all 1500ms linear;
  transform: translate3d(0, 100px, 0);
}

.animation-element.slide-up.in-view {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}



/* Slide Down */
.animation-element.slide-down {
  opacity: 0;
  transition: all 1500ms linear;
  transform: translate3d(0, -100px, 0);
}

.animation-element.slide-down.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Slide Spin */
.animation-element.slide-spin {
  opacity: 0;
  transition: all 2000ms linear;
  transform: rotate(-360deg);
}

.animation-element.slide-spin.in-view {
  opacity: 1;
  transform: rotate(0deg);
}