CSS animation active doesn't continue?

Question

I've been trying to learn css animations and I'm starting to get a grip on them but I'm having an issue an animation effect. I have an animation class assigned to a section that is a download button when I click it the animation plays for the extent of the click, if i click and hold it plays the whole animation. I want the animation to play all the way through on on click, not a click and hold.

Heres the Html section the class is applied to:

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

Here is the CSS animation class:

.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;
}

Any help is appreciated!

I'd probably use js to add the class that has the animation on click. — brbcoding, Aug 14 '13 at 19:30
You could addClass with jQuery but it's a link you have. Anytime you remove from the click it will follow the link — Kevin Lynch, Aug 14 '13 at 19:34
@Richard yeah, that's the issue... I'll throw a javascript answer down here for good measure though, just in case. — brbcoding, Aug 14 '13 at 19:34
As others have pointed out, it's impossible to do with pure CSS. You can make it *repeat*, but you can't make it continue after you release the mouse button. — Richard, Aug 14 '13 at 19:43

score 2 · Answer 1 · answered Aug 14 '13 at 19:35

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

Nicolae Olariu · Answer 2 · 2013-08-14T19:41:04.167

1

A demo that uses javascript to add that 'animated' class. Anyone knows a way to do that from CSS (kinda' impossible though :D)? It'd be interesting. Plunk here http://plnkr.co/edit/IhkmgKQ9Od0dyb3HFuEv?p=preview

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

    btn.addEventListener("click", function(e) {
        this.className = "animated";
    });
}

edited Aug 14 '13 at 19:41

answered Aug 14 '13 at 19:35

Nicolae Olariu

2,487
2
18
30

Yeah... as I thought :) – Nicolae Olariu Aug 14 '13 at 19:42
@brbcoding yes it can, see my answer – Kevin Lynch Aug 14 '13 at 20:20
@Vector nice job, didn't even think to use `target`... Though, I'm not sure if it'll work in OP's situation because it relies on the `#download` target, which OP won't have if they are linking to an `.exe`. – brbcoding Aug 14 '13 at 20:24
thanks @brbcoding, I think jQuery is best suited here, but thought i'd include all options – Kevin Lynch Aug 14 '13 at 20:27
*Cough* *cough* -- javascript is just as easy :P – brbcoding Aug 14 '13 at 20:28

Kevin Lynch · Accepted Answer · 2013-08-14T20:41:46.790

1

You could do it with jQuery

DEMO http://jsfiddle.net/kevinPHPkevin/Uj5gC/1/

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

To reset the animation just remove the class after 2 seconds

DEMO http://jsfiddle.net/kevinPHPkevin/Uj5gC/4/

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

});

** EDITED**

Just for the challenge, here's a CSS only option using :target

DEMO http://jsfiddle.net/kevinPHPkevin/Uj5gC/2/

edited Aug 14 '13 at 20:41

answered Aug 14 '13 at 19:51

Kevin Lynch

24,427
3
36
37

Thanks that worked but is there a way to make it reset once the animation plays through? – Tyharo Aug 14 '13 at 20:15

score 1 · Answer 4 · answered May 03 '22 at 17:25

1

You can archieve this in pure CSS by using :not(:active) instead of just .active.

answered May 03 '22 at 17:25

Theodor Peifer

3,097
4
17
30

If you want to prevent that the animation starts on page load, just add a :focus to the selector. – Marten Jul 07 '22 at 15:50

CSS animation active doesn't continue?

4 Answers4