Bummer! This is just a preview. You need to be signed in with an account to view the entire instruction.

(UPI) Chapter 11: How to use CSS transitions, transforms, animations, and filters

Well done!

You have completed (UPI) Chapter 11: How to use CSS transitions, transforms, animations, and filters!

Sign up for Treehouse Back to Library
Instruction

Examples of CSS Transitions

Transition on Hover

In this example, the font size and color of a heading change gradually when the user hovers over it.

HTML:

<h1>Hover over this heading to see its transition</h1>

CSS:

h1 {
    font-size: 120%;
    color: blue;
    transition: font-size 2s ease-out 1s, color 2s ease-in 1s;
}
h1:hover {
    cursor: pointer;
    font-size: 1...