Ir para conteúdo
xDenisX

Controlar o time do transition ao retirar o mouse

Recommended Posts

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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por reginaldo123
      estou com dificuldade em criar uma url pernalizada exemplo
       
      href="www.bolacha,.com/novabolacha"
      value= "www.bolacha.com"
       
      quando o usuario copia a url para colocar em outra pagina quero que apareça o conteudo de value, e seja direcionado para o href.
       
    • Por Incompetech
      Então.. a um tempo atrás eu fiz um post pedindo ajuda em relação a tooltip mas não obtive resposta, então decidi deixar essa funcionalidade para depois.
      Como disse na minha primeira pergunta eu estou praticando HTML / CSS / JS ... então comecei a fazer uma entrada para MU ONLINE que foi um dos jogos que mais joguei em épocas de LAN HOUSE. Então o que quero perguntar a vocês é o seguinte:

      Como podem ver nessa imagem acima ela tem um total de 10 itens que são icones pequenos que ao clicar neles logo ele irá dar loading na foto do item completo, gostaria de saber como fazer isso.
       
      No meu caso eu criei essa entrada no Photoshop: 
       
      E no caso gostaria de fazer a mesma coisa porém clicando nas setas que estão do lado da box como podem ver no centro da imagem.
      Para isto eu devo usar Js? E qual código devo usar, eu sou super perdido com Js.
      Agradeço desde já! :D

    • Por Artes Ussler
      Olá!
       
      Como eu faço uma barrinha abaixo do texto como essa da imagem apenas usando CSS?
       

    • Por Guga Alves
      Olá, estou enfrentando um problema no qual não tinha tido contato até então.

      Alguns textos em uma landing que estou trabalhando simplesmente não exibidos ou apresentam erros na exibição.

      Gostaria de saber se alguém já enfrentado esse problema poderia me ajudar com isso.

      Abaixo segue imagens dos erros
       
       
       


    • Por Incompetech
      Olá a todos. Então.. eu estava praticando um pouco de HTML / CSS e no fim cheguei a um resultado bem legal e simples claro disto aqui:
       
      Eu sei que alguns vão reconhecer isto.. Mas para quem não conhece é algo relacionado ao game MU ONLINE.
      Enfim. Como podem ver eu inventei alguns adicionais que no caso são as características dessa armadura, porém eu gostaria de aplicar um efeito em que esses adicionais apareçam quando eu passar o mouse por cima da imagem da armadura.. como se fosse dentro do game.
      Abaixo vão alguns exemplos:
      Efeito aplicado em um projeto HTML: 

      O mesmo efeito In Game:
       
      Sei que pode parecer algo meio trivial mas gostaria muito de aprender como eu faço para criar algo igual, se puderem me ajudar eu agradeço de coração.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.