每 5 秒/间隔运行一次动画答案

【问题标题】：Run animation every 5 seconds/interval每 5 秒/间隔运行一次动画
【发布时间】：2017-11-06 21:03:46
【问题描述】：

我想每 5 秒摇一下这个文本，所以我尝试在 CSS 中实现一个动画并通过 jQuery 设置一个间隔，但似乎有些问题......并且知道缺少什么？这是一个小提琴：https://jsfiddle.net/s909gu2s/1/

.shk {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-animation-name: shake;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
}

@keyframes shakeMe {
    10%, 90% {
        transform: translate3d(-5px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(5px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-5px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(5px, 0, 0);
    }
}

$(document).ready(function() {
    setInterval(function() {
        $(".shk").css("animation", "shakeMe");
    }, 500);
});

<div class="shk">Shake me</div>

【问题讨论】：

CSS wiggle/shake effect的可能重复

标签： javascript jquery css

【解决方案1】：

您可以使用纯 CSS 来完成，无需 JS/jQuery。为了实现这一点，我将animation-duration 设置为 5 秒，然后将所有百分比值乘以 0.2（因为 5 秒中有 1 秒 => 20%）。然后在最高百分比值之后转换回 0px。瞧，每 5 秒震动一次：

.shk {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    animation-name: shakeMe;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes shakeMe {
    2%, 18% {
        transform: translate3d(-5px, 0, 0);
    }

    4%, 16% {
        transform: translate3d(5px, 0, 0);
    }

    6%, 10%, 14% {
        transform: translate3d(-5px, 0, 0);
    }

    8%, 12% {
        transform: translate3d(5px, 0, 0);
    }
    
    18.1% {
        transform: translate3d(0px, 0, 0);
    }
}

&lt;div class="shk"&gt;Shake me&lt;/div&gt;

【讨论】：

【解决方案2】：

Working fiddle.

首先你应该在CSS规则中调整动画的名称shake以匹配名称正确的名称shakeMe：

.shk {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-animation-name: shake;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
}

然后您可以在间隔内切换类以每 X 毫秒重新激活测试：

$(document).ready(function() {
    setInterval(function() {
        $("#target").toggleClass('shk');
    }, 500);
});

希望这会有所帮助。

$(document).ready(function() {
  setInterval(function() {
    $("#target").toggleClass('shk');
  }, 5000);
});

.shk {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-animation-name: shakeMe;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 0s;
}

@keyframes shakeMe {
  10%,
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(5px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-5px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(5px, 0, 0);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="target" class="shk">Shake me</div>

【讨论】：