$animate: all 0.2s ease-in-out; #text_figli{ z-index: 999; p{ & > a{ z-index: 999; &:before, &:after { content: ""; position: absolute; bottom: -1px; width: 0px; height: 1px; margin: 1px 0 0; transition: $animate; transition-duration: 0.3s; opacity: 0; 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; } } } } } } } } } .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; } &.publique{ background: url("/user/themes/figureslibres/images/forme2.svg") center no-repeat; background-size: cover; } &.sociale{ background: $color_sociale; border-radius: 100px; } &.culturelle{ background: url("/user/themes/figureslibres/images/forme3.svg") center no-repeat; background-size: cover; } &.commanditaires{ background: url("/user/themes/figureslibres/images/forme4.svg") center no-repeat; background-size: cover; } }