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
Post a Comment