Partage

annuler l'effet d'une animation sur le lien

aaaaaargh

6 octobre 2017 à 15:34:29

Voilà presque 2h que je m'arrache les cheveux sur ce sujet:

J'ai réussi à faire une animation "translateX" sur mon menu, mais... le "a" se barre avec, moi je voulais seulement que le bg et les bordures filent à droite mais que le lien contenu dedans reste, quoi.

voilà le css:

.primary-menu li {
	border-top: 3px solid #d8a656;
    border-bottom: 3px solid #d8a656;
    background-color: #fff;
	padding-left: 10px;
	padding-right: 10px;
	margin: 0 0 0 0px;
	margin: 0 0 0 0rem;
	text-transform: uppercase;
    display: table-cell;
    transition: background-color 1s, border-top 1s, border-bottom 1s, transform 1s;
    -webkit-transition: background-color 1s, border-top 1s, border-bottom 1s, -webkit-transform 1s;
    -moz-transition: background-color 1s, border-top 1s, border-bottom 1s, -moz-transform 1s; 
}

.primary-menu li:hover {
    background-color: rgba(255,255,255,0.3);
    border-top: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);    
}

.primary-menu li:hover a {
    transition: initial;
    -webkit-transition: initial;
    -moz-transition: initial;
    transform: initial;
    -webkit-transform: initial;
    -moz-transform: initial;
}

et le site

http://annickmauriange.eu

si quelqu'un a une solution, merci ^^

11 octobre 2017 à 11:23:22

salut 

 tu peux essayer de faire comme ca. 

.primary-menu li{
    trasition:0.5s;
}
.primary-menu li:hover{
     margin-top: 10px;
}
.primary-menu li:hover a{
     margin-top: 0px;
}

et dis moi si ca fonctionne.

bon courage !

victor

11 octobre 2017 à 14:12:56

non toujours pas... mais merci.

j'ai finalement opté pour un plan B également esthétique: un translateY de 10%. ça marche pas mal.

annuler l'effet d'une animation sur le lien

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown