Animation Using CSS 3

I have been playing around with Javascript and jQuery using fadein and fadeout functions but decided to try some new CSS code for fun, just to see what it did. So I added some animation on my main wrapper that has the opacity start on 0.0 and transform to 1.0 over a 3 second period. It doesn’t render in MSIE but seems to work nicely in Firefox, Chrome and Safari. You see it on every page that is part of the WordPress theme. Doesn’t show up on the forum pages because they are built in another system.

Here is the code I used.

#wrapper{
animation:myfirst 3s;
-moz-animation:myfirst 3s; /* Firefox */
-webkit-animation:myfirst 3s; /* Safari and Chrome */
}

@keyframes myfirst
{
from {opacity:0;}
to {opacity:1;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {opacity:0;}
to {opacity:1;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {opacity:0;}
to {opacity:1;}
}
}


Leave a Reply