Html 我添加了一个CSS动画，但它没有'；我不工作，一切看起来都很好_Html_Css_Animation_Css Animations

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

html css animation

Html 我添加了一个CSS动画，但它没有'；我不工作，一切看起来都很好,html,css,animation,css-animations,Html,Css,Animation,Css Animations,所以我试着在我网站的链接中添加一个简单的振动动画，但它根本不起作用。有人看到我的代码有什么问题吗我从animista.net获取了动画代码，他们在那里工作这是我的密码： a{ 文字装饰：无；动画：振动1s线性无限二者； } @关键帧振动{ 0% { 变换：平移（0）； } 20% { 转换：转换（-2px，2px）； } 40% { 变换：translate（-2px，-2px）； } 60% { 变换：平移（2px，2px）； } 80% { 变换：平移（2px，-2px）； } 10

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

我从animista.net获取了动画代码，他们在那里工作

这是我的密码：

a{
文字装饰：无；
动画：振动1s线性无限二者；
}
@关键帧振动{
0% {
变换：平移（0）；
}
20% {
转换：转换（-2px，2px）；
}
40% {
变换：translate（-2px，-2px）；
}
60% {
变换：平移（2px，2px）；
}
80% {
变换：平移（2px，-2px）；
}
100% {
变换：平移（0）；
}
}

您可以设置

位置：绝对

或将

显示

值更改为块级别（因为

默认为

内联

），使

变换

工作

a{
文字装饰：无；
显示：块；/*或内联块*/
动画：振动1s线性无限二者；
}
@关键帧振动{
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）；}
}

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>


.分区{
文字装饰：无；
位置：相对位置；
动画：振动1s线性无限二者；
}
@关键帧振动{
0% {
变换：平移（0,0）；
}
20% {
转换：转换（-2px，2px）；
}
40% {
变换：translate（-2px，-2px）；
}
60% {
变换：平移（2px，2px）；
}
80% {
变换：平移（2px，-2px）；
}
100% {
变换：平移（0）；
}
}

NCHOR是

内联的

。使

显示：内联块。