How can I repeat an animation (CSS and Javascript onclick)

Question

How can I repeat an animation which is set with CSS and Javascript by onclick? I am a very beginner code writer and know HTML, CSS and Javascript. I do not know why the following online click and function just work once. I will appreciate if you help me.

Code

function discharge() {
    document.getElementById("electron").style.visibility = "visible";
    document.getElementById("electron").style.WebkitAnimation = "mymove 5s 1   backwards"; // Code for Chrome, Safari, and Opera
    document.getElementById("submit").style.backgroundColor = "lightblue";
    document.getElementById("submit").style.boxShadow = "0px 3px 3px red";
    document.getElementById("submit1").style.backgroundColor = "#4CAF50";
    document.getElementById("submit1").style.boxShadow = "0px 0px 0px red";
}

#electron {
    position: relative;
    left: -10px;
    visibility: hidden;
}
@-webkit-keyframes mymove {
    0% {
        left: 0px;
        top: 0px;
    }
    25% {
        left: -32px;
        top: 0px;
    }
    50% {
        left: -32px;
        top: -20px;
    }
    75% {
        left: 158px;
        top: -20px;
    }
    100% {
        left: 158px;
        top: 5px;
    }
}

<div>
    <button id="submit" onclick="discharge()">Discharge</button>
    <button id="submit1">charge</button>
</div>

<div id="electron">
    <br /><i class="fa fa-minus-circle"></i>
    <br /><i class="fa fa-minus-   circle"></i>
    <br />
</div>

Where's charge()?

Zed
– Zed

2017-02-15 17:15:40 +00:00
Commented Feb 15, 2017 at 17:15 — Zed
– Zed, Commented Feb 15, 2017 at 17:15

Jijo Cleetus · Accepted Answer · 2017-02-16 10:58:07Z

Please use this answer to solve your issues

html

    <div>
  <button id="submit" onclick="discharge()">Discharge</button>
  <button id="submit1" onclick="charge()">charge</button>
</div>

<div id="electron">
  <br/><i class="fa fa-minus-circle"></i>
  <br/><i class="fa fa-minus-   circle"></i>
  <br/>
</div>

javascript

discharge = function() {
  document.getElementById("electron").style.visibility = "visible";
  document.getElementById("electron").style.WebkitAnimation = "mymove 5s 1   backwards"; // Code for Chrome, Safari, and Opera
  document.getElementById("submit").style.backgroundColor = "lightblue";
  document.getElementById("submit").style.boxShadow = "0px 3px 3px red";
  document.getElementById("submit1").style.backgroundColor = "#4CAF50";
  document.getElementById("submit1").style.boxShadow = "0px 0px 0px red";
}

charge = function(){
document.getElementById("electron").removeAttribute('style');
document.getElementById("submit").removeAttribute('style');
document.getElementById("submit1").removeAttribute('style');
}

No change in css.

Jijo Cleetus · Accepted Answer · 2017-02-15 17:31:00Z

1

the given javascript code having an issue with defining function. Please use discharge = function (){ There are some missing elements like electron and li Also i cannot find any function called charge()

So i have commented missing elements and provided below.

discharge = function () {
// document.getElementById("electron").style.visibility = "visible";
// document.getElementById("li").style.visibility = "visible";
// document.getElementById("electron").style.WebkitAnimation = "mymove 5s 1   backwards"; // Code for Chrome, Safari, and Opera
document.getElementById("submit").style.backgroundColor = "lightblue";
document.getElementById("submit").style.boxShadow = "0px 3px 3px red";
document.getElementById("submit1").style.backgroundColor = "#4CAF50";
document.getElementById("submit1").style.boxShadow = "0px 0px 0px red";}

answered Feb 15, 2017 at 17:31

Jijo Cleetus

2,8671 gold badge13 silver badges19 bronze badges

7 Comments

Peter Over a year ago

Thanks. You are right. This is the correct version:

Peter Over a year ago

I fixed in the question section. Thanks for your help. I look forward to hearing from you.

Jijo Cleetus Over a year ago

Yes, that also fine.

Peter Over a year ago

Would you please help how I can fix this problem. Thanks.

Jijo Cleetus Over a year ago

You have changed the function and it is working. what else is the issue?

|

Matt Ellen · Accepted Answer · 2021-07-05 09:41:03Z

How I managed it was with a timeout and an extra class:

function doFadeOut()
{
  let f = document.getElementById('f');
  f.classList.remove('unseen');
  setTimeout(() =>
  {
    f.classList.add('unseen');
  }, 2000);
}

#f
{
    opacity:0%;
    animation: fadeout 2s linear 1;
}

    #f.unseen
    {
        visibility: hidden;
        opacity:100%;
        animation:inherit;
    }

@keyframes fadeout
{
    from
    {
        opacity: 100%;
    }

    to
    {
        opacity: 0%;
    }
}

<div id="f" class="unseen">
this will appear then fade out with every click of the button below
</div>
<button onclick="doFadeOut()">show the message</button>

The main trick seems to be switching the CSS animation property at the end of the animation.

The way I have done it couples the time in the CSS with the time in the JS, making it a little brittle, so if there is an easy way to only set the time once, that would be great.

Collectives™ on Stack Overflow

How can I repeat an animation (CSS and Javascript onclick)

Code

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Code

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related