CSS Animation
An introduction to rich animation in pure CSS3.
What’s CSS Animation?
CSS animation is used to make sequences between one property value element to the next; it’s like tweening in flash, but runs seamlessly into a native browser via CCS.
Transition
The simplest kind of animation is called a transition.
Transitions are specified using the following properties:
- transition-property - What property should animate, e.g., opacity.
- transition-duration - How long the transition should last.
- transition-timing-function - The timing function for the transition (e.g., linear vs. ease-in vs. a custom cubic bezier function).
- transition-delay - Defines when the transition starts.
- transition - A shorthand for all properties. The order should be: property, duration, timing_function, delay [, …]
element {
-webkit-transition: opacity 1s linear 2s;
}
element {
-webkit-transition-property: opacity;
-webkit-transition-duration: 1s;
-webkittransition-timing-function: linear;
-webkit-transition-delay: 2s;
}
element:hover {
opacity: 0;
}
Vendor Prefixes
There is a lot of duplication due to vendor prefixes for each browser.
SASS allows you to define mixins to avoid repetitive code.
(It’ll be only -webkit prefixes in the code samples from now on.)
element {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
Transform
Using transform, boxes can be scaled, rotated, skewed and translated.
You can chain together operations to apply multiple transforms at once to an object (e.g., if you want to both scale and rotate a box).
The supported primitives are:
- scale, scaleX, scaleY
- rotate
- translate, translateX, translateY
- skew, skewX, skewY
- matrix - Specify a full affine transform matrix. This function takes six values. The last two values are the tx and ty, and they can be lengths or percentages.
- **-webkit-transform-origin - Specify the origin of the transform.
element {
-webkit-transform: translate(30px,0px);
}
element {
-webkit-transition: all 1s ease-in-out;
-webkit-transform: scaleX(2) rotate(10deg);
}
3D Transform
WebKit on MacOSX has support for CSS 3D transforms, which allow you to position elements on the page in three-dimensional space using CSS.
Now Chrome supports it too :D
Read about it more in detail here: 3D Transform
-webkit-animation
WebKit supports explicit animations in CSS. As a counterpart to transitions, animations provide a way to declare repeating animated effects, with keyframes, completely in CSS.
Specifying animations is easy. You first describe the animation effect using the @-webkit-keyframes rule.
The animation engine will smoothly interpolate style between the keyframes.
-webkit-animation is specified using the following properties:
- animation-name - Specifies the name of an animation
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-fill-mode - Specifies whether the effects of an animation are apparent before the animation starts and after it ends, e.g., forwards/backwards.
- animation-direction - Determines whether the animation should play in reverse on alternate iterations
- animation-play-state - Determines whether the animation is running or paused
- animation - A shorthand for all properties.The order should be: name, duration, timing_function, delay, iteration_count, direction [, … ]
@-webkit-keyframes pulse {
0% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
50% {
background-color: blue;
opacity: 0.75;
-webkit-transform: scale(1.1) rotate(-5deg);
}
100% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
}
element {
-webkit-animation-name: pulse;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
}
element {
-webkit-animation: pulse 4s ease-in-out infinite;
}
Demo
Here is a example of a banner using Flash vs CSS animation. Compare below banners using Flash and CSS3.
Preparation
To connect html access as less as possible, assemble each image kind.
png-8: “sprite.png”
jpg: “guy.jpg”
Make a box and add background
HTML
<div id="banner"></div>
CSS
#banner {
width:300px;
height:250px;
background:black;
/*make invisible outside of box*/
overflow:hidden;
}
Add logos
HTML
<div id="banner">
<div class="logo1"></div>
</div>
CSS
/*define all of div under #banner*/
#banner > div {
/*make origin left top*/
position:absolute;
/*disable background repeat*/
background-repeat:no-repeat !important;
}
.logo1 {
margin-left:17px;
margin-top:59px;
width:59px;
height:140px;
background:url('sprite.png') left top;
}
Add red and blue lines
HTML
<div id="banner">
<div class="logo1"></div>
<div class="red_line"></div>
<div class="blue_line"></div>
</div>
CSS
.red_line{
margin-left:94px;
width:6px;
height:250px;
background:#ec2427;
}
.blue_line{
margin-left:100px;
width:7px;
height:250px;
background:#1dabed;
}
Add image moving up (Set up the position to the bottom)
HTML
<div id="banner">
<div class="logo1"></div>
<div class="red_line"></div>
<div class="blue_line"></div>
<div class="guy1"></div>
</div>
CSS
.guy1{
margin-left:107px;
width:193px;
height:250px;
overflow:hidden;
background:url('guy.jpg') left -380px;
}
Add image for next scene
HTML
<div id="banner">
<div class="logo1"></div>
<div class="red_line"></div>
<div class="blue_line"></div>
<div class="guy1"></div>
<div class="guy2"></div>
</div>
CSS
.guy2{
width:300px;
height:250px;
background:black url('guy.jpg') left -630px;
}
Add another assets for next scene (title, text and logo)
<div id="banner">
<div class="logo1"></div>
<div class="red_line"></div>
<div class="blue_line"></div>
<div class="guy1"></div>
<div class="guy2"></div>
<div class="title"></div>
<div class="text"></div>
<div class="logo2"></div>
</div>
CSS
.title{
margin-left:151px;
margin-top:20px;
width:149px;
height:81px;
/*will be reviced this background at next step
due to the initial position*/
background:url('sprite.png') left bottom;
}
.text{
margin-left:153px;
margin-top:115px;
width:136px;
height:28px;
background:url('sprite.png') left -180px;
}
.logo2{
margin-left:185px;
margin-top:179px;
width:101px;
height:40px;
background:url('sprite.png') left -140px;
}
Set up initial attributes of elements for last scene
CSS
.guy2{
opacity:0;
}
.title{
/*revice this*/
background:url('sprite.png') 150px bottom;
}
.text{
opacity:0;
}
.logo2{
opacity:0;
}
Set up transition information
CSS
.guy1{
/*moves from bottom to top*/
-webkit-transition:all 3s ease-in-out;
}
.guy2{
/*fades in 3.5sec after
the first image finishes the animation*/
-webkit-transition:all 0.8s ease 3.5s;
}
.title{
/*slides from right to left 4s later*/
-webkit-transition:all 0.8s ease-in-out 4s;
}
.text{
/*fade in 5.5s later*/
-webkit-transition:all 0.8s ease 5.5s;
}
.logo2{
/*fade in 6.2s later*/
-webkit-transition:all 0.8s ease 6.2s;
}
Set up to start the entire animation
CSS
#banner.show .guy1{
background-position:left top;
}
#banner.show .guy2{
opacity:1;
}
#banner.show .title{
background-position:left bottom;
}
#banner.show .text{
opacity:1;
}
#banner.show .logo2{
opacity:1;
}
Javascript
var elment = document.getElementById('banner');
elment.className = 'show';
Click here to call the javascript
Reference
Nike Jordan BCT Low
(Please reload if an image doesn’t show well during the animation.)
Lists of CSS Properties