.flip按钮图标-CSS-在网页加载时使其抖动

我是CSS/Divi新手，但我在谷歌上做过，并花了2个多小时尝试做这件事。。。所以请给我一些放松

很高兴给慷慨的帮手小费，也许可以帮我省下半天的时间

CTA按钮有一个图标>>，我希望它在页面加载时能够震动。（很高兴它在鼠标悬停时不停地摇晃）

当前代码（悬停时工作正常，但没有想象中的那么好）

//试图使这项工作成功，但失败了

    0% { transform: translate(0px); }
   25% { transform: translate(5px); }
   50% { transform: translate(0px); }
   75% { transform: translate(5px); }
  100% { transform: translate(0px); }

---

不管怎么说，你明白了。。。。哈哈

看看我刚刚创建的这个例子：（在网上找到了一个很好的震动动画）

。翻转按钮图标：悬停{
动画：抖动0.82秒三次贝塞尔（.36、.07、.19、.97）二者；
变换：translate3d（0,0,0）；
背面可见性：隐藏；
透视图：1000px；
}
@关键帧抖动{
10%,
90% {
转换：translate3d（-1px，0，0）；
}
20%,
80% {
变换：translate3d（2px，0，0）；
}
30%,
50%,
70% {
变换：translate3d（-4px，0，0）；
}
40%,
60% {
变换：translate3d（4px，0，0）；
}
}

---

如果您还没有，我建议您先熟悉一下，以便对这一领域有一个良好的总体了解

无论如何，我已经使用了您自己的关键帧来创建以下内容，这些内容将在页面加载时抖动。因为您希望加载动画是无限的，所以我删除了悬停动画

编辑：修改代码以隔离按钮的内部文本，并仅对其设置动画。您可以在此处快速查看：

>>

.shakyText
{
动画：摇动1s无限；
}
@关键帧抖动{
0%{transform:translate（0px）；}
25%{transform:translate（5px）；}
50%{transform:translate（0px）；}
75%{transform:translate（5px）；}
100%{transform:translate（0px）；}
}

你好，库萨，谢谢。这几乎完美，比我的好。它确实震动了整个按钮，而不仅仅是图标。。。？可能是迪维出了问题或者我的按钮坏了。今晚晚些时候我会在一个新按钮上再试一次。。。不管怎样，如果这是我能做到的最好的话，我都会很高兴的。谢谢=）嘿，路易斯！啊，我现在明白了——看看我编辑过的答案，它应该达到你想要的。为了隔离并单独设置按钮文本的动画，我必须将其作为外部按钮的子元素。谢谢大家。非常感谢。这也应该对其他新手有所帮助。我已经有很长一段时间没有使用Java了，你可以想象noob会重新使用一切。

    0% { transform: translate(0px); }
   25% { transform: translate(5px); }
   50% { transform: translate(0px); }
   75% { transform: translate(5px); }
  100% { transform: translate(0px); }