jquery - Changing css animation in javascript -


i have blinking red box in html uses css animations. want to able change blinking red , white green , white. know can done on id elements using getelementbyid how access green aminated box in css. red box looks this:

@-webkit-keyframes 'noconnection'  {     1% { background-color: red; }     33% { background: white; }     66% { background: red; }     100% { background: white; } } 

the green this:

@-webkit-keyframes 'connection'  {     1% { background-color: green; }     33% { background: white; }     66% { background: green; }     100% { background: white; } } 

the animate looks this:

#animate {      height: 15px;      width: 15px; } .cssanimations #animate {     -webkit-animation-direction: normal;     -webkit-animation-duration: 5s;     -webkit-animation-iteration-count: infinite;     -webkit-animation-name: connection;     -webkit-animation-timing-function: ease;    

and think have change attribute -webkit-animation-name: javascript dont know how handle on change it. or better off creating duplicate #animate , renaming using getelementbyid?

the easiest way created 2 classes in css , toggle between two.

so like:

.connection {   animation: 'connection' 5s ease infinite }   .no-connection {   animation 'noconnection' 5s ease infinite } 

and use javascript toggle between two

function toggleconnectionstatus(){  var element = document.getelementbyid('animate');  if(/* connection active */) element.classname = 'connection';  else element.classname = 'no-connection'  } 

Comments

Popular posts from this blog

cakephp - simple blog with croogo -

How to group boxplot outliers in gnuplot -

bash - Performing variable substitution in a string -