Html CSS3不工作抖动动画效果

在

DIV

action中，我有一个CSS3动画代码用于抖动效果：（我从中复制此代码）

CSS代码：

.shake {
    -webkit-animation-name: shake ;
    animation-name: shake;
}
@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}
@keyframes shake {
    0%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

现在，在行动时，我看到div摇动行动不起作用

要查看css效果，如何修复此问题

---

缺少

动画类。查看以查找有关Animate.css如何工作的更多信息。实际上，您不需要复制代码。您可以将库包含到文档的标题中


@-webkit关键帧抖动{
0%, 100% {
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）
}
10%,
30%,
50%,
70%,
90% {
-webkit转换：translate3d（-10px，0，0）；
转换：translate3d（-10px，0，0）
}
20%,
40%,
60%,
80% {
-webkit转换：translate3d（10px，0，0）；
转换：translate3d（10px，0，0）
}
}
@关键帧抖动{
0%, 100% {
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）
}
10%,
30%,
50%,
70%,
90% {
-webkit转换：translate3d（-10px，0，0）；
转换：translate3d（-10px，0，0）
}
20%,
40%,
60%,
80% {
-webkit转换：translate3d（10px，0，0）；
转换：translate3d（10px，0，0）
}
}
/*添加这个类*/
.动画{
-webkit动画持续时间：1s；
动画持续时间：1s；
-webkit动画填充模式：两者都有；
动画填充模式：两者都有；
}
.摇{
-webkit动画名称：shake；
动画名称：shake
}
摇动此文本
工作时，您错过的动画持续时间：4s

  @-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}
@keyframes shake {
    0%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}
.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
    animation-duration: 4s;
}

小提琴：
这是因为你没有给
动画持续时间：1s

给它解决你的问题

.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
    animation-duration: 1s;
    -webkit-animation-duration:1s;
}

查看您更新的
谁在疯狂投票反对？我的最后一个答案也是这样，虽然正确。不知道，但我认为OP的问题与动画。CSS，这就是为什么我增加了额外的<代码>动画< <代码>类。当然，没有它也可以做到，但是关于animate.css的作者，我认为这是一个好主意。这里所有的答案都被否决了。我不知道为什么，所有答案都被否决了correct@ketan不知道为什么？不是我。