Compare to Flash or JavaScript animation CSS3 animation render faster. Animation is a new feature introduced in CSS3. Performance wise CSS3 is more programmers friendly. In this session let us make you clear about the trick to use CSS animation.
In CSS3 2 major properties are “animation” & “@keyframes”. Refer to the below example I have a div with a class “animation”. To apply animation on this div I created a class animation. Inside the class I added CSS3 property animation: demoAnimation 5s;. Here demoAnimation is controlled by keyframes. Using @keyframes we need to define from & to properties. As in this example I am moving a div from left to right, I positioned the div to absolute and applying left property from 0 to 200px.
To support animation in all browser here I used animation property for IE & FireFox. To render the same in Google Chrome, Safari & Opera I used -webkit-animation. The similar I did for @keyframes.
CSS animation comes with some major properties like animation, @keyframes, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state & animation-timing-function.
Move a DIV from Left to Right Example
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>How to move a div from left to right?</title>
<style type="text/css">
.animation {
/* IE & FireFox */
animation: demoAnimation 5s;
/* Chrome, Safari & Opera */
-webkit-animation: demoAnimation 5s;
position: absolute;
}
/* IE & FireFox */
@keyframes demoAnimation {
from {left: 0px; background: red;}
to {left: 200px; background: yellow;}
}
/* Chrome, Safari & Opera */
@-webkit-keyframes demoAnimation {
from {left: 0px; background: red;}
to {left: 200px; background: yellow;}
}
</style>
</head>
<body>
<div class="animation">This is a Div.</div>
</body>
</html>
CSS3 Animation
CSS3 has revolutionized web design by introducing powerful animation capabilities that allow developers to create smooth, engaging, and interactive experiences without relying on JavaScript or Flash. With CSS3 animations, designers can bring elements to life through transitions, transforms, and keyframe-based animations, enhancing user engagement and visual appeal.
Understanding CSS3 Animation
CSS3 animations enable the gradual change of an element’s style from one state to another. Unlike CSS transitions, which are limited to simple property changes, animations provide greater control over intermediate steps using keyframes. This makes them ideal for complex, multi-step effects.
Key Components of CSS3 Animation
1. Keyframes – The foundation of CSS3 animation, keyframes define the styles at various points during the animation sequence. Using `@keyframes`, developers specify how an element should appear at specific intervals (e.g., 0%, 50%, 100%).
2. Animation Properties – CSS provides several properties to control animations: – `animation-name` – Specifies the keyframe rule to use. – `animation-duration` – Sets how long the animation lasts.
Conclusion
CSS3 animations offer a powerful, lightweight way to enhance web interactivity and aesthetics. By mastering keyframes, animation properties, and performance optimization, developers can create visually compelling experiences that captivate users. Whether for subtle micro-interactions or complex motion graphics, CSS3 animations remain an essential tool in modern web design.
