How to trigger a CSS animation?

Question

I am stuck trying to trigger a CSS animation.

My CSS:

h3[id="balance-desktop"]{
    color: black;

    -webkit-animation-name: gogreen;
    -webkit-animation-duration: 2s;
    animation-name: gogreen;
    animation-duration: 2s
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes gogreen {
    from {color: black;}
    to {color: limegreen;}
    from{color: limegreen;}
    to{color: black;}
}

/* Standard syntax */
@keyframes gogreen {
    from {color: black;}
    to {color: limegreen;}
    from{color: limegreen;}
    to{color: black;}
}

It is a basic animation that changes color of a h3[id=balance-desktop] element.

The animation works when the page loads. I am trying to get it to work when I call my java script function but I am unable too.

Attempt #1:

function showGreenAmiamtion(){
    var test = document.getElementById("balance-desktop");
    test.style.webkitAnimationName = 'gogreen';
    test.style.webkitAnimationDuration = '4s';
}

Attempt #2:

function showGreenAmiamtion(){
    document.getElementById("balance-desktop").style.webkitAnimationName = "";
    setTimeout(function ()
    {
        document.getElementById("balance-desktop").style.webkitAnimationName = "gogreen";
    }, 0);
}

I tried all answers from How to activate a CSS3 (webkit) animation using javascript?, no luck.

Is something wrong with my code?

Please add the relevant HTML so we can see what you have and help provide you with a working result. — Scott Marcus
– Scott Marcus, Commented Aug 3, 2017 at 22:32

Jon Uleis · Accepted Answer · 2017-08-03 22:40:00Z

Your attempt 2 works - just cleaned up your code a bit to remove the webkit prefixes (which are a few years outdated). I'm setting the animationName to 'none' inline, and then removing that so the element goes back to using its original CSS animation name.

Also, having multiple from and tos in a keyframe animation won't work, so I formatted it to work with percentages.

var btn = document.getElementById("button");
var text = document.getElementById("balance-desktop");

function turngreen() {
  text.style.animationName = 'none';
  setTimeout(function() {
    text.style.animationName = null;
  }, 0);
}

btn.addEventListener('click', turngreen);

#balance-desktop {
  color: black;
  animation: gogreen 2s;
}

@keyframes gogreen {
  0%, 100% { color: black; }
  50% { color: limegreen; }
}

<h3 id="balance-desktop">Heading</h3>

<button id="button">Turn Green</button>

Scott Marcus · Accepted Answer · 2017-08-03 22:45:09Z

For something like this, a CSS Transition might be more simple.

Also, all major browsers support CSS3 Animations and Transitions these days, so unless you are targeting old browsers, you can drop the vendor prefixes.

// Get DOM references:
var btn = document.querySelector("button");
var h3 = document.querySelector(".balance-desktop");

// Set up trigger for transition function. This is a button
// click in this example, but the function can be called anytime
// you like.
btn.addEventListener("click", function(){

  // By changing a style property on the element that had previously 
  // been set, and if that element has been set up for transitions
  // on that property, the transition will be activated.
  h3.classList.add("goGreen");
  
  // After the transition to the new style is complete
  // we'll remove that style, effectively causing a 
  // transition back to the original style. It's important
  // that the delay is set to at least the time of the transition.
  // Two seconds in this case.
  setTimeout(function(){
    h3.classList.remove("goGreen");
  },2000);
});

.balance-desktop{
    color: black;
    /* Set the element to transition on all properties
       that have been set over the course of 2 seconds. */
    transition:2s all;
}

.goGreen {
 color: limegreen;
}

<h3 class="balance-desktop">Hello</h3>
<button>Run Function</button>

Collectives™ on Stack Overflow

How to trigger a CSS animation?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related