CSS动画活动不继续？答案

【问题标题】：CSS animation active doesn't continue?CSS动画活动不继续？
【发布时间】：2013-08-14 19:26:18
【问题描述】：

我一直在尝试学习 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;
}

感谢任何帮助！

【问题讨论】：

我可能会使用js来添加点击动画的类。
您可以使用 jQuery addClass 但它是您拥有的链接。每当您从点击中删除时，它将跟随链接
@Richard 是的，这就是问题所在......不过，为了以防万一，我会在这里给出一个 javascript 答案。
正如其他人所指出的，使用纯 CSS 是不可能的。您可以使其重复，但释放鼠标按钮后无法使其继续。

标签： javascript html css animation continuous

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以用 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);

});

** 已编辑**

为了挑战，这里有一个使用 :target 的纯 CSS 选项

演示http://jsfiddle.net/kevinPHPkevin/Uj5gC/2/

【讨论】：

谢谢你的工作，但有没有办法让它在动画播放完后重置？

【解决方案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";
    });
}

【讨论】：

是的...正如我所想:)
@brbcoding 可以，看我的回答
@Vector 干得好，甚至没想过要使用target...不过，我不确定它是否适用于 OP 的情况，因为它依赖于 #download 目标，如果他们链接到 .exe，则 OP 将没有。
感谢@brbcoding，我认为 jQuery 最适合这里，但我认为我会包含所有选项
Cough cough -- javascript 也一样简单 :P