What is the best way to activate a CSS animation?

Question

What is the best way to activate a CSS animation?

I've hit a roadblock while attempting to trigger a CSS animation.

Here's 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's a simple animation that changes the color of an h3[id=balance-desktop] element.

The animation works when the page loads. I'm trying to make it work when I call my JavaScript function, but so far, no success.

Attempt #1:

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

Attempt #2:

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

I've tried all the solutions recommended on How to activate a CSS3 (webkit) animation using JavaScript?, but none have worked for me.

Is there something incorrect in my code?

javascript html css

Answer 1

Answer №1

After reviewing your second attempt, it appears to be functioning properly. I made some adjustments to tidy up your code by removing outdated webkit prefixes. Initially, I set the animationName to 'none' inline and then removed it, allowing the element to revert back to its original CSS animation name.

Furthermore, I restructured the keyframe animation to utilize percentages rather than multiple from and to values.

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>

Answer 2

After reviewing your second attempt, it appears to be functioning properly. I made some adjustments to tidy up your code by removing outdated webkit prefixes. Initially, I set the animationName to 'none' inline and then removed it, allowing the element to revert back to its original CSS animation name.

Furthermore, I restructured the keyframe animation to utilize percentages rather than multiple from and to values.

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>

Answer 3

Answer №2

If you're looking for a simpler solution, consider using a CSS Transition.

All modern browsers now support CSS3 Animations and Transitions, so there's no need to include vendor prefixes unless you are targeting older browsers.

// To implement a transition function, first get references to DOM elements:
var btn = document.querySelector("button");
var h3 = document.querySelector(".balance-desktop");

// Create an event listener that triggers the transition function when the button is clicked.
btn.addEventListener("click", function(){

  // By changing a style property on the element configured for transitions,
  // the transition effect will be activated.
  h3.classList.add("goGreen");
  
  // Once the transition is complete, remove the added style to trigger
  // a transition back to the original style. Ensure the delay is at least
  // equal to the duration of the transition (2 seconds in this case).
  setTimeout(function(){
    h3.classList.remove("goGreen");
  },2000);
});

.balance-desktop{
    color: black;
    /* Apply a transition effect over 2 seconds to all properties with changes. */
    transition:2s all;
}

.goGreen {
 color: limegreen;
}

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

Answer 4

If you're looking for a simpler solution, consider using a CSS Transition.

All modern browsers now support CSS3 Animations and Transitions, so there's no need to include vendor prefixes unless you are targeting older browsers.

// To implement a transition function, first get references to DOM elements:
var btn = document.querySelector("button");
var h3 = document.querySelector(".balance-desktop");

// Create an event listener that triggers the transition function when the button is clicked.
btn.addEventListener("click", function(){

  // By changing a style property on the element configured for transitions,
  // the transition effect will be activated.
  h3.classList.add("goGreen");
  
  // Once the transition is complete, remove the added style to trigger
  // a transition back to the original style. Ensure the delay is at least
  // equal to the duration of the transition (2 seconds in this case).
  setTimeout(function(){
    h3.classList.remove("goGreen");
  },2000);
});

.balance-desktop{
    color: black;
    /* Apply a transition effect over 2 seconds to all properties with changes. */
    transition:2s all;
}

.goGreen {
 color: limegreen;
}

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

What is the best way to activate a CSS animation?

Answer №1

Answer №2

Similar questions

Retrieving information from a JSON source to populate a data table

What is the best way to set up Flow type checking for functions passed as props in a React and Redux application?

Load the dropdown menu in the select element using the AngularJS $ngresource promise

Executing a Component function within an "inline-template" in VueJS

Tips for sending an array of input field values through an Ajax request

Is it possible to rewrite this function recursively for a more polished outcome?

Error: Express JS custom module cannot be located in the root directory's modules folder

Exploring the functionality of the $.each jQuery iterator. Can someone clarify the distinctions between these two methods?

Adjust the text appearance of the graph in ApexCharts

What is the best way to retrieve the checkbox value using AJAX/jQuery with a Spring form?

The UL list-style does not seem to be working properly on the Woocommerce checkout page

Injecting multiple instances of an abstract service in Angular can be achieved using the following techniques

Executing XSS Reflected Attack by Loading an External JS Script via POST Parameter

Using Javascript to upload an image and show it in a small display

Is there a tool or software available that can securely encode a text file into an HTML file without the need for loading it using AJAX?

Stop horizontal overflow of content

Every time I click a button, I am trying to add JSON objects into an array and then show the outcomes

Dynamic resizing of Bootstrap Carousel

When hovering over a circle in CSS with a background image to hide text, the shape becomes distorted

Unable to Get Basic jQuery .load Example to Function