直接从演示复制CSS动画时不工作

我正在尝试使用CSS（buzz out）动画，如图所示

在演示中效果很好，我复制了相关的CSS，但无法在网站上使用，所以我甚至做了一个简单的，但仍然不起作用

请有人指出我明显遗漏了什么，因为这是CSS似乎包含的所有内容，我有点困惑于它如何在演示中使用相同的样式声明，而不是在JSFIDLE中

下面以及JSFIDLE中包含的代码片段

[class^=“hvr-”]{
/*显示：内联块*/
/*垂直对齐：中间对齐*/
边缘：.4em；
填充：1em；
光标：指针；
背景：#e1e1；
文字装饰：无；
颜色：#666；
-webkit点击高亮颜色：rgba（0,0,0,0）；
}
.hvr退出{
显示：内联块；
垂直对齐：中间对齐；
-webkit转换：translateZ（0）；
变换：translateZ（0）；
长方体阴影：0 1px rgba（0,0,0,0）；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
-moz osx字体平滑：灰度；
}
.hvr buzz out:悬停，.hvr buzz out:聚焦，.hvr buzz out:激活{
-webkit动画名称：hvr buzz out；
动画名称：hvr buzz out；
-webkit动画持续时间：0.75秒；
动画持续时间：0.75秒；
-webkit动画计时功能：线性；
动画计时功能：线性；
-webkit动画迭代计数：1；
动画迭代次数：1；
}

---

您还需要定义动画的

@关键帧

：

@-webkit关键帧hvr嗡嗡响{
10% {
-webkit变换：translateX（3px）旋转（2deg）；
变换：translateX（3px）旋转（2deg）；
}
20% {
-webkit变换：translateX（-3px）旋转（-2deg）；
变换：translateX（-3px）旋转（-2deg）；
}
30% {
-webkit变换：translateX（3px）旋转（2deg）；
变换：translateX（3px）旋转（2deg）；
}
40% {
-webkit变换：translateX（-3px）旋转（-2deg）；
变换：translateX（-3px）旋转（-2deg）；
}
50% {
-webkit变换：translateX（2px）旋转（1deg）；
变换：translateX（2px）旋转（1deg）；
}
60% {
-webkit变换：translateX（-2px）旋转（-1deg）；
变换：translateX（-2px）旋转（-1deg）；
}
70% {
-webkit变换：translateX（2px）旋转（1deg）；
变换：translateX（2px）旋转（1deg）；
}
80% {
-webkit变换：translateX（-2px）旋转（-1deg）；
变换：translateX（-2px）旋转（-1deg）；
}
90% {
-webkit变换：translateX（1px）旋转（0）；
变换：translateX（1px）旋转（0）；
}
100% {
-webkit变换：translateX（-1px）旋转（0）；
变换：translateX（-1px）旋转（0）；
}
}
@关键帧hvr发出嗡嗡声{
10% {
-webkit变换：translateX（3px）旋转（2deg）；
变换：translateX（3px）旋转（2deg）；
}
20% {
-webkit变换：translateX（-3px）旋转（-2deg）；
变换：translateX（-3px）旋转（-2deg）；
}
30% {
-webkit变换：translateX（3px）旋转（2deg）；
变换：translateX（3px）旋转（2deg）；
}
40% {
-webkit变换：translateX（-3px）旋转（-2deg）；
变换：translateX（-3px）旋转（-2deg）；
}
50% {
-webkit变换：translateX（2px）旋转（1deg）；
变换：translateX（2px）旋转（1deg）；
}
60% {
-webkit变换：translateX（-2px）旋转（-1deg）；
变换：translateX（-2px）旋转（-1deg）；
}
70% {
-webkit变换：translateX（2px）旋转（1deg）；
变换：translateX（2px）旋转（1deg）；
}
80% {
-webkit变换：translateX（-2px）旋转（-1deg）；
变换：translateX（-2px）旋转（-1deg）；
}
90% {
-webkit变换：translateX（1px）旋转（0）；
变换：translateX（1px）旋转（0）；
}
100% {
-webkit变换：translateX（-1px）旋转（0）；
变换：translateX（-1px）旋转（0）；
}
}
[class^=“hvr-”]{
/*显示：内联块*/
/*垂直对齐：中间对齐*/
边缘：.4em；
填充：1em；
光标：指针；
背景：#e1e1；
文字装饰：无；
颜色：#666；
-webkit点击高亮颜色：rgba（0,0,0,0）；
}
.hvr退出{
显示：内联块；
垂直对齐：中间对齐；
-webkit转换：translateZ（0）；
变换：translateZ（0）；
长方体阴影：0 1px rgba（0,0,0,0）；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
-moz osx字体平滑：灰度；
}
.hvr buzz out:悬停，.hvr buzz out:聚焦，.hvr buzz out:激活{
-webkit动画名称：hvr buzz out；
动画名称：hvr buzz out；
-webkit动画持续时间：0.75秒；
动画持续时间：0.75秒；
-webkit动画计时功能：线性；
动画计时功能：线性；
-webkit动画迭代计数：1；
动画迭代次数：1；
}

---

您还需要定义动画的

@关键帧

：

@-webkit关键帧hvr嗡嗡响{
10% {
-webkit变换：translateX（3px）旋转（2deg）；
变换：translateX（3px）旋转（2deg）；
}
20% {
-webkit变换：translateX（-3px）旋转（-2deg）；
变换：translateX（-3px）旋转（-2deg）；
}
30% {
-webkit变换：translateX（3px）旋转（2deg）；
变换：translateX（3px）旋转（2deg）；
}
40% {
-webkit变换：translateX（-3px）旋转（-2deg）；
变换：translateX（-3px）旋转（-2deg）；
}
50% {
-webkit变换：translateX（2px）旋转（1deg）；
变换：translateX（2px）旋转（1deg）；
}
60% {
-webkit变换：translateX（-2px）旋转（-1deg）；
变换：translateX（-2px）旋转（-1deg）；
}
70% {
-webkit变换：translateX（2px）旋转（1deg）；
变换：translateX（2px）旋转（1deg）；
}
80% {
-webkit变换：translateX（-2px）旋转（-1deg）；
变换：translateX（-2px）旋转（-1deg）；
}
90% {
-webkit变换：translateX（1px）旋转（0）；
变换：translateX（1px）旋转（0）；
}
100% {
-webkit转换：translate