アニメーションを5秒間隔で実行する

Question

このテキストを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> 

Answer 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); 
 
    } 
 
}

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

Answer 2

Working fiddle：ここではフィドルです。

あなたが右shakeMeに名前を付ける名前をのmatchするCSSルールでアニメーションshakeの名前を調整する必要がありますまず第一に：

.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>