28 Jun, 2011
Introduction to CSS3 Animations by Examples
CSS3 animations are really easy to write once you know how they work. This post will show you some very basic animations done in CSS3. Once you get the hang of how to put them together, you will be able to do more advanced animations in CSS3 based on these examples. Also have a look at Reference on Safari for the animation properties that you can use on your CSS selectors.
Note: The examples on this page will only work on WebKit Browsers (eg: Chrome, Safari). Hover over the little black elements to see the effect done in pure CSS3.
Before we start, let’s add the following CSS to change the look and feel of your <ul> list items.
ul.css3demo li { -webkit-border-radius: 15px; display: block; float: left; width: 50px; height: 50px; margin: 10px; background: #000; color: #fff; text-indent: -5000em; }
And now let’s take a look at 15 different CSS3 animations and their source code.
Tilt
- A
- B
- C
- D
ul.css3demo1 li { -webkit-transition: all 0.3s linear; }
ul.css3demo1 li:hover { -webkit-transform: rotate3d(0, 0, 0, 50deg); -webkit-transform-style: preserve-3d; }
Pushed Down (by 40px)
- A
- B
- C
- D
ul.css3demo2 li { -webkit-transition: all 0.3s linear; }
ul.css3demo2 li:hover { -webkit-transform: translate3d(0, 40px, 0); }
Smaller
- A
- B
- C
- D
ul.css3demo3 li { -webkit-transition: all 0.3s linear; }
ul.css3demo3 li:hover { -webkit-transform: scale(.5); }
Bigger
- A
- B
- C
- D
ul.css3demo4 li { -webkit-transition: all 0.3s linear; }
ul.css3demo4 li:hover { -webkit-transform: scale(1.5); }
Slide Right (by 10px)
- A
- B
- C
- D
ul.css3demo5 li { -webkit-transition: all 0.3s linear; }
ul.css3demo5 li:hover { -webkit-transform: translate3d(10px, 0, 0); }
Add Shadow
- A
- B
- C
- D
ul.css3demo6 li { -webkit-transition: all 0.3s linear; }
ul.css3demo6 li:hover { -webkit-box-shadow: 3px 3px 3px rgba(0,0,0, 0.5); }
Change Color
- A
- B
- C
- D
ul.css3demo7 li { -webkit-transition: all 0.3s linear; }
ul.css3demo7 li:hover { background: #0cf; }
Shrink horizontally (by 50%)
- A
- B
- C
- D
ul.css3demo8 li { -webkit-transition: all 0.3s linear; }
ul.css3demo8 li:hover { -webkit-transform: scale3d(.5, 1, 1); }
Shrink vertically (by 50%)
- A
- B
- C
- D
ul.css3demo9 li { -webkit-transition: all 0.3s linear; }
ul.css3demo9 li:hover { -webkit-transform: scale3d(1, 0.5, 1); }
Rotate 360 degree
- A
- B
- C
- D
ul.css3demo10 li { -webkit-transition: all 0.3s linear; }
ul.css3demo10 li:hover { -webkit-transform: rotate(360deg); }
Fade In
- A
- B
- C
- D
ul.css3demo11 li { -webkit-transition: opacity 0.8s ease-in; opacity: 0.4; }
ul.css3demo11 li:hover { opacity: 1; }
Fade Out
- A
- B
- C
- D
ul.css3demo12 li { -webkit-transition: opacity 1s ease-in; opacity: 1.0; }
ul.css3demo12 li:hover { opacity: 0.4; }
Spin
- A
- B
- C
- D
ul.css3demo13 li { -webkit-transition: -webkit-transform 1s ease-in-out; }
ul.css3demo13 li:hover { -webkit-animation: spin 0.3s infinite linear; }
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); background-color: #ff0; }
}
Fade to Color (Colorize)
- A
- B
- C
- D
ul.css3demo14 li { -webkit-transition: -webkit-transform 5s ease-in-out; }
ul.css3demo14 li:hover { -webkit-animation: colorize 3s infinite linear; }
@-webkit-keyframes colorize {
0% { background-color: #333; }
100% { background-color: #ff0; }
}
Change Shape
- A
- B
- C
- D
ul.css3demo15 li { -webkit-transition: all 2s ease-in-out; }
ul.css3demo15 li:hover { -webkit-animation: shape 1s infinite linear; }
@-webkit-keyframes shape {
100% { -webkit-border-radius: 50px; }
}
Found this article useful? Share it with your friends:
Love what you've just read? Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
Hello! Welcome to Web development blog! My name is Ei Sabai and on this blog, I write about web development, mobile app development, latest web technologies and the likes. Read more 
As noted by the poster this page is a giant fail in IE 9 so while I love all of these options I can’t use them for any standard website designs yet :P. I can however use them for mobile web and plan too ;)
CHaZ if you look closely they are written for webkit browsers like safari or chrome
Safari in vista has crashed.
@CHaZ and @Rob, you can add vendor specific prefixes (such as -moz, -o) to the CSS and see if they work on different browsers. And yes, they are perfect for mobile web.