我添加了一个CSS动画，但它不工作，一切都看起来很好

-1

所以我试图添加一个简单的振动动画到我的网站的链接，但它根本不起作用。任何人都看到我的代码有什么问题？我添加了一个CSS动画，但它不工作，一切都看起来很好

我从animista.net动画代码，并有他们工作

这里是我的代码：

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>

来源

2017-09-17 Eduard Stefan

'a'nchors是'inline'。做这个'display：inline-block;'。 – Abhitalks

您可以设置position: absolute或更改display值阻止级别（因为a默认为inline） for transform工作。

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>

来源

2017-09-17 13:28:02

的CSS动画无法用于定位锚。所以请使用DIV，方便动画效果

<!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>

来源

2017-09-17 18:31:34

我添加了一个CSS动画，但它不工作，一切都看起来很好

回答

相关问题