我添加了一個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動畫，但它不工作，一切都看起來很好

回答

相關問題