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

【问题标题】：I added a CSS animation but it doesn't work and everything looks fine我添加了一个 CSS 动画，但它不起作用，一切看起来都很好
【发布时间】：2017-09-18 02:42:18
【问题描述】：

所以我尝试在我网站的链接中添加一个简单的振动动画，但它根本不起作用。有人发现我的代码有什么问题吗？

我从 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);
  }
}

&lt;a href="mailto:me@eduardstefan.com" id="cta"&gt;Drop me a line and let’s do cool things together!&lt;/a&gt;

【问题讨论】：

anchors 是inline。让display: inline-block;.

标签： html css animation css-animations

【解决方案1】：

您可以设置position: absolute 或将display 值更改为块级（因为a 默认为inline） 以使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); }
}

&lt;a href="mailto:me@eduardstefan.com" id="cta"&gt;Drop me a line and let’s do cool things together!&lt;/a&gt;

【讨论】：

【解决方案2】：

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:me@eduardstefan.com" id="cta">Drop me a line and let’s do cool things together!</a>
</div>
</body>
</html>

【讨论】：