.pop-right {
    -webkit-animation-duration: 2s;
    -webkit-animation-name: slide-right, fade-in;
}

.pop-left {
    -webkit-animation-duration: 2s;
    -webkit-animation-name: slide-left, fade-in;
}

.pop-bottom {
    -webkit-animation-duration: 2s;
    -webkit-animation-name: slide-bottom, fade-in;
}

.pop-top {
    -webkit-animation-duration: 2s;
    -webkit-animation-name: slide-top, fade-in;
}

.rotate-right {
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-in;
    -webkit-animation-name: rotate-right, fade-in;
}

.rotate-left {
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-in;
    -webkit-animation-name: rotate-left, fade-in;
}

.fade-in {
    -webkit-animation-duration: 2s;
    -webkit-animation-name: fade-in;
}

.shaking {
    -webkit-animation-delay: 2s;
    -webkit-animation-duration: 10s;
    -webkit-animation-name: shaking;
    -webkit-animation-iteration-count: infinite;
}

@keyframes slide-top {
  0% {
    transform: translateY(500px);
  }
  100% {      
    transform: translateY(0px);
  }
}

@keyframes slide-bottom {
  0% {
    transform: translateY(-500px);
  }
  100% {      
    transform: translateY(-0px);
  }
}

@keyframes slide-right {
  0% {
    transform: translateX(-500px);
  }
  100% {      
    transform: translateX(-0px);
  }
}

@keyframes slide-left {
  0% {
    transform: translateX(500px);
  }
  100% {      
    transform: translateX(-0px);
  }
}

@keyframes fade-in {
  0% {
    opacity : 0;
  }
  100% {
    opacity : 1;
  }
}

@keyframes rotate-right { 
    from { 
        transform: rotateY(-180deg); 
    } to { 
        transform: rotateY(0deg); 
    }
}

@keyframes rotate-left { 
    from { 
        transform: rotateY(180deg); 
    } to { 
        transform: rotateY(0deg); 
    }
}

@keyframes shaking { 
    0% { 
        transform: rotateZ(0deg); 
    }
    2% { 
        transform: rotateZ(5deg); 
    } 
    4% { 
        transform: rotateZ(-8deg); 
    }
    6% { 
        transform: rotateZ(6deg); 
    }
    9% { 
        transform: rotateZ(0deg); 
    }
    100% { 
        transform: rotateZ(0deg); 
    }
}