How to override CSS3 animation with Javascript?

Question

I change the background color of the table (from lightgrey to lightgreen and back) for X seconds with CSS3 animation:

        @keyframes change {
        0%   {background-color: lightgreen;}
        99%   {background-color: lightgreen;}
        100% {background-color: lightgrey;}
    }

the HTML code:

<tr style='background-color: lightgrey; animation: change Xs linear 5s;'>

Now I need to override the CSS animation and change the background color of the table (at any moment) to red when I click on it (and come back to lightgrey when re-click stopping the animation). I simply try to add this code but the CSS animation always overrides the Javascript onclick command:

onclick="this.style.animationPlayState='paused'; this.style.backgroundColor='red';"

Any suggestions? Do you think it's better to do all this in Javascript?

put your code in a jsfiddle so people can better help you. and I would suggest not using inline javascripts/styles as it's hard to read for someone else who has to maintain your code — Godinall
– Godinall, Commented Dec 6, 2013 at 3:51

Renato Zannon · Accepted Answer · 2013-12-06 04:02:04Z

1

You might want to defer that to CSS classes and selectors:

/* Skipping the -webkit prefix needed by chrome for sake of brevity */
.animated:not(.clicked) {
  animation: change linear 5s;
}

@keyframes change {
  0%    { background-color: lightgreen; }
  99%   { background-color: lightgreen; }
  100%  { background-color: lightgrey;  }
}

.clicked {
  background-color: red;
}

Then, just add the clicked class when the row is clicked:

// Using jQuery for simplicity

$("table").on("click", "tr", function() {
  $(this).addClass("clicked");
});

Working example: http://jsbin.com/IQaRUZa/1/edit

answered Dec 6, 2013 at 4:02

Renato Zannon

30.2k7 gold badges42 silver badges47 bronze badges

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

Comments

user3072883 · Accepted Answer · 2013-12-06 16:11:58Z

0

The solution adopted (solved with "!important" CSS3 element):

HTML code:

   <tr id="1" style='background-color: lightgrey; animation: change_visite 3s linear 3s;' onclick="change(document.getElementById('1'));">

CSS code:

@keyframes change_visite {
0%   {background-color: lightgreen;}
99%   {background-color: lightgreen;}
100% {background-color: lightgrey;}
}

.evidenziato {
background-color: coral !important;
}

JS code:

function change(classe){
  if(classe.className === "evidenziato"){
    classe.className='';
  } else {
    classe.className='evidenziato';
  }
}

Working example here: http://jsbin.com/ENAqocUb/1/edit?html,css,js,output

answered Dec 6, 2013 at 16:11

user3072883

212 bronze badges

Collectives™ on Stack Overflow

How to override CSS3 animation with Javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related