Despite my initial reservations over whether animations should be defined in CSS, I have to admit they’re very useful, faster and slicker than equivalent effects in JavaScript. Building great animations isn’t easy, though — it involves a lot of patience, trial, error, testing and vendor-prefix shenanigans. Animate.css makes coding a little more bearable. Simply choose an effect, watch it in action, download the code and add a couple of classes to your HTML element. You can either download the full 2,500 line CSS file or create a custom build using the effects you need. Animate.css was developed by Dan Eden, a designer and student based in Manchester, UK:
I was working on a few personal projects with CSS3 animation keyframes and found myself repeating code. So I began creating a library of animations I could drop in at will. After I’d made something I was happy with, I released the code on GitHub and it took off from there. People love animations!We certainly do. My current favorite is “hinge” in the Specials section at the bottom. Very cool. I’m struggling to think of a use-case, but may apply it to all my links from now on!
The Prefix Predicament
While prefixes may be a necessary evil, Animate.css illustrates just how clunky they can be. Keyframes and their associated transformation properties must be defined with -webkit, -moz, -ms, -o and non-prefixed values. It results in a lot of browser-specific repeated code which is difficult to maintain and debug, e.g.
@-webkit-keyframes rollIn {
0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
}
@-moz-keyframes rollIn {
0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }
100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }
}
@-ms-keyframes rollIn {
0% { opacity: 0; -ms-transform: translateX(-100%) rotate(-120deg); }
100% { opacity: 1; -ms-transform: translateX(0px) rotate(0deg); }
}
@-o-keyframes rollIn {
0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); }
100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); }
}
@keyframes rollIn {
0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
}
Frequently Asked Questions (FAQs) about CSS3 Animation
What is the difference between CSS3 animation and JavaScript animation?
CSS3 animations and JavaScript animations essentially achieve the same goal of animating elements on a webpage. However, they differ in their implementation and performance. CSS3 animations are handled by the browser’s rendering engine, making them more efficient and smoother. They are also easier to implement as they don’t require any programming knowledge. On the other hand, JavaScript animations offer more control and flexibility, allowing for complex animations that can’t be achieved with CSS3 alone.
How can I control the speed of CSS3 animations?
The speed of CSS3 animations can be controlled using the ‘animation-duration’ property. This property defines the length of time that an animation takes to complete one cycle. You can specify this duration in seconds (s) or milliseconds (ms). For example, ‘animation-duration: 2s’ would make the animation last for 2 seconds.
Can I use CSS3 animations on all web browsers?
Most modern web browsers support CSS3 animations. However, for older versions of browsers, you may need to use vendor prefixes to ensure compatibility. These prefixes are ‘-webkit-‘, ‘-moz-‘, ‘-o-‘, and ‘-ms-‘ for Safari, Firefox, Opera, and Internet Explorer respectively.
How can I make a CSS3 animation play in reverse?
You can make a CSS3 animation play in reverse using the ‘animation-direction’ property. Setting this property to ‘reverse’ will play the animation backwards. You can also use ‘alternate’ to make the animation play forwards then backwards alternately.
Can I pause and resume a CSS3 animation?
Yes, you can pause and resume a CSS3 animation using the ‘animation-play-state’ property. Setting this property to ‘paused’ will pause the animation, and setting it to ‘running’ will resume it.
How can I animate multiple properties at once with CSS3?
You can animate multiple properties at once by specifying them in the ‘animation’ shorthand property. Each property should be separated by a space. For example, ‘animation: 2s ease-in-out 1s infinite alternate slidein’.
Can I specify different timings for different stages of a CSS3 animation?
Yes, you can specify different timings for different stages of a CSS3 animation using the ‘animation-timing-function’ property. This property accepts a variety of values that control the speed curve of the animation.
How can I make a CSS3 animation loop indefinitely?
You can make a CSS3 animation loop indefinitely by setting the ‘animation-iteration-count’ property to ‘infinite’.
Can I delay the start of a CSS3 animation?
Yes, you can delay the start of a CSS3 animation using the ‘animation-delay’ property. This property specifies the amount of time to wait from applying the animation to the element to the start of the animation.
How can I create a custom animation sequence with CSS3?
You can create a custom animation sequence with CSS3 using the ‘@keyframes’ rule. This rule allows you to specify the behavior of one cycle of an animation. You can define multiple keyframes, each representing a specific point in the animation.
Craig BucklerCraig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
