what is the code that allow me to play and stop logo animation in html or css or js

I'm trying to make my logo animation play every time someone press a specific button.

Thanks,

CodePudding user response：

Here you have an example of a "logo" that rotates when the button is clicked by adding a class name to the logo. When the animation has ended the class name will be removed.

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>

CodePudding user response：

As sigurd-mazanti mentioned, You can set a Click Listener (addEventListener) on some buttons and each time a button is clicked, switch between animation classes on your logo's element.

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>