about this tutorial
Goal
The objective of this tutorial is to teach you the fundamentals, features and implementation of CSS3 Animation to your webpage.
Lessons
This tutorial will teach users the functionality and how to properly use the following in CSS3 Animation:
@keyframes
CSS3 Animation Properties
CSS3 Transform Properties
CSS3 Transition Properties
Browser support
Prerequisite
For this tutorial, you will need to know all the fundamentals of HTML and CSS. If you don’t remember or feel you are ready, please review the previous website School of HTML and CSS.
What is css3 animation?
As any user knows, there are websites that feature animated webpage elements. Users may have seen backgrounds that are animated, as well as transformed and transitional elements on the webpage. For a long time, web developers relied on JavaScript and flash to integrate Animation on webpages. Now with CSS3, these methods can be replaced. Developers can incorporate animation on a webpage by using only the stylesheet, which is called CSS3 Animation.
CSS3 Animation gives web developers the ability to stylize elements with dynamic, transitional, and transformative effects. This process helps to make animation on a webpage more seamless. The focus of this tutorial is CSS3 Animation keyframes, properties and how to create animation in CSS. If want to see examples, click on the links below:
Pure CSS3 AT-AT Walker by Anthony Calzadilla
@keyframes rule
If you read the CSS3 Media Queries tutorial, you know media queries must start with @media. CSS3 Animation is a little different but ultimately is the same concept. To use Animation in CSS, start with @keyframe selector. It needs to be given a value name, this will designate a block of code for animation.
In this first example, we use the selectors from and to which will make the element’s background turn from blue to purple.
Example:
@keyframes animatedExample {
from {background: blue;}
to {background: purple;}
}
css3 animation properties
Once there is a @keyframe selector, you will need to attach it to an element. This can be done with CSS3 Animation Properties. These properties will instruct the keyframe on how to display the animation. CSS3 Animation Properties can affect the timing and movement of the animation. The following are the names of CSS3 Animation Properties and their functions:
Animation-name: will connect the element to the @keyframe selector though the value name.
Animation-delay: will determine how many seconds until the animation start. The values are “s” which stands for seconds and “ms” which stands for “milliseconds.”
Animation-direction: will determine which way the animation is played. The property values are:
normal: the animation is played forward
reverse: the animation is played backwards
alternate: the animation is played forward then backwards
alternate-reverse: the animation is played backwards then forward
Animation-duration: will determine how many seconds for the animation to cycle though. The values are “s” which stands for seconds and “ms" which stands for milseconds.
Animation-iteration-count: will play the animation a designated amount of times. In other words, if you make the vaule 4, then the animation will play four times. Also, you can insert a value called infinite, which will replay the animation on a endless cycle.
Animation-play-state: will pause or run the animation. This is usually done by adding a hover state. The property values are
running: the animation is played as normal
paused: the animation is paused, until otherwise noted
Animation-timing-function: will play the animation in varied speeds. The property values are:
linear: the animation starts at normal speed
ease: the animation starts at a slow speed then quickly increases
ease-in: the animation starts with a slow speed)
ease-out: the animation ends with a slow speed
ease-in-out: the animation starts and ends with a slow speed
Now that you know about the different CSS3 Animation Properties, you can use the shortcut property.
Animation: is the shortcut property for CSS3 Animation. It will allow you to simplify the CSS for animation
If you want to create the animated effect of changing colors, like this square below:
Example:
The HTML should like this:
<div id="square"></div>
The CSS should like this:
@keyframes animatedExample {
0% {background: #A4E91C;}
25% {background: #E52F32;}
50% {background: #525051;}
100% {background: #5FBAF4;}
}
@-moz-keyframes animatedExample {
0% {background: #A4E91C;}
25% {background: #E52F32;}
50% {background: #525051;}
100% {background: #5FBAF4;}
}
@-webkit-keyframes animatedExample {
0% {background: #A4E91C;}
25% {background: #E52F32;}
50% {background: #525051;}
100% {background: #5FBAF4;}
}
.square {
width: 400px;
height: 200px;
background:#A4E91C;
-moz-animation-name: animatedexample;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-webkit-animation-name: animatedexample;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
}
css3 transformations
Next, we will learn how to rotate, scale, skew, and translate elements by using the transform property. Transform values deal with the ‘X’ ‘Y’ and ‘Z’ on the axis scale and angle scale. This property can be used with CSS3 Animation. All values need to be followed by open and closed parenthesis. The following are the names of transform values and their functions:
Rotate will make a denoted element rotate on the axis by using degrees as values. Although, this value has assorted versions, such as rotateX, rotateY, and rotateZ.
Scale: can stretch a denoted element on the axis. Like rotate, this value has assorted versions, such as scaleX, scaleY, and scaleZ.
Skew: can slant a denoted element by the axis. This value has assorted versions, such as skewX, skewY, and skewZ.
Translate: will move the denoted element up or down on its axis. The following are specific variations of this property: translateX (will only move on the x-axis), translateY (will only move on the y-axis), translateZ (will only move on the z-axis).
If you want to make an element skewed from a 20 degree angle like this box below:
Then the HTML and CSS should look like this:
The HTML should like this:
<div id="skewed" class="box">Example</div>
The CSS should like this:
.skewed {
margin: 0 auto;
width: 125px;
height:80px;
background:#AD3636;
transform:skewY(20deg);
}
CSS3 Transitions
Now that we have done animation and transform properties, it is important to learn how to create transitions. CSS3 Transitions work somewhat similarly to CSS3 Animation, like durations and timing. It also has four properties and a shorthand property. The main difference between CSS3 Transitions and CSS3 Animation is control and triggering. While CSS3 Animation gives developers more control over the movements of animation with keyframes, CSS3 Transitions is straight forward, playing beginning to end. On the other hand, unlike CSS3 Animation, CSS3 Transitions are more responsive to when the cursor hovers over the denoted element. Remember, you must add a hover to the element. The following are the names of transition values and their functions:
Transition-property: will make the element change its width and/or height when the cursor is over it.
Transition-delay: will determine how many seconds until the transition starts. The values are “s” which stands for seconds and “ms” which stands for “milieconds.”
Transition-duration: will determine how much time for the transition to complete. The values are “s” which stands for seconds and “ms” which stands for milseconds.
Transition-timing-function: will play the Transition at varied speeds. The property values are:
linear: the transition starts at normal speed
ease: the transition starts at a slow speed then quickly increases
ease-in: the transition starts with a slow speed)
ease-out: the transition ends with a slow speed
ease-in-out: the transition starts and ends with a slow speed
Transition: is the shorthand property. We will use this property for this tutorial.
If you want to create an advanced transitional effect, like this expanding box below.
Example:
You will need to create a div and give it both an id and a class attributs. For instance, give the class attribute the name of “box” and the id attribute the name of “expanding”
The HTML should like this:
<div id="expanding" class="box">Hover this example</div>
The CSS should like this:
.box {
border: 3px solid #0B4F74;
padding: 10px;
height:75px;
width:512px;
}
#expanding {
background-color:#E3DEDE;
border: 12px solid #0B4F74;
transition: all 1s linear 0s;
}
#expanding:hover {
border: 60px solid #066717;
}
Keep this in mind for the practice assignment.
Browser support
Before we move on to practicing these skills, you need to make the animation, transform, and transition effects become compatible with any browser. In order to do this, you will to add vendor-prefixed properties. To learn more click here. It is simple to do, copy and paste the animation, transform, and transition properties and add one of the following vendor-prefixed properties before the animation, transform, and transition properties.
-moz-: is for Mozilla Firefox
-webkit-: is for Apple Safari and Google Chrome
Summary
CSS3 Animation, Transformation, and Transition allows web developers the ability to create dynamic webpages.
If you want or need to see alternate explanations and tutorials of CSS3 Animation, Transformation,and Transition, check out these links and videos:
practice
Now it’s time to put your acquired skills to work. Your assignments are to create three webpages similar to the examples below. You are allowed to experiment with these examples or come with your own.
Click on the following link to see: The animation effects demonstration
Click on the following link to see: The transform effects demonstration
Click on the following link to see: The transition effects demonstration
If you get stuck on the assignment or want to see how it was done as compared to yours, click the answer sheets below: