https://daneden.me/animate/から自分のウェブサイトにbounceinUpを実装しようとしています。
ボタンをクリックする代わりに、2〜3秒後に上記を自動的に実行するdivボックスに入れようとしています。
HTML
<div class="" id="animateTest">
<p style="opacity: 0.8;" data-test="bounceinUp">Testing</p>
</div>
CSS
@-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
}
}
@-moz-keyframes bounceInUp {
0% {
opacity: 0;
-moz-transform: translateY(2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px);
}
100% {
-moz-transform: translateY(0);
}
}
@-o-keyframes bounceInUp {
0% {
opacity: 0;
-o-transform: translateY(2000px);
}
60% {
opacity: 1;
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px);
}
100% {
-o-transform: translateY(0);
}
}
@keyframes bounceInUp {
0% {
opacity: 0;
transform: translateY(2000px);
}
60% {
opacity: 1;
transform: translateY(-30px);
}
80% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
#animateTest {
-webkit-animation-duration: 1s;
-webkit-animation-delay: .2s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 1s;
-moz-animation-delay: .2s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-ms-animation-duration: 1s;
-ms-animation-delay: .2s;
-ms-animation-timing-function: ease;
-ms-animation-fill-mode: both;
-o-animation-duration: 1s;
-o-animation-delay: .2s;
-o-animation-timing-function: ease;
-o-animation-fill-mode: both;
animation-duration: 1s;
animation-delay: .2s;
animation-timing-function: ease;
animation-fill-mode: both;
}
ページには表示されていませんが、これはJavaScriptだと思います(JavaScriptに関して検索したチュートリアルはありません)。
<script>
function testAnim(x) {
$('#animateTest').removeClass().addClass(x);
var wait = window.setTimeout( function(){
$('#animateTest').removeClass()},
1300
);
}
</script>
とにかく、私がこれを行うとき、それはそれに何もしません。私は何を間違えたのだろうか?これが非常に簡単な質問に聞こえる場合は申し訳ありませんが、私は HTML と JavaScript の学習を始めたばかりです。
前もって感謝します、