how to make smooth css transition

问题

how can i get a css transition example like in here (the dropdown example), so far I've managed to only change the text and background color, but not the whole transition effect thing (where the rectangle rolls when hovered and rolls back smoothly when un-hovered), any idea how can i achieve it? here's my code:

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;
}

thank you before

回答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 );
}

回答2:

Just use this. No need use transition in ":hover" selector.

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);}

来源：https://stackoverflow.com/questions/18200228/how-to-make-smooth-css-transition

标签

css

css-transitions