Question

我正在尝试使用CSS为我的HTML添加动画。由于某种原因，它不起作用。任何帮助是极大的赞赏。

谢谢

CSS -

.shake {
    -webkit-animation: shake 1.5s;
    -moz-animation: shake 1.5s;
    -ms-animation: shake 1.5s;
    animation: shake 1.5s;
}

JS -

$( document ).ready(function() {
    $('.button1').click(function() {
        $('.compFist').addClass('shake');

    }); 
});

Answer 1

您需要添加以下CSS：

＆＃13;

@keyframes shake {
  0% {
    transform: translate(0px, 0px) rotate(0deg); }
  2% {
    transform: translate(0.5px, -1.5px) rotate(-0.5deg); }
  4% {
    transform: translate(1.5px, -0.5px) rotate(-0.5deg); }
  6% {
    transform: translate(-0.5px, -1.5px) rotate(1.5deg); }
  8% {
    transform: translate(0.5px, -0.5px) rotate(-0.5deg); }
  10% {
    transform: translate(2.5px, 2.5px) rotate(-0.5deg); }
  12% {
    transform: translate(2.5px, 0.5px) rotate(-0.5deg); }
  14% {
    transform: translate(2.5px, 0.5px) rotate(-0.5deg); }
  16% {
    transform: translate(2.5px, -0.5px) rotate(1.5deg); }
  18% {
    transform: translate(2.5px, 2.5px) rotate(0.5deg); }
  20% {
    transform: translate(2.5px, 2.5px) rotate(0.5deg); }
  22% {
    transform: translate(2.5px, 2.5px) rotate(0.5deg); }
  24% {
    transform: translate(1.5px, -0.5px) rotate(-0.5deg); }
  26% {
    transform: translate(1.5px, 1.5px) rotate(1.5deg); }
  28% {
    transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
  30% {
    transform: translate(2.5px, 1.5px) rotate(0.5deg); }
  32% {
    transform: translate(2.5px, 2.5px) rotate(1.5deg); }
  34% {
    transform: translate(-1.5px, 2.5px) rotate(0.5deg); }
  36% {
    transform: translate(2.5px, -1.5px) rotate(-0.5deg); }
  38% {
    transform: translate(1.5px, 0.5px) rotate(-0.5deg); }
  40% {
    transform: translate(-0.5px, -0.5px) rotate(0.5deg); }
  42% {
    transform: translate(-0.5px, -1.5px) rotate(0.5deg); }
  44% {
    transform: translate(-0.5px, 1.5px) rotate(1.5deg); }
  46% {
    transform: translate(0.5px, -0.5px) rotate(0.5deg); }
  48% {
    transform: translate(-0.5px, 1.5px) rotate(1.5deg); }
  50% {
    transform: translate(2.5px, 1.5px) rotate(1.5deg); }
  52% {
    transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
  54% {
    transform: translate(2.5px, 1.5px) rotate(0.5deg); }
  56% {
    transform: translate(-1.5px, 2.5px) rotate(0.5deg); }
  58% {
    transform: translate(1.5px, 2.5px) rotate(0.5deg); }
  60% {
    transform: translate(1.5px, -1.5px) rotate(-0.5deg); }
  62% {
    transform: translate(-0.5px, 0.5px) rotate(0.5deg); }
  64% {
    transform: translate(1.5px, 2.5px) rotate(0.5deg); }
  66% {
    transform: translate(-1.5px, -0.5px) rotate(1.5deg); }
  68% {
    transform: translate(0.5px, -1.5px) rotate(1.5deg); }
  70% {
    transform: translate(-0.5px, -0.5px) rotate(0.5deg); }
  72% {
    transform: translate(1.5px, 1.5px) rotate(1.5deg); }
  74% {
    transform: translate(1.5px, -0.5px) rotate(1.5deg); }
  76% {
    transform: translate(0.5px, 0.5px) rotate(-0.5deg); }
  78% {
    transform: translate(-1.5px, 0.5px) rotate(1.5deg); }
  80% {
    transform: translate(-1.5px, 0.5px) rotate(1.5deg); }
  82% {
    transform: translate(1.5px, -1.5px) rotate(-0.5deg); }
  84% {
    transform: translate(2.5px, -0.5px) rotate(-0.5deg); }
  86% {
    transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
  88% {
    transform: translate(-1.5px, 2.5px) rotate(0.5deg); }
  90% {
    transform: translate(2.5px, 0.5px) rotate(1.5deg); }
  92% {
    transform: translate(0.5px, -1.5px) rotate(1.5deg); }
  94% {
    transform: translate(-0.5px, 2.5px) rotate(-0.5deg); }
  96% {
    transform: translate(0.5px, 1.5px) rotate(0.5deg); }
  98% {
    transform: translate(1.5px, -1.5px) rotate(1.5deg); } }

＆＃13;

Answer 2

您必须添加浏览器支持才能使其在chrome和firefox中运行：

@keyframes thumb {
    0% { transform: scale(1); }
    50% {transform: scale(0.9); }
    100% { transform: scale(1); }
}
@-webkit-keyframes thumb {
    0% { -webkit-transform: scale(1); }
    50% { -webkit-transform: scale(0.9); }
    100% { -webkit-transform: scale(1); }
}

.shake:hover
{
    -webkit-animation-name: thumb;
    animation-name: thumb;
    -webkit-animation-duration: 200ms;
    animation-duration: 200ms;
    -webkit-transform-origin:50% 50%;
    transform-origin:50% 50%;
    -webkit-animation-iteration-count: 2;
    animation-iteration-count: 2;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

.shake 
{
    cursor:pointer;
}

Answer 3

试试这个

Fiddle Demo

@keyframes thumb {
    0% { transform: scale(1); }
    50% {transform: scale(0.9); }
    100% { transform: scale(1); }
}

.shake:hover
{
    animation-name: thumb;
    animation-duration: 200ms;
    transform-origin:50% 50%;
    animation-iteration-count: 2;
    animation-timing-function: linear;
}

.shake 
{
    cursor:pointer;
}

CSS动画（摇动）

3 个答案: