CSSアニメーションをjquery animate（）コードに変更するにはどうすればよいですか？

Question

私はコーディングjquery mobileを研究している韓国の学生です。私はモバイルウェブアプリを作りたい！私は揺れ始めのスロットマシンアニメーションを作っていました。そして私はCSSコードで作った。しかし、このアニメーションを開始するには、私は 'js'を使用しなければなりませんでした。だから、私はこの "CSS"

<script> 
window.onload = function() { 
var myShakeEvent = new Shake({ 
threshold: 15 
}); 
myShakeEvent.start(); 
window.addEventListener('shake', shakeEventDidOccur, false); 
function shakeEventDidOccur() { 
$('#lot').animate({ 

~~~here i want to input the animation.~~ 

}, 5000, function() { 

}); 
} 
}; 

から（jqueryのアニメーションコード）を変更したい~~~これは、CSSアニメーションである。~~

<div data-role="main" class="lot"> 
<div id="a"></div> 
<div id="b"></div> 
<div id="c"></div> 
</div> 


<style> 
*{ padding: 38px; 
margin:1px; 
overflow: hidden; 
}        
.lot{ 
max-height: 880px; 
max-width: 270px; 

} 
#a { 
background-size:contain; 
background-image: url(b1.jpg); 
background-position: top; 
background-repeat:repeat-x;  
animation: animatedBackground 5s ease; 
animation-iteration-count: 1; 
animation-direction: alternate; 
} 
#b { 
background-size:contain; 
background-image: url(b2.jpg); 
background-position: top; 
background-repeat:repeat-x;  
animation: animatedBackground2 5s ease; 
animation-iteration-count: 1; 
animation-direction: alternate; 
} 
#c { 
background-size:contain; 
background-image: url(b3.jpg); 
background-position: top; 
background-repeat:repeat-x;  
animation: animatedBackground3 5s ease; 
animation-iteration-count: 1; 
animation-direction: alternate; 
} 
@keyframes animatedBackground { 
from { background-position: 0 0; } 
50% { background-position: 5000px 0; } 
to { background-position: 0 0; } 
} 
@keyframes animatedBackground2 { 
from { background-position: 0 0; } 
50% { background-position: -5000% 0; } 
to { background-position: 0 0; } 
} 
@keyframes animatedBackground3 { 
from { background-position: 0 0; } 
50% { background-position: 4000% 0; } 
to { background-position: 0 0; } 
} 
</style> 

Answer 1

CSSアニメーションとjQueryのアニメーションは、2つの異なるものです。

すでにCSSアニメーションキーフレームが定義されているため、animationプロパティを適用するだけです。

shakeEventDidOccurは、アニメーションの開始またはジャンプをジャンプする関数であるとします。 animationプロパティが.lotがクラス.startAnimationを持っている別のCSSブロックにシフトしていることを

通知は、ブロックのそれぞれは、今のアニメーションを開始しますするanimation性質を持っています。

function shakeEventDidOccur() { 
 
    $('#lot').addClass('startAnimation'); 
 
}

#a { 
 
    background-size: contain; 
 
    background-image: url(b1.jpg); 
 
    background-position: top; 
 
    background-repeat: repeat-x; 
 
    animation-iteration-count: 1; 
 
    animation-direction: alternate; 
 
} 
 
#b { 
 
    background-size: contain; 
 
    background-image: url(b2.jpg); 
 
    background-position: top; 
 
    background-repeat: repeat-x; 
 
    animation-iteration-count: 1; 
 
    animation-direction: alternate; 
 
} 
 
#c { 
 
    background-size: contain; 
 
    background-image: url(b3.jpg); 
 
    background-position: top; 
 
    background-repeat: repeat-x; 
 
    animation-iteration-count: 1; 
 
    animation-direction: alternate; 
 
} 
 
@keyframes animatedBackground { 
 
    from { background-position: 0 0; } 
 
    50% { background-position: 5000px 0; } 
 
    to { background-position: 0 0; } 
 
} 
 
@keyframes animatedBackground2 { 
 
    from { background-position: 0 0; } 
 
    50% { background-position: -5000% 0; } 
 
    to { background-position: 0 0; } 
 
} 
 
@keyframes animatedBackground3 { 
 
    from { background-position: 0 0; } 
 
    50% { background-position: 4000% 0; } 
 
    to { background-position: 0 0; } 
 
} 
 

 
.lot.startAnimation #a { 
 
    animation: animatedBackground 5s ease; 
 
} 
 
.lot.startAnimation #b { 
 
    animation: animatedBackground2 5s ease; 
 
} 
 
.lot.startAnimation #c { 
 
    animation: animatedBackground3 5s ease; 
 
}