CSS3 Webkit Animations and Transforms
I’m not going to go into detail about how CSS3 animations work – that’s been covered in extensive detail for the past couple years, so if you’re totally clueless, read up a little, or just copy and paste regardless!
The best thing about CSS3 animations (esp. on hover) is that they degrade pretty much gracefully – instead of seeing the animation between the default and hovered state, an old-fashioned user just sees the standard hover state. So, if you make something expand and rotate on hover, a non-Webkit user would just see it pop out, without animating to it.
Without further ado, some CSS:
- @-webkit-keyframes spaceboots {
- 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
- 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
- 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
- 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
- 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
- 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
- 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
- 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
- 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
- 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
- 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
- }
- .shake:hover,
- .shake:focus {
- -webkit-animation-name: spaceboots;
- -webkit-animation-duration: 0.8s;
- -webkit-transform-origin:50% 50%;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-timing-function: linear;
- }
- .shake {
- display:inline-block
- }
@-webkit-keyframes [animation name]
This is an ‘@’ declaration, much like
@font-face or @media, but is proprietary to the Webkit rendering engine – like everything else in here. Inside this rule, you have your stages (keyframes) for the name animation. You can have two keyframes, 0% and 100% (start and finish), for example, but I’ve declared ten steps, each 1/10th of the animation. The speed of the animation is unimportant in this – you’re just describing the timing percentages, and applying CSS styling to those specific keyframes.-webkit-animation-name / -webkit-animation-duration
The first applies the animation effect to the current selector you’re writing a rule for, in this case, I’m telling it to use the animation ‘spaceboots’ (the very same boots these links will be shaking in, later on.)
The animation duration, well, that’s pretty simple. Using ‘s’ (seconds) as the units, if you set the duration to
1s, then the 40% { } keyframe will activate at 0.4s, etc. etc.-webkit-animation-origin
This one takes the same syntax as
background-position – for example, -webkit-transform-origin: [left] [top] – and so 50% 50% dictates that the origin position for these transforms (the up/down/left/right and rotations) should come from the very centre of the element. If you were to set this to 0 0, or 100% 100%, you’d see different effects. go on, try it – I dare you.-webkit-animation-iteration-count / -webkit-animation-timing-function
… should be fairly self-explanatory.
-webkit-animation-iteration-count: 1 / 2 / 200 / infinite, whatever you like. We’ve chosen infinite, because we want those links to just keep on a-shakin’.
Timing function is the same as easing – I’ve used linear, because, hell, you wouldn’t be able to see a bezier curve in effect at this speed – and linear is probably faster in performance terms (though I have no evidence of this.)
0 comments