The animation itself can be implemented using CSS3 keyframe-based syntax – @keyframes rule to be more specific – to add the initial and final styles and a series of properties to set the start, direction or directions and duration of the animation.
Here you have some examples of the rule, which you can even download, in the following page:
As you see, you can develop well performed, smooth animations without scripting at all.
There are many other examples and tutorials out there.
The problem is that @keyframes rule is only supported by modern browsers:
- Chrome 2+,
- Safari 4+,
- Firefox 5+,
- IE10 PP3,
- iOS Safari 3.2+,
- Android 2.1+.
- Opera 12+
For a more detailed approach to the subject, there are a series of compatibility tables like:
Although modern browsers render this and other rules properly, not every user updates their software regularly. Even in the case of automatic update features that ensure a timely installation of recent releases, a percentage of users turn off automatic updating and are still using out-of-date versions.
Internet Explorer only renders this rule from the 10 version, which requires Windows 7+ to be installed.
A good approach to ensure multibrowser efficiency would be using @keyframes rule in combination with some user agent version detection technique to load the appropriate script or library to create the same animation effect.