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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}