hello
i want to write the given css code in javascript but it is not working i have the div with id one. below is the css code that is working fine
`
<style>
#one
{
width:96px;
height:0px;
left:204px;
top:65px;
z-index:2;
position:absolute;
background-color:#FFF;
animation:myfirst 2s;
-moz-animation:myfirst 2s; /* Firefox */
-webkit-animation:myfirst 2s; /* Safari and Chrome */
-o-animation:myfirst 2s; /* Opera */
}
@keyframes myfirst
{
from {height:188px; }
to {height:10px;}
}
/* Firefox */
@-moz-keyframes myfirst
{
from {height:188px; }
to {height:10px;}
}
/* Safari and Chrome */
@-webkit-keyframes myfirst
{
from {height:188px; }
to {height:10px;}
}
/* Opera */
@-o-keyframes myfirst
{
from {height:188px; }
to {height:10px;}
}
</style>
Now i want to write the above css code with the help of javascript i try and write half but problem occuring when i write the keyframes how to write the keyframes in javascript and apply to specific div
here is javascript code
var p1 = document.getElementById('one');
p1.style.width = "96px";
p1.style.height = "0px";
p1.style.left = "204px";
p1.style.zIndex = "2";
p1.style.position = "absolute";
p1.style.backgroundColor = "white";
p1.style.animation = "one 2s";
p1.style.WebkitAnimation = "one 2s";
p1.style.MozAnimation = "one 2s";
p1.style.oAnimation = "one 2s";
also tell me how to write -moz-animation , -webkit-animation and -o-animation in javascript
waiting for your reply
thanks