Controlar o time do transition ao retirar o mouse
Eae pessoal tudo bem ?
Seguinte estou aprendendo CSS, e fiz um menu um pouco animado. Ao passar a mouse sobre um Li ela mostra seus componentes com uma animação e delays diferentes.
Meu problema é o seguinte, quando eu tiro o Mouse, os delays ainda acontecem deixando assim uma animação bem "Feia". Eu queria que ao tirar o mouse os itens voltassem ao mesmo tempo sem delay alguém pode me ajudar ?
( mais uma pergunta, estou aprendendo CSS3 e logo logo começo estudar JavaScript sabem me dizer se conseguria fazer animações como essa utilizando JavaScript mais facilmente ? )
Obrigado pela atenção o código esta abaixo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Menu deslizante</title>
<style>
.container{
height: 500px;
width: 200px;
padding: 0px;
overflow: hidden;
}
.menu{
width: 200px;
font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana," sans-serif";
color:whitesmoke;
font-size: 13pt;
}
.menu ul{
list-style: none;
position: relative;
padding: 0px;
}
.menu ul ul {
padding: 0;
position:absolute;
transform: translateX(200px);
}
.menu ul li:hover ul{
position: relative;
transition:2s;
}
.menu ul li:nth-child(1){
transition:0.25s;
}
.menu ul li:hover ul li:nth-child(1){
transform: translateX(-190px);
}
.menu ul li:nth-child(2){
transition:0.25s;
transition-delay: 0.25s;
}
.menu ul li:hover ul li:nth-child(2){
transform: translateX(-190px);
}
.menu ul li:nth-child(3){
transition:0.25s;
transition-delay: 0.5s;
}
.menu ul li:hover ul li:nth-child(3){
transform: translateX(-190px);
}
.menu li{
padding: 15px;
cursor: pointer;
background-color: rgba(188,27,30,1.00);
border-bottom: rgba(229,79,82,1.00) solid 1px;
}
</style>
</head>
<body>
<div class="container">
<nav class="menu">
<ul>
<li>Home</li>
<li>Galeria</li>
<li>Shop
<ul>
<li>Cell Cases</li>
<li>Notebook Acessories</li>
<li>To your House</li>
</ul>
</li>
<li>Contacts</li>
<li>About us</li>
</ul>
</nav>
</div>
</body>
</html>Discussão (0)
Carregando comentários...