figureslibres.cc/user/themes/figureslibres/scss/theme/_animation.scss

$animate: all 0.2s ease-in-out;

#text_figli{
  z-index: 999;
  opacity: 1;
  p{
    & > a{
      z-index: 999;
      &:before,
      &:after {
        content: "";
        position: absolute;
        bottom: -1px;
        width: 50%;
        height: 1px;
        margin: 1px 0 0;
        transition: $animate;
        transition-duration: 0.3s;
        opacity: 1;
        background-color: black;
      }
      &::before{
        left: 50%;
      }
      &:after{
        right: 50%;
      }
      &:hover {
        cursor: pointer;
        &:before,
        &:after {
          width: 100%;
          opacity: 1;
        }
        &:before,
        &:after {
          width: 50%;
        }
      }
      #icone_list{
        transition: 1s 0.5s margin-left,0.8s 0.3s opacity;
        .hamburger{
          &.hamburger--slider{
            .hamburger-inner{
              transform: translate3d(0,5px,0) rotate(0deg);
              transition: 0s 0.2s transform;
              &:after{
                transform: translate3d(0,-10px,0) rotate(0deg);
                transition: 0.2s 0.2s transform;
              }
            }
          }
        }
      }
      &.open{
        #icone_list{
          transition: 0.5s margin-left, 0.5s opacity;
          .hamburger{
            &.hamburger--slider{
              .hamburger-inner{
                transform: translate3d(0,5px,0) rotate(45deg);
                transition: 0.8s 0.2s transform;
                &:after{
                  transform: translate3d(0,-10px,0) rotate(90deg);
                  transition: 1s 0.2s transform;
                }
              }
            }
          }
        }
      }
      &#figureslibres{
        &::before, &::after{
          bottom: 5px;
        }
      }
    }
  }
  &.hidden{
    opacity: 0;
    transition: 0.3s opacity ease;
  }

  #item_list{
    p{
      & >  a {
        cursor: pointer; 
        &:before,
        &:after {
          width: 100%;
          opacity: 1;
        }
        &:before,
        &:after {
          width: 50%;
        }
      }
    }
  }
}

.circle_hover{
  position: absolute;
  width: 0px;
  height: 0px;
  transform: translate(-50%, -50%);
  z-index: 0;
  transition: height .2s, width .2s;
  &.open{
    width: 200px;
    height: 200px;
    transition: height .5s, width .5s;
  }
  &.figureslibres{
    background:
    url("/user/themes/figureslibres/images/figures_libres.svg") center no-repeat;
    background-size: contain;
  }
  &.publique{
      background:
      url("/user/themes/figureslibres/images/publique.svg") center no-repeat;
      background-size: contain;
  }
  &.sociale{
    background:
    url("/user/themes/figureslibres/images/sociale.svg") center no-repeat;
    background-size: contain;
  }
  &.culturelle{
    background:
    url("/user/themes/figureslibres/images/culturelle.svg") center no-repeat;
    background-size: contain;
  }
  &.commanditaires{
    background:
    url("/user/themes/figureslibres/images/commanditaires.svg") center no-repeat;
    background-size: contain;
  }
  &.logiciels-libres{
    background:
    url("/user/themes/figureslibres/images/logiciels_libres.svg") center no-repeat;
    background-size: contain;
  }
}