Question

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

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

Answer 1

您可以设置position: absolute或将display值更改为块级（因为a默认为inline） {{1工作。

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

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

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

2 个答案: