J'ai ajouté une animation CSS mais ça ne marche pas et tout va bien

-1

J'ai donc essayé d'ajouter une simple animation de vibration à un lien de mon site mais ça ne marche tout simplement pas. Quelqu'un voit quelque chose de mal avec mon code?J'ai ajouté une animation CSS mais ça ne marche pas et tout va bien

Je pris le code d'animation à partir animista.net et là, ils travaillaient

Voici mon code:

a { 
 
    text-decoration: none; 
 
    animation: vibrate 1s linear infinite both; 
 
} 
 

 
@keyframes vibrate { 
 
    0% { 
 
    transform: translate(0); 
 
    } 
 
    20% { 
 
    transform: translate(-2px, 2px); 
 
    } 
 
    40% { 
 
    transform: translate(-2px, -2px); 
 
    } 
 
    60% { 
 
    transform: translate(2px, 2px); 
 
    } 
 
    80% { 
 
    transform: translate(2px, -2px); 
 
    } 
 
    100% { 
 
    transform: translate(0); 
 
    } 
 
}

<a href="mailto:[email protected]" id="cta">Drop me a line and let’s do cool things together!</a>

Source

2017-09-17 Eduard Stefan

'' a'nchors sont inline'. Faites que 'display: inline-block;'. – Abhitalks

Vous pouvez définir ou modifier position: absolutedisplay valeur pour bloquer -le niveau (car a est inline par défaut) pour transform pour travailler.

a { 
 
    text-decoration: none; 
 
    display: block; /* Or inline-block */ 
 
    animation: vibrate 1s linear infinite both; 
 
} 
 

 
@keyframes vibrate { 
 
    0% { transform: translate(0); } 
 
    20% { transform: translate(-2px, 2px); } 
 
    40% { transform: translate(-2px, -2px); } 
 
    60% { transform: translate(2px, 2px); } 
 
    80% { transform: translate(2px, -2px); } 
 
    100% { transform: translate(0); } 
 
}

<a href="mailto:[email protected]" id="cta">Drop me a line and let’s do cool things together!</a>

Source

2017-09-17 13:28:02

L'animation CSS ne sert pas à l'ancre cible. donc s'il vous plaît utiliser div pour les effets d'animation facile

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.div { 
    text-decoration: none; 
    position:relative; 
    animation:vibrate 1s linear infinite both; 
} 

@keyframes vibrate { 
    0% { 
    transform: translate(0,0); 
    } 
    20% { 
    transform: translate(-2px, 2px); 
    } 
    40% { 
    transform: translate(-2px, -2px); 
    } 
    60% { 
    transform: translate(2px, 2px); 
    } 
    80% { 
    transform: translate(2px, -2px); 
    } 
    100% { 
    transform: translate(0); 
    } 
} 
</style> 
</head> 
<body> 
<div class="div"> 
<a href="mailto:[email protected]" id="cta">Drop me a line and let’s do cool things together!</a> 
</div> 
</body> 
</html>

Source

2017-09-17 18:31:34

J'ai ajouté une animation CSS mais ça ne marche pas et tout va bien

Répondre

Questions connexes