CSS3 animations allows animation of most HTML elements without using JavaScript or Flash!
Code
4Use
Ease
Ease
In
Ease
Out
Ease
In Out
Linear
Custom
Awesome!
Hover on me
Ease
Ease
InEase
OutEase
In OutLinear
Custom
Awesome!
Hover on me
Hover on me
Hover on me
Normal
Example 1
Example 2
Example 3
Example 4
Example 5
Hover on me
Normal
Example 1
Example 2
Example 3
Example 4
Example 5
Hover on me
Image 1 Image 2 Image 3 Image 4
![]()
![]()
![]()
![]()
Image 1 Image 2 Image 3 Image 4
JavaScript
1
2
3
4
5
6
Have a play with the controls - there's no transition here, just the sliders to control it. Note that I'm only using javascript to update the css values - all the maths needed is done by the browser automatically.
1
2
3
4
5
6
JavaScript
Hover over me
The interesting bit of this code is this bit of CSS (remember to add vendor prefixes both for the keyframes code and the animation-* properties):
@keyframes resize { 0% { padding: 0; } 50% { padding: 0 20px; background-color:rgba(255,0,0,0.2); } 100% { padding: 0 100px; background-color:rgba(255,0,0,0.9); } } #box { animation-name: resize; animation-duration: 1s; animation-iteration-count: 4; animation-direction: alternate; animation-timing-function: ease-in-out; }
Note:- That the 4 iterations makes the box pulse twice - the animation runs forwards then backwards, then forwards then backwards.
You can have as many keyframes as you like, at whatever intervals you like.
A useful setting is to set animation-iteration-count
to infinite
, making the animation continue for ever.
The key to using these animations is subtlety - nice delicate animations, rather than extreme over the top ones! It's also worth noting that the WCAG (Web Content Accessibility Guidelines) 2.0 specifies that a website shouldn't contain things that flash more than 3 times a second to avoid causing seizures in people susceptible to them.