I am trying following code for changing css attributes with the help of javascript,
But its not showing desired output.
Here is the code (trying on Chrome Browser) :-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s linear 2s infinite alternate; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
<script type="text/javascript">
//This function should change the color
function ChangeAnimation()
{
var css11 = '@-webkit-keyframes myfirst {'+
'0% {background:black; left:0px; top:0px;}'+
'45% {background:white; left:200px; top:0px;}'+
'50% {background:black; left:200px; top:200px;}'+
'75% {background:white; left:0px; top:200px;}'+
'100% {background:red; left:0px; top:0px;}'+
'}';
if (document.styleSheets && document.styleSheets.length)
{
document.styleSheets[0].insertRule(css11, 0);
}
else
{
// No attached stylesheets so append to the DOM
var style = document.createElement('style');
style.innerHTML = css11;
document.head.appendChild(style);
}
}
</script>
</head>
<body>
<div id="ter"><b>Note:</b> Example of css animation.</div>
<div></div>
<input type="button" onclick="ChangeAnimation()" value="Change CSS Animation">
</body>
</html>Looking for help in above regards.
I want my existing animation color change on the button clicked event.