Как изменить анимацию CSS на jquery animate()?

Question

Я студенческая форма Южная Корея, изучающая кодирование jquery mobile. и я хочу сделать мобильное веб-приложение! Я делал анимацию в игровых автоматах с запуском дрожания. И я сделал это с помощью кода CSS. Но для начала этой анимации мне пришлось использовать «js». Итак, я хочу изменить (JQuery код одушевленные) из этого "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() { 

}); 
} 
}; 

~~~ и это 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 сдвигается в отдельный блок CSS, где, когда .lot имеет класс .startAnimation, каждый из блока теперь будет иметь 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; 
 
}