How to write css keyframes in javascript

[Rizi004]

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

[AleMonteiro]

I don't know how to set the values for browser specific css styles.

But take a look at this library: http://rekapi.com/
It may be what you need.

Coding KeyFrames manually for each browser would be a big headache, if you can use something that is ready, use it.

Hope it helps.

[gon1387]

you can create a style tag, my sample's placed on the head. Then from there write the keyframe rules. like this:

var styleSheetElement = document.createElement("style"), customStyleSheet;

document.head.appendChild(styleSheetElement);

// get the appended stylesheet
// you can use the returned node from the appendage like this
// customStyleSheet = (document.head.appendChild(styleSheetElement)).sheet
customStyleSheet = document.styleSheets[0];

// Make sure you apply the appropriate css rule name for the browser, as
// "@keyframes" the standard while different browser has their own rule name
// example, if you're using Chrome you should use "@-webkit-keyframes" instead.
// the browser will throw an error if you provided the wrong css rule name
customStyleSheet.insertRule("@keyframes myfirst { from {height:188px; } to {height:10px;}}");

[gon1387]

By the way, I'd go with AleMontiero, coding for different browsers a big headache. It's gonna blow your head off. LOL
I really don't know why they can't get into harmony.

Asside from the CSSRule, I really don't know what you mean by this

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

Can you provide your code in JSFiddle, to check where the problem was.