get totaly twisted (more fun css animations)

now that i'm getting used to css animations i'm able to write em shorthand without much thought

so this fun lil tip took me 30 seconds to a minute to write then another 30 seconds to adjust the angles

and here it is i timed it with the other zoomin animation (see my animation domination for a full list of animation and transition tips (from this week or 2 i had several others before that )

todays tip twists and tilts the header image as the site description zooms in at the same time

now that i know the animation shorthand its a bit less code so here goes

@keyframes logowobble {
   0%, 100% {transform:
   skew(0deg,0deg);}
   25% {transform:skew(5deg,7deg);}
   75% {transform:skew(7deg,5deg);}
}
@-moz-keyframes logowobble {
   0%, 100% {-moz-transform:
   skew(0deg,0deg);}
   25% {-moz-transform:skew(5deg,7deg);}
   75% {-moz-transform:skew(7deg,5deg);}
}
@-webkit-keyframes logowobble {
   0%, 100% {-webkit-transform:
   skew(0deg,0deg);}
   25% {-webkit-transform:skew(5deg,7deg);}
   75% {-webkit-transform:skew(7deg,5deg);}
}
@-ms-keyframes logowobble {
   0%, 100% {-ms-transform:
   skew(0deg,0deg);}
   25% {-ms-transform:skew(5deg,7deg);}
   75% {-ms-transform:skew(7deg,5deg);}
}
@-o-keyframes logowobble {
   0%, 100% {-o-transform:
   skew(0deg,0deg);}
   25% {-o-transform:skew(5deg,7deg);}
   75% {-o-transform:skew(7deg,5deg);}
}
h1#xg_sitename.xj_site_name a#application_name_header_link img{animation:logowobble 5s 12s ease-in-out;
-moz-animation:logowobble 5s 12s ease-in-out;
-ms-animation:logowobble 5s 12s ease-in-out;
-o-animation:logowobble 5s 12s ease-in-out;
-webkit-animation:logowobble 5s 12s ease-in-out;}

explanations for everyone new to css animations

keyframes define the animation steps at % of the duration (5 sec duration) using @keyframes declerations the -webkit- etc prefixes are hacks to make it more cros s platform compatable in more browsers

next the css

1st ofcourse is the element to be animated in this case

h1#xg_sitename.xj_site_name a#application_name_header_link img

or the site header logo image

next we define the animation parameters which call to the keyframes

animation:logowobble 5s 12s ease-in-out;

animation says its an animation (gee really?)

logowobble is the animation name (notice that names attached to the keyframes too)

then 5 s is the 5 sec duration of the animation 12 s is a 12 sec delay before it starts ease-in-out defines the timing function

lastly after all that you can add a iteration count statement such as 3 or infinite (if you want it to play 3 times or loop forever)

for a more wobble effect try alternating to a negative like this

@keyframes logowobble {
   0%, 100% {transform:
   skew(0deg,0deg);}
   25% {transform:skew(5deg,-7deg);}
   75% {transform:skew(-7deg,5deg);}
}
@-moz-keyframes logowobble {
   0%, 100% {-moz-transform:
   skew(0deg,0deg);}
   25% {-moz-transform:skew(5deg,-7deg);}
   75% {-moz-transform:skew(-7deg,5deg);}
}
@-webkit-keyframes logowobble {
   0%, 100% {-webkit-transform:
   skew(0deg,0deg);}
   25% {-webkit-transform:skew(5deg,-7deg);}
   75% {-webkit-transform:skew(-7deg,5deg);}
}
@-ms-keyframes logowobble {
   0%, 100% {-ms-transform:
   skew(0deg,0deg);}
   25% {-ms-transform:skew(5deg,-7deg);}
   75% {-ms-transform:skew(-7deg,5deg);}
}
@-o-keyframes logowobble {
   0%, 100% {-o-transform:
   skew(0deg,0deg);}
   25% {-o-transform:skew(5deg,-7deg);}
   75% {-o-transform:skew(-7deg,5deg);}
}
h1#xg_sitename.xj_site_name a#application_name_header_link img{animation:logowobble 3s 12s ease-in-out;
-moz-animation:logowobble 3s 12s ease-in-out;
-ms-animation:logowobble 3s 12s ease-in-out;
-o-animation:logowobble 3s 12s ease-in-out;
-webkit-animation:logowobble 3s 12s ease-in-out;}