CSS: Transform and More Animation

I have a little tagline along the top header of this site. I played around with some CSS on it for awhile and came up with a simple rotated tranform that places it on the page with a 10 degree rotation. The transform property works on ALL major browsers. Then just for fun I decided to see if I could animate the transform property. So I added an animation that rotates the tagline back and forth from 10 degrees to -10 degrees, which gives it a teeter totter effect. I also tell it to be red during the motion. Interestly, the red color ONLY shows up in Firefox on my machine

The animation for CSS does NOT run on Opera or MSIE at all, but it does seem to run on the rest of the browsers. It does seem a bit quirky and perhaps I am placing my code in an incorrect order. ????? If anyone can see an error please let me know. I added this code to the div id in my stylesheet, here is what I added. The top few lines are not really important, the code really picks up where I start the animation call:

#site-description {
clear: right;
float: right;
font-style: italic;
margin: 15px 0 18px 0;
width: 105px;
animation:myshake 1s 3;
-moz-animation:myshake 1s 3; /* Firefox */
-webkit-animation:myshake 1s 3; /* Safari and Chrome */
transform:rotate(10deg);
-ms-transform:rotate(10deg); /* IE 9 */
-moz-transform:rotate(10deg); /* Firefox */
-webkit-transform:rotate(10deg); /* Safari and Chrome */
-o-transform:rotate(10deg); /* Opera */
}

@keyframes myshake
{

0% {transform: rotate(10deg);}
25% {transform: rotate(-10deg);}
50% {transform: rotate(10deg);}
75% {transform: rotate(-10deg);}
100% {transform: rotate(10deg);}
}

@-moz-keyframes myshake /* Firefox */
{
0% {color:red; -moz-transform: rotate(10deg);}
25% {color:red; -moz-transform: rotate(-10deg);}
50% {color:red; -moz-transform: rotate(10deg);}
75% {color:red; -moz-transform: rotate(-10deg);}
100% {color:red; -moz-transform: rotate(10deg);}
}

@-webkit-keyframes myshake /* Safari and Chrome */
{
0% {-webkit-transform: rotate(10deg);}
25% {-webkit-transform: rotate(-10deg);}
50% {-webkit-transform: rotate(10deg);}
75% {-webkit-transform: rotate(-10deg);}
100% {-webkit-transform: rotate(10deg);}
}


Leave a Reply