/* ================================
|                                 |
|        Animations used          |
|                                 |
================================ */

/* Bounce wobble */
@keyframes wobble {
  0%   { transform: translateX(0%); }
  15%  { transform: translateX(-20%) rotate(-5deg); }
  30%  { transform: translateX(15%) rotate(3deg); }
  45%  { transform: translateX(-10%) rotate(-3deg); }
  60%  { transform: translateX(5%) rotate(2deg); }
  75%  { transform: translateX(-2%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}
@keyframes pulsate{
    0%{   transform:scale(1); opacity:0;     }
    50%{  opacity:1.0;                       }
    100%{ transform:scale(1.5); opacity:0;   }
}
@keyframes gaugepulse{
    0%{   transform:scale(1); opacity:0; }
    50%{  opacity:1.0; }
    100%{ transform:scale(1.5); opacity:0; }
}
@keyframes gaugepointszoomout{
    0%{   transform:scale(10); opacity:0;  }
    25%{  opacity:1;   }
    75%{  opacity:1;   }
    100%{ transform:scale(1); opacity:0;   }
}

/* loading */
@keyframes animation_spring_ltr_custom {
    0%   {  margin-left: 0%;   width: 10%;  }
    25%  {  margin-left: 10%;  width: 80%;  }
    50%  {  margin-left: 90%;  width: 10%;  }
    75%  {  margin-left: 10%;  width: 80%;  }
    100% {  margin-left: 0%;   width: 10%;  }
}

/* 360 */
@keyframes anim_motherfuck_effet{
    0%     { transform: rotate(0deg);   }
    100%   { transform: rotate(360deg); }
}

/* when same view */
@keyframes anim_bounce_effet{
    0%     { transform: scale(1);                         }
    50%    { transform: scale(0.95); border-radius:20px;  }
    100%   { transform: scale(1);                         }
}

/* for the superposition effect */
@keyframes anim_superposition_scale_down{
    0%     { transform: scale(1);                          }
    100%    { transform: scale(0.95); border-radius:20px;  }
}





/* ================================
|                                 |
|      Animations not used        |
|                                 |
================================ */

@keyframes animation_spring_ltr {
    0%   {  margin-left: 0%;   width: 10%;   }
    25%  {  margin-left: 0%;   width: 100%;  }
    50%  {  margin-left: 90%;  width: 10%;   }
    75%  {  margin-left: 0%;   width: 100%;  }
    100% {  margin-left: 0%;   width: 10%;   }
}

@keyframes animation_spring_center {
    0%   {  margin: auto;    width: 10%;   }
    50%  {  margin: auto;    width: 100%;  }
    100% {  margin: auto;    width: 10%;   }
}

@keyframes animation_passage {
    0%   {  margin-left: 0%;    width: 0%;    }
    50%  {  margin-left: 0%;    width: 100%;  }
    100% {  margin-left: 100%;  width: 0%;    }
}