2

私はCSSアニメーションを学ぼうとしていて、それらを把握し始めていますが、アニメーション効果に問題があります. ダウンロードボタンであるセクションにアニメーションクラスが割り当てられています。クリックするとアニメーションがクリックの範囲で再生され、クリックしたままにするとアニメーション全体が再生されます。クリックアンドホールドではなく、クリック時にアニメーションを最後まで再生したい。

クラスが適用される Html セクションは次のとおりです。

<a href="software/ASC.exe">
                        <section id="download" class="animated" title="Download ASC">
                            Download
                        </section>
                    </a>

CSS アニメーション クラスは次のとおりです。

.animated { 

}
.animated:active {
    -webkit-animation:fadeOutUp 2s;
    -moz-animation:fadeOutUp 2s;
    -o-animation:fadeOutUp 2s;
    -ms-animation:fadeOutUp 2s;
    animation:fadeOutUp 2s;
    box-shadow:3px 1px 20px 4px #0099CC;
}

@-webkit-keyframes fadeOutUp {
0% {
    opacity: 1;
    -webkit-transform: translateY(0);
}

100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
}
}
@-moz-keyframes fadeOutUp {
0% {
    opacity: 1;
    -moz-transform: translateY(0);
}

100% {
    opacity: 0;
    -moz-transform: translateY(-20px);
}
}
@-o-keyframes fadeOutUp {
0% {
    opacity: 1;
    -o-transform: translateY(0);
}

100% {
    opacity: 0;
    -o-transform: translateY(-20px);
}
}
@keyframes fadeOutUp {
0% {
    opacity: 1;
    transform: translateY(0);
}

100% {
    opacity: 0;
    transform: translateY(-20px);
}
}

.fadeOutUp {
-webkit-animation-name: fadeOutUp;
-moz-animation-name: fadeOutUp;
-o-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}

どんな助けでも大歓迎です！

4

3 に答える 3

2

HTML

<a href="#" id="buttonLink">
  <section id="download" class="animated" title="Download ASC">
     Download
  </section>
</a>

CSS

.clicked {
    -webkit-animation:fadeOutUp 2s;
    -moz-animation:fadeOutUp 2s;
    -o-animation:fadeOutUp 2s;
    -ms-animation:fadeOutUp 2s;
    animation:fadeOutUp 2s;
    box-shadow:3px 1px 20px 4px #0099CC;
}

JavaScript

var el = document.getElementById('buttonLink');
el.addEventListener('click', function(){
    document.getElementById('download').className = 'clicked';
})

デモ

于 2013-08-14T19:35:44.280 に答える
1

その「アニメーション」クラスを追加するために JavaScript を使用するデモ。CSS からそれを行う方法を知っている人はいますか (ちょっと不可能ですが :D)? 面白いでしょう。ここでプランクhttp://plnkr.co/edit/IhkmgKQ9Od0dyb3HFuEv?p=preview

window.onload = function() {
    var btn = document.getElementById("download");

    btn.addEventListener("click", function(e) {
        this.className = "animated";
    });
}
于 2013-08-14T19:35:42.160 に答える