Ready to learn more about CSS Transitions? Great, let's do a quick review and then get started!

INTRODUCTION TO CSS TRANSITIONS

CSS Transitions are the most simple way to create an animation in CSS.

In a transition, you change the value of a property, and you tell CSS to slowly change it according to some parameters, towards a final state.

In CSS, transitions are written using four transition properties: transition-property, transition-duration, transition-timing-function, and transition-delay, along with the transition property as a shorthand for the four longhand properties.

Property Description

transition-property: the CSS property that should transition

transition-duration: the duration of the transition

transition-timing-function: the timing function used by the animation (common values: linear, ease). Default: ease

transition-delay: optional number of seconds to wait before starting the animation

Transitions are declared along with the regular styles on an element. Whenever a target property changes, if a transition is set on that property, the browser will apply a transition to make the change gradual. While the most common initiation of a transition is changing property values from a default state to a hovered state, transitions also work if the property is changed by adding a class, manipulating the DOM, or otherwise changing the state.

You can declare transition properties in the initial state, the changed state, or in both the initial and changed states. If you only declare the transition on the initial state, when the state changes, it will transition to the changed state as you indicate with CSS transition properties. If and when it changes back to the initial state, the transition timing is reversed. You can override this default reverse transition by declaring different transitions in both the initial and changed states.

In this challenge you are going to try to recreate the animation in the following gif. To do this you will be challenged to apply different speeds with the transition-timing-function:

I want you to create 4 boxes that all expand at different rates. These boxes are labeled with the speed that I'm challenging you to re-create (no need to add text inside the box).

Here are the MDN docs on transition-timing-function that you can lean on to try to re-create these animation speeds.

If you are feeling motivated feel free to dive in and start building this on your own. If you need a few pointers I'll be happy to do that below! However, I would encourage you that even if you feel completely lost, to try for at least 15 minutes right now to make something happen. I promise it will help to make the clues I provide stick even more!

Ok, here is some help!

These are just suggestions as there are many ways that you can accomplish this task.

1. Create an HTML file and add 4 divs. In your CSS style those divs to be the shape of boxes. You will just need to target the div tag with your CSS and give it properties of height, width and background-color.

2. With CSS target the div tag with the pseudo selector hover (div:hover) you will name the CSS property and how you want its value to change. Hint: It's the width property.

3. In your HTML you will give each diff a different id or class that you can target so you can give each div a different transition-timing-function speed.

4. With the CSS target each of the 4 divs. You will next apply the transition-timing-function and assign to each of those properties the value needed to mimic the animation we have as our goal. Remember, to check the MDN docs to research what values to use for the transition-timing-function property.

I hope these clues help! They should be all you need to accomplish this task. If you need any assistance or get stuck anywhere feel free to check out the video walkthrough where I talk and code through the challenge.