1
私は現在「jquery mobile」でモバイルウェブアプリを作っています。 私は背景のアニメーションを振り始めます。 git.hubから「shake.js」をダウンロードし、コードを自分で作成しました。それは動作しません。私を助けてください。ありがとう!!shake.jsでCSSアニメーションを開始するにはどうすればよいですか？
<div data-role="page" id="lotp" data-url="lotp">
<div class="lot" data-position="fixed">
<div data-role= "content" id="a"></div>
<div data-role= "content" id="b"></div>
<div data-role= "content" id="c"></div>
</div>
<script>
window.onload = function() {
//create a new instance of shake.js.
var myShakeEvent = new Shake({
threshold: 15
});
// start listening to device motion
myShakeEvent.start();
// register a shake event
window.addEventListener('shake', shakeEventDidOccur, false);
//shake event callback
function shakeEventDidOccur() {
//put your own code here etc.
$('#lot').addClass('startAnimation');
}
};
</script>
とCSSアニメーションコードその..です
.lot{
padding: 10px;
margin:10px;
overflow: hidden;
max-height: 680px;
max-width: 270px;
}
#a {
background-size: auto;
background-image: url(lot1.jpg);
background-position: top;
background-repeat:repeat-x;
animation: animatedBackground 5s ease;
animation-iteration-count: 1;
animation-direction: alternate;
}
#b {
background-size:auto;
background-image: url(lot2.jpg);
background-position: top;
background-repeat:repeat-x;
animation: animatedBackground2 5s ease;
animation-iteration-count: 1;
animation-direction: alternate;
}
#c {
background-size:auto;
background-image: url(lot3.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; }
}
.lot.startAnimation #a {
animation: animatedBackground 5s ease;
}
.lot.startAnimation #b {
animation: animatedBackground2 5s ease;
}
.lot.startAnimation #c {
animation: animatedBackground3 5s ease;
}