Pseudo-Classes, Transitions, & Keyframes
Fall 2023
Announcements
Outline
Outline
Pseudo-class Review
“A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user's pointer hovers over the button and this selected button can then be styled.”
When do you use them (see demos):
Pseudo-class Demos
Demo walkthrough (transitions/01-pseudo-classes):
Outline
Transitions (Review)
Transitions are often used in combination with a pseudo-class to “transition” between the off state and the on state using animation.
8
Transition Syntax
9
Transition: Example
a {
color: red;
transition: all 0.3s ease-out 0s;
transition-property: color, margin;
}
a:hover {
color: blue;
font-size: 200%;
}
10
Transitions: Demo
02-pseudo-classes-with-transitions
11
Outline
Preview: Using Transitions with JavaScript
Transitions are often used in combination with JavaScript (which we’ll talk more about after Spring Break. Let’s take a look at some techniques that use transitions and JavaScript and talk through how they work…
Outline
Keyframe Animations
What is a keyframe?
Keyframes are a way to make more complex animations.
Example: Define the keyframe, then apply it
#myMessage {
animation: bounceIn 2s ease-in-out;
}
@keyframes bounceIn {
0% {
transform: scale(0.1);
}
60% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
Animation properties
animation-name | Name of the keyframe you defined. |
animation-timing-function | e.g., linear, ease-in, ease-out |
animation-delay | how long to wait before animation starts |
animation-iteration-count | How many times animation should repeat |
animation-direction | normal, reverse, alternate, alternate-reverse |
animation-fill-mode | e.g., forwards, backwards, normal, both |
animation-play-state | e.g., paused, running |
Demos
Let’s check out the demo files!
Outline
Gallery of Inspiration
There are also a ton of animation libraries that you can use to jazz up your websites. For instance:
Libraries for implementing scrolling effects…
There are also a ton of animation libraries that you can use to jazz up your websites. For instance:
Outline
Pick an Activity
Pick one activity and complete it:
If you need to make up a tutorial, you can submit this as a completed tutorial assignment. Just email Sarah the link to your completed activity (linked from your homepage).