.animate-from-bottom {
  position: relative;
  -webkit-animation-name: animate-from-bottom;
  -webkit-animation-duration: 1s;
  animation-name: animate-from-bottom;
  animation-duration: 1s
}
@-webkit-keyframes animate-from-bottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
}
@keyframes animate-from-bottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
}

.animate-from-top {
  position: relative;
  -webkit-animation-name: animate-from-top;
  -webkit-animation-duration: 1s;
  animation-name: animate-from-top;
  animation-duration: 1s
}
@-webkit-keyframes animate-from-top {
  from { top:-100px; opacity:0 }
  to { top:0px; opacity:1 }
}
@keyframes animate-from-top {
  from{ top:-100px; opacity:0 }
  to{ top:0px; opacity:1 }
}

.animate-from-left {
  position: relative;
  -webkit-animation-name: animate-from-left;
  -webkit-animation-duration: 1s;
  animation-name: animate-from-left;
  animation-duration: 1s
}
@-webkit-keyframes animate-from-left {
  from { left:-100%; opacity:0 }
  to { left:0px; opacity:1 }
}
@keyframes animate-from-left {
  from{ left:-100%; opacity:0 }
  to{ left:0px; opacity:1 }
}

.animate-from-right {
  position: relative;
  -webkit-animation-name: animate-from-right;
  -webkit-animation-duration: 1s;
  animation-name: animate-from-right;
  animation-duration: 1s
}
@-webkit-keyframes animate-from-right {
  from { right:-100%; opacity:0 }
  to { right:0px; opacity:1 }
}
@keyframes animate-from-right {
  from{ right:-100%; opacity:0 }
  to{ right:0px; opacity:1 }
}

.zoom-in {
  position: relative;
  -webkit-animation-name: zoom-in;
  -webkit-animation-duration: 1s;
  animation-name: zoom-in;
  animation-duration: 1s
}
@-webkit-keyframes zoom-in {
  from { scale:0; opacity:0 }
  to { scale:1; opacity:1 }
}
@keyframes zoom-in {
  from{ scale:-100%; opacity:0 }
  to{ scale:0px; opacity:1 }
}