.reveal{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}





@keyframes aboutAnimation {
   0%   {left:0px; top:0px;}
  25%  {left:100px; top:0px;}
  50%  {bleft:100px; top:100px;}
  75%  {left:0px; top:100px;}
  100% {left:0px; top:0px;}
}

@keyframes activitiesAnimation {
   0%   {left: -1000px; top: 0px;}
  100% { left: 0px; top: 0px;}
}

@keyframes leftMove {
   0%   {left: -500px; top: 0px;}
  100% { left: 0px; top: 0px;}
}
@keyframes rightMove {
   0%   {right: -500px; top: 0px;}
  100% { right: 0px; top: 0px;}
}
@keyframes topMove {
   0%   {right: 0px; top: -500px;}
  100% { right: 0px; top: 0px;}
}
@keyframes bottomMove {
   0%   {right: 0px; bottom: -500px;}
  100% { right: 0px; bottom: 0px;}
}


.imageAnimatoin {
  position: relative;
  animation-name: aboutAnimation;
  animation-duration: 5s;
  animation-iteration-count: 1;
  /*animation-direction: alternate-reverse;  */
}

.imageAnimatoin:hover {
  transform: rotateY(360deg);
}

..activitiesAnimationClass {
  position: relative;
  animation: activitiesAnimation 3s 2;
  animation-direction: alternate-reverse;
}


.leftMoveClass {
  position: leftMove;
  animation: leftMove 2s 2;
  animation-direction: alternate-reverse;
}

.rightMoveClass {
  position: relative;
  animation: rightMove 2s 2;
  animation-direction: alternate-reverse;
}

.topMoveClass {
  position: relative;
  animation: topMove 2s 2;
  animation-direction: alternate-reverse;
}

.bottomMoveClass {
  position: relative;
  animation: bottomMove 2s 2;
  animation-direction: alternate-reverse;
}