lours.net/user/themes/le_style_de_lours_modif/scss/theme/_animation.scss

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

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

@keyframes translateOpen{
  0%{margin-top: 0px;}
  100%{margin-top: -155px;}
}

@keyframes translateClose{
  0%{margin-top: -155px;}
  100%{margin-top: 0px;}
}

@keyframes translateOpensvg{
  0%{margin-top: 50px;}
  100%{margin-top: 180px;} 
}

@keyframes translateClosesvg{
  0%{margin-top: 180px;}
  100%{margin-top: 50px;}
}

@keyframes visible{
  0%{
    opacity: 0;
    transform: translateY(50px);
  }
  100%{
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes hidden{
  0%{
    opacity: 1;
    transform: translateY(0px);
  }
  100%{
    opacity: 0;
    transform: translateY(50px);
  }
}

.why_lsdo{
  &.open{
    h3{
      animation: rotateOpen 1s, translateOpen 1s;
      animation-fill-mode: forwards;
    }
    section{
      animation: visible 1s;
      animation-fill-mode: forwards;
    }
    svg{
      animation: rotateOpen 1s, translateOpensvg 1s;
      animation-fill-mode: forwards;
    }
  }

  &.close{
    h3{
      animation: rotateClose 1s, translateClose 1s;
      animation-fill-mode: forwards;
    }
    section{
      animation: hidden 1s;
      animation-fill-mode: forwards;
    }
    svg{
      animation: rotateClose 1s, translateClosesvg 1s;
      animation-fill-mode: forwards;
    }
  }

}