Animation CSS Résolu

Question

Bonjour

j'ai un div et lorsque le visiteur pointe dessus je veux qu'il se déplace à droite pendant une seconde mais après 1 seconde il saute à sa place original

je veux qu'il reste là bas jusqu’a ce que le visiteur enlève la souris et quand il revient il revient en douceur 

J'espère que vous m'avez compris!

CSS:

@-webkit-keyframes menu {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(80px);
    }
}
@keyframes menu {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(100px);
    }
}
#menu{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -130px;
    width: 150px;
    height: auto;
    background: #000;
}
#menu:hover{
    animation: menu 2s;
}
Merci d'avance

Pitet · Answer

Salut,

Une solution possible avec transition :

#menu{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -130px;
    width: 150px;
    height: auto;
    background: #000;
    transition: width 2s ease;
}
#menu:hover{
    width: 300px;
}


Bonne journée,

Animation CSS

1 réponse

Discussions similaires

Newsletters