Scout_saturation/style/animate.css

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

@keyframes rotation360 {
  0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}

@-webkit-keyframes clignote {
  0% {opacity: 0};
  50% {opacity: 1};
  100%{opacity: 0};
}

@keyframes clignote {
  0% {opacity: 0};
  50% {opacity: 1};
  100%{opacity: 0};
}

@-webkit-keyframes scale {
  0% {-webkit-transform: scale(1);transform: scale(1);}
  50% {-webkit-transform: scale(0.7);transform: scale(0.7);}
  100% {-webkit-transform: scale(1);transform: scale(1);}
}

@keyframes scale {
  0% {-webkit-transform: scale(1);transform: scale(1);}
  50% {-webkit-transform: scale(0.7);transform: scale(0.7);}
  100% {-webkit-transform: scale(1);transform: scale(1);}
}

@-webkit-keyframes pop {
  0%{-webkit-transform: scale(0);transform: scale(0);}
  25%{-webkit-transform: scale(1);transform: scale(1);}
  55%{-webkit-transform: scale(1);transform: scale(1);}
  80%{-webkit-transform: scale(0);transform: scale(0);}
  100%{-webkit-transform: scale(0);transform: scale(0);}
}

@keyframes pop {
  0%{-webkit-transform: scale(0);transform: scale(0);}
  25%{-webkit-transform: scale(1);transform: scale(1);}
  55%{-webkit-transform: scale(1);transform: scale(1);}
  80%{-webkit-transform: scale(0);transform: scale(0);}
  100%{-webkit-transform: scale(0);transform: scale(0);}
}

@-webkit-keyframes galop {
  0% {-webkit-transform: translate(0);transform: translate(0);}
  50%   {-webkit-transform: translate(0px , -5px) ;transform: translate(0px , -5px) ;}
  100%   {-webkit-transform: translate(0);transform: translate(0);}
}

@keyframes galop {
  0% {-webkit-transform: translate(0);transform: translate(0);}
  50%   {-webkit-transform: translate(0px , -5px) ;transform: translate(0px , -5px) ;}
  100%   {-webkit-transform: translate(0);transform: translate(0);}
}

@-webkit-keyframes battement {
  0% {-webkit-transform: scale(1);transform: scale(1);}
  50% {-webkit-transform: scale(1.1);transform: scale(1.1);}
  100% {-webkit-transform: scale(1);transform: scale(1);}
}

@keyframes battement {
  0% {-webkit-transform: scale(1);transform: scale(1);}
  50% {-webkit-transform: scale(1.1);transform: scale(1.1);}
  100% {-webkit-transform: scale(1);transform: scale(1);}
}

@-webkit-keyframes rotation_pouce {
    0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    50%   {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);}
    100%   {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}

@keyframes rotation_pouce {
    0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    50%   {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);}
    100%   {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}

@-webkit-keyframes balancelegs {
    0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    25%   {-webkit-transform: rotate(15deg);transform: rotate(15deg);}
    50%   {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    75%   {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);}
    100%   {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}

@keyframes balancelegs {
    0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    25%   {-webkit-transform: rotate(15deg);transform: rotate(15deg);}
    50%   {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    75%   {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);}
    100%   {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}

@-webkit-keyframes levitation {
    0% {-webkit-transform: translate(0);transform: translate(0);}
    10%   {-webkit-transform: translate(0px , -20px) ;transform: translate(0px , -20px) ;}
    20%   {-webkit-transform: translate(-5px , -22px);transform: translate(-5px , -22px);}
    50%   {-webkit-transform: translate( 5px , -20px) ;transform: translate( 5px , -20px) ;}
    70%   {-webkit-transform: translate( -5px , -25px) ;transform: translate( -5px , -25px) ;}
    100%   {-webkit-transform: translate(0);transform: translate(0);}
}

@keyframes levitation {
    0% {-webkit-transform: translate(0);transform: translate(0);}
    10%   {-webkit-transform: translate(0px , -20px) ;transform: translate(0px , -20px) ;}
    20%   {-webkit-transform: translate(-5px , -22px);transform: translate(-5px , -22px);}
    50%   {-webkit-transform: translate( 5px , -20px) ;transform: translate( 5px , -20px) ;}
    70%   {-webkit-transform: translate( -5px , -25px) ;transform: translate( -5px , -25px) ;}
    100%   {-webkit-transform: translate(0);transform: translate(0);}
}

/* appli keyframes */

#center #path89{
  -webkit-animation: battement 1s linear infinite;
          animation: battement 1s linear infinite;
  -webkit-transform-origin: 90% 80%;
          transform-origin: 90% 80%;
}

#ampoule #rotate{
  -webkit-animation: rotation360 1s linear infinite ;
  animation: rotation360 1s linear infinite ;
  -webkit-animation-delay: 0;
  animation-delay: 0;
  -webkit-transform-origin: 50% 34%;
  transform-origin: 50% 34%;
}

#angoisses text:nth-of-type(1){
  -webkit-animation: clignote 1s  infinite;
  animation: clignote 1s  infinite;
  background-color: red!important;
}

#angoisses text:nth-of-type(2){
  -webkit-animation: clignote 1s  infinite;
  animation: clignote 1s  infinite;
  -webkit-animation-delay: 0.33s;
  animation-delay: 0.33s;
}

#angoisses text:nth-of-type(3){
  -webkit-animation: clignote 1s  infinite;
  animation: clignote 1s  infinite;
  -webkit-animation-delay: 0.66s;
  animation-delay: 0.66s;
}

#bah_alors svg path:nth-of-type(3){
  -webkit-animation: scale 0.5s ease infinite;
  animation: scale 0.5s ease infinite;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

/* besoin */
#bulle1{
  -webkit-animation: pop 5s infinite forwards;
  animation: pop 5s infinite forwards;
  -webkit-transform-origin: 70% 40%;
  transform-origin: 70% 40%;
}

#bulle2{
  -webkit-animation: pop 5s infinite forwards;
  animation: pop 5s infinite forwards;
  -webkit-transform-origin: 70% 40%;
  transform-origin:  70% 40%;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

#bulle3{
  -webkit-animation: pop 5s infinite forwards;
  animation: pop 5s infinite forwards;
  -webkit-transform-origin: 70% 40%;
  transform-origin: 70% 40%;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

#chevalier .illu{
  -webkit-animation: galop 1s infinite forwards;
          animation: galop 1s infinite forwards;
}

#coeur .illu {
  -webkit-animation: battement 1s ease infinite;
          animation: battement 1s ease infinite;
  /* transform-origin: 50% 50%; */
}

#etoile .illu svg{
  -webkit-animation: rotation360 2s infinite forwards;
          animation: rotation360 2s infinite forwards;
}

#parlons_en svg path:nth-of-type(3){
  -webkit-animation: scale 0.5s ease infinite;
  animation: scale 0.5s ease infinite;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

#pouce .illu svg{
  -webkit-animation: rotation_pouce 1s infinite forwards;
          animation: rotation_pouce 1s infinite forwards;
  -webkit-transform-origin: 30% 70%;
          transform-origin: 30% 70%;
}

#sumo #jambes{
  -webkit-animation: balancelegs 1s infinite;
          animation: balancelegs 1s infinite;
-webkit-transform-origin: 35% 65%;
        transform-origin: 35% 65%;
}

#voyance #boule{
  -webkit-animation: levitation 5s ease infinite;
          animation: levitation 5s ease infinite;
}