Как сделать гладкий переход css

Question

Как я могу получить пример перехода css, например, в here (пример выпадающего списка), до сих пор мне удалось изменить только текст и цвет фона, но не весь эффект эффекта перехода (где прямоугольник рулонах, когда он зависает и плавно возвращается назад, когда он не зависает), любая идея, как я могу ее достичь? вот мой код:

a.menulink 
{ 
text-decoration: none; 
color: #000000; 
background-color: rgb(235,235,185); 
-webkit-transition: color .25s linear; 
transition: color .25s linear; 
transition: background-color .15s linear .1; 
} 

a.menulink:hover 
{ 
text-decoration: none; 
color: #FFFFFF; 
background-color: rgb(255,24,24); 
-webkit-transition: color .25s linear, background-color .15s linear .1s; 
transition: color .25s linear, background-color .15s linear .1s; 
} 

поблагодарить вас перед

Answer 1

See this Demo

<a href="#" class="linkhover"> 
    <span hover-title="LINK HOVER">LINK HOVER</span> 
</a> 

.linkhover { 
    display: inline-block; 
    overflow: hidden; 
    perspective: 400px; 
    -webkit-perspective: 400px; 
    perspective-origin: 50% 50%; 
    -webkit-perspective-origin: 50% 50%; 
} 
.linkhover span { 
    display: block; 
    position: relative; 
    transition: all 500ms ease; 
    -webkit-transition: all 500ms ease; 
    transform-origin: 50% 0%; 
    -webkit-transform-origin: 50% 0%; 
    transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; 
} 
.linkhover:hover span { 
    transform: translate3d(0px, 0px, -35px) rotateX(90deg); 
    -webkit-transform: translate3d(0px, 0px, -35px) rotateX(90deg); 
} 
.linkhover span:after { 
    content: attr(hover-title); 
    display: block; 
    position: absolute; 
    left: 0; 
    top: 0; 
    white-space: nowrap; 
    color: white; 
    background: red; 
    transform-origin: 50% 0%; 
    -webkit-transform-origin: 50% 0%; 
    transform: translate3d(0px, 100%, 0px) rotateX(-90deg); 
    -webkit-transform: translate3d(0px, 100%, 0px) rotateX(-90deg); 
} 

Answer 2

Просто используйте это. Не нужно использовать переход в селекторе «: hover».

a.menulink{ 
text-decoration: none; 
color: #000000; 
background-color: rgb(235,235,185); 
-webkit-transition: color .25s linear; 
transition: color .25s linear; 
transition: background-color .15s linear .1s; 
} 

a.menulink:hover 
{ 
text-decoration: none; 
color: #FFFFFF; 
background-color: rgb(255,24,24);}