Playing CSS animation on button click won't work

Question

I'm trying to call a CSS animation on the event that this button is pressed, after doing some research it seems classList is the way forward. It's late and I think I'm being stupid but I cannot get it to work.

HTML:

<body>
<img id="myID" class="mouse" src="mouse.png" onclick="ani()">
<script src="script.js"></script>
</body>

<head>
<link href="styles.css" rel="stylesheet"/>
</head>

JavaScript:

function ani()
{
  document.getElementById('myID').classList.add = 'animate';
}

CSS:

.animate
{
  animation: test 1s linear forwards;
}
@keyframes test
{
  100%
{
  transform: translateX(calc(8%));
}
}

Wax · Accepted Answer · 2021-07-23 04:54:25Z

2

add is a function so the way you are using classList needs a slight change from:

document.getElementById('myID').classList.add = 'animate';

to:

document.getElementById('myID').classList.add('animate');

function ani(){
  document.getElementById('myID').classList.add('animate');
}

.animate {
  animation: test 1s linear forwards;
}

@keyframes test {
  100% {
    transform: translateX(calc(8%));
  }
}

<body>
    <img id="myID" class="mouse" src="https://stock.wikimini.org/w/images/d/d4/Mickey_Mouse.png" onclick="ani()">
</body>

edited Jul 23, 2021 at 4:54

Wax

6251 gold badge5 silver badges15 bronze badges

answered Jul 22, 2021 at 21:30

A Haworth

37.6k4 gold badges17 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

A444433232 Over a year ago

Still having no luck unfortunately.. I feel like I'm missing something really simple.

A Haworth Over a year ago

someone has kindly added a snippet to show what happens. Could you try that and then describe what isn't working for you? One thing is, are you expecting a second click to do something animation-wise?

Collectives™ on Stack Overflow

Playing CSS animation on button click won't work

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related