Week 12: Animations, Transitions & Transforms
Agenda
- CSS Transforms
- CSS Transitions
- CSS Animations
# Transforms
Transforms can be used in combination with transitions so that the value of the transform changes over a period of time.
There are 2D and 3D transforms. Most of what we do will be using the 2D Transforms
Multiple values can be applied to a transform by leaving a space between each.
.box {
transform: rotate(30deg);
}
.box:hover {
transform: rotate(60deg);
}
.thing {
transform: translateX(200px) translateY(-50px) scale(2);
}
.thing:hover {
transform: translateX(100px) translateY(0px) scale(1);
}
2
3
4
5
6
7
8
9
10
11
12
If you want to use transforms in combination with transitions then you must make sure that all the values used in the transition are also used in the default values.
In the example above, the transform change would take place instantaneously.
# Transitions
Transitions typically get used in combination with pseudo-classes like :hover or when a an element is being added to the screen or about to be removed from the screen.
The Transition needs several values: property to change, duration for the change, timing function, and a delay before starting.
By default the delay is set to zero.
For the property name we can either use the default keyword all or an actual property name.
The unit for duration and the delay is s, which stands for seconds.
li:hover {
transition: all 0.4s linear;
}
p {
background-color: #336699; /* starting value */
transition: background-color 0.5s ease-out;
}
/* when the class "changed" is added to the paragraph the change
in background-color will be initiated. */
p.changed {
background-color: #6699cc; /* ending value */
}
2
3
4
5
6
7
8
9
10
11
12
Visual Guide to Transition properties (opens new window)
# Animations
The difference with an animation is that you can define the different values for various CSS properties at different percentages of the timeline in the animation. We then give a name to the animation which can be used within other styles.
When you add the animation name to a style definition, you also state how long you want it to take and how many times you want it to repeat.
/* use an animation */
.box {
animation-direction: normal;
animation-duration: 3s;
animation-iteration-count: infinite; /* keep looping */
animation-name: thing;
}
/* define an animation */
@keyframes thing {
0% {
scale: 0;
background-color: cornflowerblue;
}
50% {
scale: 1;
background-color: cornsilk;
}
100% {
scale: 2;
background-color: coral;
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Visual Guide to Animation properties (opens new window)
# Calls to Action
When designing your webpages you want to do so in a way that encourages users to follow a specific series of steps on that page.
When a user looks at a webpage, your goal should be to make it plainly obvious to the user what they can do on that page. It should be clear where the calls to action are.
A call to action is something like a link or a button. It is designed in a way that encourages a user to do something.
A purchase button or a next button could be a call to action.
# To Do Before Week 13
Self-Directed To Do
Explore the Tailwind CSS documentation (opens new window).