CSS анимация активна не продолжается?

Question

Я пытался изучить 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;
}

Любая помощь приветствуется!

Answer 1

Вы можете сделать это с помощью jQuery

ДЕМО http://jsfiddle.net/kevinPHPkevin/Uj5gC/1/

$("#download").click(function () {
    $(this).addClass("animated1");
});

Для сброса анимации просто удалите класс через 2 секунды

ДЕМО http://jsfiddle.net/kevinPHPkevin/Uj5gC/4/

 $("#download").click(function () {
    $(this).addClass("animated1");
        setInterval(function () {
    $("#download").removeClass("animated1");
    }, 2000);

});

** ИЗМЕНЕНО **

Просто для проблемы, вот вариант только CSS :target

ДЕМО http://jsfiddle.net/kevinPHPkevin/Uj5gC/2/

Answer 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';
})

DEMO

Answer 3

Демонстрация, использующая 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";
    });
}

Answer 4

Вы можете заархивировать это в чистом CSS, используя :not(:active)вместо того, чтобы просто .active.