什么是代码，让我在HTML或css中播放和停止徽标动画

Question

让我在HTML或CSS或js中播放和停止徽标动画的代码是什么

我想让我的标志动画播放每次有人按下一个特定的按钮。

谢谢,

Answer 1

这里有一个"标志"的例子。当单击按钮时，通过向徽标添加类名来旋转。当动画结束时，类名将被移除。

var logo = document.getElementById('logo');
document.querySelector('button').addEventListener('click', e => {
logo.classList.add('rotate');
});
logo.addEventListener('animationend', e => {
e.target.classList.remove('rotate');
});

#logo {
transform: rotate(0deg);
}
.rotate {
animation: rotate 2s;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

<svg id="logo" viewBox="0 0 2 2" width="100">
<rect width="2" height="2" fill="orange"/>
</svg>
<button>Rotate</button>

Answer 2

正如sigurd-mazanti所提到的，你可以在一些按钮上设置一个点击监听器(addEventListener)，每次按钮被点击时，在你的标志元素的动画类之间切换。

const logo = document.querySelector("img");
document.querySelectorAll("button").forEach((btn) => {
let animation = "";
btn.addEventListener("click", function() {
switch (btn.id) {
case "btn1":
animation = "flash";
break;
case "btn2":
animation = "shake";
break;
case "btn3":
animation = "beat";
break;
}
logo.className = animation;
});
});

.flash {
animation: flash .7s ease infinite;
}
@keyframes flash {
from {
opacity: 1;
}
50% {
opacity: 0;
}
to {
opacity: 1;
}
}
.shake {
animation: shake 0.5s linear infinite;
}
@keyframes shake {
from {
transform: rotate(0deg);
}
25% {
transform: rotate(5deg);
}
75% {
transform: rotate(-5deg);
}
to {
transform: rotate(0deg);
}
}
.beat {
animation: beat 0.3s ease infinite;
}
@keyframes beat {
from {
transform: scale(1)
}
25% {
transform: scale(0.95)
}
to {
transform: scale(1)
}
}

<img src="https://source.unsplash.com/6TQdGPcgLZA/640x400" style="display: block; width: 200px;" alt="" />
<div style="margin: 15px;">
<button id="btn1">Flash</button>
<button id="btn2">Shake</button>
<button id="btn3">Beat</button>
</div>