animation to a button not working in css and html

Question

It's probably something really simple and i'm just being stupid. The button won't show the animation. When I run the code, there is no error showing.

HTML:

<button id='testBtn' class='test'>Test</button>

CSS:

.test{
  animation-name: changePos;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
@keyframes changePos {
  0%{left: 0px;}
  50%{left: 1000px;}
  100%{left: 0px;}
}

.test{
  animation-name: changePos;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
@keyframes changePos {
  0%{left: 0px;}
  50%{left: 1000px;}
  100%{left: 0px;}
}

<button id='testBtn' class='test'>Test</button>

score 0 · Accepted Answer · answered Jan 09 '22 at 04:03

0

Check whether those styles work on the element before making an animation

@keyframes changePos {
    0% {
        margin-left: 0px;
    }
    50% {
        margin-left: 1000px;
    }
    100% {
        margin-left: 0px;
    }
}

answered Jan 09 '22 at 04:03

Anuja Nimesh

408
3
13

score 0 · Answer 2 · answered Jan 09 '22 at 04:19

Add animation like this:

animation: changePos 5s infinite;

.test {
  width: 100px;
  height: 100px;
  position: relative;
  animation: changePos 3s infinite;
}
@keyframes changePos {
  0%{left: 0px;}
  50%{left: 1000px;}
  100%{left: 0px;}
}

<button id='testBtn' class='test'>Test</button>

score 0 · Answer 3 · answered Jan 09 '22 at 04:36

Set position: relative; You can also use animation in short like animation: changePos 4s linear 0s infinite alternate;

@keyframes changePos {
  0% {left: 0px;}
  50% {left: 400px;}
  100% {left: 0px;}
}

.test{
  animation-name: changePos;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  position: relative;
  /*animation: changePos 4s linear 0s infinite alternate;*/
}

<button id='testBtn' class='test'>Test</button>

animation to a button not working in css and html

3 Answers3