.entrance {
  animation: entrance 1s both;
}

.exit {
  animation: exit 1s both;
}

.shake {
  animation: shake 1.5s cubic-bezier(0.45,0.05,0.55,0.95) 1;
  transform: translate3d(0,0,0);			
}

.rotate-scale-up 
{
  animation: rotate-scale-up 0.65s linear 2 alternate-reverse both;
}

.scale-up-center {
  animation: scale-up-center 0.4s 2 both;
}

.slide-right {
  animation: slide-right 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slide-up {
  animation: slide-up 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slide-all {
  animation: slide-all 6s both;
}

.swirl-bck {
  animation: swirl-bck 1.3s ease-in both;
}

.swirl-fwd {
  animation: swirl-fwd 1.3s ease-in both;
}

.slide-blurred-top {
	animation: slide-blurred-top 1.5s both;
}

.bounce-top {
	animation: bounce-top 3s both;
}

.vibrate {
	animation: vibrate 0.25s linear 8 both;
}

.jello {
	animation: jello 1s both;
}

@keyframes entrance {
  0% { transform: scale(0); filter: blur(12px); opacity: 0; }
  100% { transform: scale(1); filter: blur(0); opacity: 1; }
}

@keyframes exit {
  0% { transform: scale(1); filter: blur(0); opacity: 1; }
  100% { transform: scale(0); filter: blur(12px); opacity: 0; }
}

@keyframes shake {
  10%, 90% { transform: translate3d(-10px, 0, 0); }
  20%, 80% { transform: translate3d(20px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-40px, 0, 0); }
  40%, 60% { transform: translate3d(40px, 0, 0); }
}

@keyframes rotate-scale-up 
{
  0% { transform: scale(1) rotateZ(0); }
  50% { transform: scale(1.2) rotateZ(185deg); }
  100% { transform: scale(1) rotateZ(360deg); }
}

@keyframes scale-up-center 
{
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@keyframes slide-right {
  0% { transform: translateX(0); }
  33% { transform: translateX(2000px); }
  50% { transform: scale(0); }
  66% { transform: translateX(-2000px); }
  100% { transform: scale(1) translateX(0); }
}

@keyframes slide-up {
  0% { transform: translateY(0); }
  33% { transform: translateY(-1000px); }
  50% { transform: scale(0); }
  66% { transform: translateY(1000px); }
  100% { transform: scale(1) translateY(0); }
}

@keyframes slide-all {
  0% { transform: translateY(0) translateX(0); }
  15% { transform: translateX(2000px); }
  25% { transform: scale(0); }
  35% { transform: translateY(-1000px); }
  55% { transform: scale(1) translateY(2000px); }
  70% { transform: translateX(-2000px) }
  100% { transform: translateY(0) translateX(0); }
}

@keyframes swirl-bck {
  0%, 100% { transform: rotate(0) scale(1); opacity: 1; }
  50% { transform: rotate(-540deg) scale(0); opacity: 0; }
}

@keyframes swirl-fwd {
  0%, 100% { transform: rotate(0) scale(1); opacity: 1; }
  50% { transform: rotate(540deg) scale(5); opacity: 0; }
}

@keyframes slide-blurred-top {
  0%, 100% { transform: translateY(0) scaleY(1) scaleX(1); transform-origin: 50% 0%; filter: blur(0); opacity: 1; }
  60% { transform: translateY(-1000px) scaleY(2) scaleX(0.2); transform-origin: 50% 0%; filter: blur(40px); opacity: 0; }
}

@keyframes bounce-top {
  0% { transform: translateY(0); animation-timing-function: ease-out; }
  5% { transform: translateY(-30px); animation-timing-function: ease-in; }
  8% { transform: translateY(0); animation-timing-function: ease-out; }
  13% { transform: translateY(-38px); animation-timing-function: ease-in; }
  19% { transform: translateY(0); animation-timing-function: ease-out; }
  26% { transform: translateY(-75px); animation-timing-function: ease-in; }
  35% { transform: translateY(0); animation-timing-function: ease-out; }
  43% { opacity: 1; }
  50% { transform: translateY(-800px); animation-timing-function: ease-in; opacity: 0; }
  69% { transform: translateY(0); animation-timing-function: ease-out; opacity: 1; }
  78% { transform: translateY(-65px); animation-timing-function: ease-in; }
  86% { transform: translateY(0); animation-timing-function: ease-out; }
  91% { transform: translateY(-28px); animation-timing-function: ease-in; }
  95% { transform: translateY(0); animation-timing-function: ease-out; }
  98% { transform: translateY(-8px); animation-timing-function: ease-in; }
  100% { transform: translateY(0); animation-timing-function: ease-out; }
}

@keyframes vibrate {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

@keyframes jello {
  0% { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
  100% { transform: scale3d(1, 1, 1); }
}


/*

PN - 24/07/2019
Other helpfull things (JS + JQUERY)

// Animations array definition -> [Name, Duration]
var animations = 
[ 
  ['shake', 2000],
  ['slide-up', 2000], 
  ['vibrate', 2000],
  ['jello', 1000],
  ['rotate-scale-up', 1300], 
  ['slide-right', 2000], 
  ['swirl-fwd', 1300],
  ['slide-blurred-top', 1500],
  ['scale-up-center', 800], 
  ['slide-all', 6000],				
  ['swirl-bck', 1300],				
  ['bounce-top', 3000]				
];

// (Optional and not optimized) Used to verify if the animation is not the same as the previous 3
var last_animation_1 = 0;
var last_animation_2 = 0;
var last_animation_3 = 0;


$(document).ready(function()
{
  //When the animation will be called
  $("#elementID").dblclick(function() 
  {
    //checks if there is any animation running in the element
    if (document.getElementById('elementID').className == '') 
    {      
      //gets a random animation from array
      var animation_index = Math.floor(Math.random() * 12);	
      
      // (Optional and not optimized) Checks if the animation is not the same as the previous 3
      while (animation_index == last_animation_1 && animation_index == last_animation_2 && animation_index == last_animation_3) 
      { animation_index = Math.floor(Math.random() * 12); }

      // (Optional and not optimized) Updates the previous animations
      last_animation_1 = animation_index;
      last_animation_2 = last_animation_1;
      last_animation_3 = last_animation_2;
      
      // Adds the class to the element to make the animation run  
      document.getElementById('elementID').classList.add(animations[animation_index][0]);
      
      // Removes the class from the element to make it return to the normal state and allows for a next animation to run
      setTimeout(function() {
        document.getElementById('elementID').className = '';
      }, (animations[animation_index][1]));
    }
  });
});

*/