1.11M Members

How to write css keyframes in javascript

 
0
 

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

 
0
 

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.

 
0
 

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;}}");
 
0
 

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.

You
This article has been dead for over six months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article