Basic Transition

This link has styles for a default state and a hover state, and right now the changes all take place instantaneously on hover. Let's add a transition:

Add a .7s transition that only works when the state changes to hover and only affects the background-color

Hint: Make sure your properties are in alphabetical order.

Transitioning All Properties

Actually, let's change it so that all properties that can be transitioned are used instead of just the background-color.

Transition Timing Functions

Right now, our transition plays at a constant speed, which isn't very naturalistic. Add a value to the transition that will make speed of change start fast and end slow.

Transitioning Back

As is, the transition only happens when animating to the hover state. Add the CSS to make the transition happen in both directions, so that it also transitions when going back to the non-hovered state.

Hint: Make sure your properties are in alphabetical order.

Applying a Keyframe Animation

Here we have a keyframe animation already written, but it doesn't work just yet. Apply the keyframe animation to the h1 and make it last .8s.

Hint: Make sure your properties are in alphabetical order.

Writing Keyframes

Here we have the animation property applied, but the keyframe animation it references doesn't exist. Create the keyframe animation to do the following:

1. At 0%, the text color should be #963ec9.
2. At 25%, the text color should be #c93e47.
3. At 50%, the text color should be #c9ad3e.
4. At 75%, the text color should be #4cc93e.
5. At 100%, the text color should be #000.

Hint: Write the animation after the existing CSS.

Writing Keyframes

The animation here works as is, but it changes at a constant rate. To make things a little more naturalistic, add the value to make the animation start slow, speed up, then slow back down.