#CSS Animations
###Objectives
- Be able to explain what CSS animation does
- Understand @keyframe rules
- Be able to explain -webkit, -moz, -o
- Be able to change the speed, the number of times an animation runs, and how to delay an animation
- Animating CSS sprites
###What are CSS3 Animations
An animation lets an element gradually change from one style to another. You can run the CSS3 properties as many times as you want. To begin animating, you need to first specify some keyframes for animation.
style.css
#changeColor
{
width: 100px;
height: 100px;
background-color: red;
border-radius: 5px;
-webkit-animation-name: changeColor; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
animation-name: changeColor;
animation-duration: 4s;
}
@-webkit-keyframes changeColor{
from{background-color: red;}
to{background-color: yellow;}
}
@keyframes changeColor{
from{background-color: red;}
to{background-color: yellow;}
}
index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"
/>
<title>CSS Transitions</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="changeColor">
</div>
</body>
</html>
###Second demo
What if we switched the from and to to percentages?
0%{background-color: red;}
25%{background-color: yellow;}
50%{background-color: purple;}
100%{background-color: blue;}
###Single Player Activity
Now try and do from 0% to 100%, with 10% increments
5 min
###Moving the cube
Now, let's try and animate the cube to move
Let's make sure the #changeColor cube is now position: relative;
Let's change the animation to
@keyframes changeColor{
0%{background-color: red; left: 0px; top: 0px;}
10%{background-color: yellow; left: 200px; top: 0px;}
20%{background-color: purple; left: 200px; top: 200px}
30%{background-color: blue; left: 0px; top: 200px;}
40%{background-color: black; left: 0px; top: 0px;}
50%{background-color: purple; left: 100px; top: 100px;}
60%{background-color: red; left: 0px; top: 200px;}
70%{background-color: yellow; left: 40px; top: 50px;}
80%{background-color: purple; left: 10px; top: 10px;}
90%{background-color: blue; left: 50px; top: 0px;}
100%{background-color: black; left: 40px; top: 20px;}
}
@-webkit-keyframes changeColor{
0%{background-color: red; left: 0px; top: 0px;}
10%{background-color: yellow; left: 200px; top: 0px;}
20%{background-color: purple; left: 200px; top: 200px}
30%{background-color: blue; left: 0px; top: 200px;}
40%{background-color: black; left: 0px; top: 0px;}
50%{background-color: purple; left: 100px; top: 100px;}
60%{background-color: red; left: 0px; top: 200px;}
70%{background-color: yellow; left: 40px; top: 50px;}
80%{background-color: purple; left: 10px; top: 10px;}
90%{background-color: blue; left: 50px; top: 0px;}
100%{background-color: black; left: 40px; top: 20px;}
}
###Single Player Activity
Now, create a circle shape on your screen and move it using keyframes!
10 min
###Delays
To set a delay, you need to add the animation-delay attribute, as such
#changeColor
{
width: 100px;
height: 100px;
background-color: red;
border-radius: 5px;
position: relative;
-webkit-animation-name: changeColor; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-delay: 3s;
animation-name: changeColor;
animation-duration: 4s;
animation-delay: 3s;
}
This will delay your animation for three seconds
###Single Player Activity
On the circle you created, go ahead and add a 2-second delay before the animation
1 min
###Iterations
To change the number of times this will run, use animation-iteration-count
#changeColor
{
width: 100px;
height: 100px;
background-color: red;
border-radius: 5px;
position: relative;
-webkit-animation-name: changeColor; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-delay: 3s;
-webkit-animation-iteration-count: 2;
animation-name: changeColor;
animation-duration: 4s;
animation-delay: 3s;
animation-iteration-count: 2;
}
This will run your code twice!
###Challenge
Now, make your circle run infinitely
2 mins
###Animation direction
Change the directions using animation-direction: reverse!
#changeColor
{
width: 100px;
height: 100px;
background-color: red;
border-radius: 5px;
position: relative;
-webkit-animation-name: changeColor; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-delay: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: reverse;
animation-name: changeColor;
animation-duration: 4s;
animation-delay: 3s;
animation-iteration-count: infinite;
animation-direction: reverse;
}
Now, try and change animation direction from reverse to alternate!
###Working with Sprites!
Let's source the foxtail.png into our index.html
#foxtail
{
background: url('../img/foxtail.png') 0 0 no-repeat;
width: 156px;
height: 156px;
}
Adding the finishing touches
#foxtail
{
background: url('../img/foxtail.png') 0 0 no-repeat;
width: 156px;
height: 156px;
animation: fox 4s steps(44) infinite;
-webkit-animation: fox 4s steps(44) infinite;
}
@keyframes fox
{
from{background-position: -6864px 0;}
to{background-position: 0 0;}
}
@-webkit-keyframes fox
{
from{background-position: -6864px 0;}
to{background-position: 0 0;}
}
###Questions
- What are keyframes?
- What is the differences between using percentages vs. from - to
- What are CSS sprites?