Here are the main distinctions between them:

This handbook uses examples to explain the two animating techniques so that you can understand their similarities and differences.

Table of Contents

1. What Are CSS Transitions?
2. Categories of CSS Transition Properties
   • What Are the Required CSS Transition Properties?
   • What is the CSS transition-property?
   • What is the CSS transition-duration Property?
   • Examples of the Required CSS Transition Properties
   • What Are the Optional CSS Transition Properties?
   • What is the CSS transition-timing-function Property?
   • What is the CSS transition-delay Property?
   • Examples of the Optional CSS Transition Properties
3. Shorthand for Defining the CSS Transition Properties
4. What is CSS Animation?
   • Components of CSS Animations
   • What are CSS @keyframes?
5. What Are CSS Animation Properties?
   • What is the CSS animation-name Property?
   • What is the CSS animation-duration Property?
   • What is the CSS animation-timing-function Property?
   • What is the CSS animation-delay Property?
   • What is the CSS animation-iteration-count Property?
   • What is the CSS animation-direction Property?
   • What is the CSS animation-play-state Property?
   • What is the CSS animation-fill-mode Property?
6. What is the CSS animation Property?
7. Important Stuff to Know about CSS Transitions and Animations
8. Wrapping up

Without further ado, let's discuss CSS transitions.

What Are CSS Transitions?

CSS transitions provide a smooth and gradual way to change a specific CSS property's value.

So, instead of allowing browsers to change a property's value immediately, CSS transitions cause the change to happen smoothly over a specified period of time.

For instance, suppose you wish to change an element's size on hover. In that case, you have two options:

1. Implement the change without CSS transitions.
2. Use CSS transitions to transition smoothly from the element's initial size to its new state.

Let's see some examples of the two options.

How to change an image's size on mouse hover without using CSS transitions

img {
  width: 40%;
}

img:hover {
  width: 100%;
}

Try Editing It

The code above instantaneously changes the image's size from its initial width (40%) to its new dimension (100%) because we did not use CSS transitions.

With CSS transitions, you will get a much more pleasing experience. Let's see an example below.

How to change an image's size on mouse hover with CSS transitions

img {
  width: 40%;
  transition: width 3s ease-out 0.4s;
}

img:hover {
  width: 100%;
}

Try Editing It

The transition property applied a smooth and gradual transition from width: 40% to width: 100% on the image.

Categories of CSS Transition Properties

We have two categories of CSS transition properties:

• Required transition properties
• Optional transition properties

Let's discuss the two.

What Are the Required CSS Transition Properties?

The two required properties you need to create CSS transitions are:

• transition-property
• transition-duration

What is the CSS transition-property?

The CSS transition-property specifies the CSS property you wish to transition from its initial to its new state.

What is the CSS transition-duration Property?

The CSS transition-duration property defines the length of time in which browsers should complete the selected element's transition. In other words, transition-duration sets the total start-to-finish time.

Note the following:

• The transition-duration property only accepts time in milliseconds (ms) or seconds (s).
• Zero seconds (0s) is the transition-duration's default value. Therefore, no transition event will occur if you do not define a transition-duration property.
• transition-duration accepts only a zero (0) or a positive numeric value. Browsers will ignore the duration declaration if you provide anything else.

Examples of the Required CSS Transition Properties

Below are some examples of the two required CSS transition properties.

How to transition an element's width within three seconds

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
}

img:hover {
  width: 100%;
}

Try Editing It

Here's what we did in the snippet above:

1. The transition-property tells browsers to transition the img's width from its initial value (40%) to its new state (100%).
2. We used the transition-duration property to define three seconds (3s) duration from the start to the end of the transition.

Therefore, instead of an instantaneous change from the image's initial width (40%) to its new size (100%), browsers will transition smoothly between the old and new state in three seconds (3s).

How to transition a font's size within five seconds

p {
  font-size: 1rem;
  transition-property: font-size;
  transition-duration: 5s;
}

p:hover {
  font-size: 7rem;
}

Try Editing It

Here's what we did in the snippet above:

1. The transition-property informs browsers to transition the p element's font-size.
2. We used the transition-duration property to define a five-second (5s) duration from the start to the end of the transition.

Therefore, instead of an immediate change from the paragraph's initial font size (1rem) to its new size (7rem), browsers will transition smoothly between the old and new state in five seconds (5s).

Let's now discuss the optional CSS transition properties.

What Are the Optional CSS Transition Properties?

The two optional CSS transition properties are:

• transition-timing-function
• transition-delay

What is the CSS transition-timing-function Property?

The CSS transition-timing-function property defines the implementation timing (speed) of the selected element's transition.

In other words, the transition-timing-function specifies the speed for implementing the transition at various intervals of its duration.

The values the transition-timing-function property accepts are:

• ease: Starts the transition slowly. Then, speeds it up and ends it slowly. ease is the transition-timing-function property's default value. It is equivalent to cubic-bezier(0.25,0.1,0.25,1).
• ease-in: Starts the transition slowly with a gradual increase in speed. It is equal to cubic-bezier(0.42,0,1,1).
• ease-out: Starts fast and ends the transition slowly. It is equivalent to cubic-bezier(0,0,0.58,1).
• ease-in-out: Starts and ends the transition slowly. It is equal to cubic-bezier(0.42,0,0.58,1).
• linear: Starts and ends the transition using a consistent speed throughout the transition's duration. It is equivalent to cubic-bezier(0,0,1,1).
• cubic-bezier(p1, p2, p3, p4): Allows you to define the values of the cubic-bezier curve.

What is the CSS transition-delay Property?

The CSS transition-delay property defines how long the browser should wait before it starts the transition.

Note the following:

• The transition-delay property must be in milliseconds (ms) or seconds (s).
• 0s is the transition-delay's default value. It causes the transition to start immediately from the moment browsers apply it to an HTML element.
• A negative value causes the transition to begin immediately from the specified time. For instance, suppose an element's transition-delay value is -3s. In that case, the transition will start immediately at 3 seconds.
• A positive value causes the transition to begin after the specified delay time has elapsed. For instance, suppose an element's transition-delay value is 3s. In that case, the transition will start after a 3-second delay.

Examples of the Optional CSS Transition Properties

Below are some examples of the two optional CSS transition properties.

How to transition an element's width with an ease-out speed

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: ease-out;
}

img:hover {
  width: 100%;
}

Try Editing It

Here's what we did in the snippet above:

1. The transition-property informs browsers to transition the img element's width.
2. We used the transition-duration property to define three seconds (3s) duration from the start to the end of the transition.
3. We used the transition-timing-function property to begin the transition quickly and end it slowly.

How to transition an element's width with a linear speed

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: linear;
}

img:hover {
  width: 100%;
}

Try Editing It

Here's what we did in the snippet above:

1. The transition-property informs browsers to transition the img element's width.
2. We used the transition-duration property to define three seconds (3s) duration from the start to the end of the transition.
3. The transition-timing-function property tells browsers to transition from the element's initial width to its new size using a consistent transition speed throughout.

How to transition an element's width with a two-second delay

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: linear;
  transition-delay: 2s;
}

img:hover {
  width: 100%;
}

Try Editing It

Here's what we did in the snippet above:

1. The transition-property informs browsers to transition the img element's width property.
2. We used the transition-duration property to define three seconds (3s) duration from the start to the end of the transition.
3. The transition-timing-function property transitions the img element's width using a consistent transition speed.
4. We used the transition-delay property to apply a two-second (2s) delay to the starting time of the transition.

Now that we know the CSS transition properties, we can discuss defining them with a shorthand syntax.

Shorthand for Defining the CSS Transition Properties

We use the transition property as shorthand for the transition-property, transition-duration, transition-timing-function, and transition-delay properties.

In other words, instead of writing:

img {
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: linear;
  transition-delay: 2s;
}

You can alternatively use the transition property to shorten your code like so:

img {
  transition: width 3s linear 2s;
}

Try Editing It

Here is the transition property's syntax:

transition: <property-name> <duration> <timing-function> <delay>;

Note that you can use the transition property to transition the state of multiple CSS properties.

Here's an example:

img {
  width: 40%;
  opacity: 0.4;
  transition: width 3s linear, opacity 4s ease-out, transform 5s;
}

img:hover {
  width: 100%;
  opacity: 1;
  transform: rotate(45deg);
}

Try Editing It

The snippet above used commas (,) to separate each of the transitional properties we are applying to the img element.

So, now that we know what CSS transitions are and how they work, we can discuss CSS animations.

What is CSS Animation?

CSS animations provide a smooth and gradual way to animate an element's style changes from one keyframe to another.

Components of CSS Animations

CSS animations consist of two components:

1. Keyframes
2. Animation properties

What are CSS @keyframes?

@keyframes define the styles you want browsers to apply smoothly to an element at some specified key moments (frames).

Syntax of CSS @keyframes

A CSS @keyframes at-rule consists of the following:

1. An @keyframes keyword
2. The @keyframes' name
3. A block of zero or more keyframes
4. The animation's key moment selector
5. The key moment's style declarations

Here's an illustration:

A CSS @keyframes at-rule consists of a keyword, a name, and a block of keyframes

Examples of CSS @keyframes

Below are examples of the CSS @keyframes.

How to define change-color's keyframes

@keyframes change-color {
  /* The first keyframe */
  0% {background-color: purple;}
  /* The last keyframe */
  100% {background-color: yellow;}
}

Here's what we did in the snippet above:

1. We created the @keyframes at-rule named change-color.
2. We defined a keyframe for browsers to apply when an associated element's animation is at its zero percent (0%) duration.
3. We defined a keyframe for browsers to apply when an associated element's animation is at its one hundred percent (100%) duration.

Note:

• You can name your @keyframes anything you wish.
• 0% is equivalent to the keyword from. And 100% is the same as the keyword to. In other words, the snippet above is equal to the following:

@keyframes change-color {
  /* The first keyframe */
  from {background-color: purple;} 
  /* The last keyframe */
  to {background-color: yellow;} 
}

• An animation's start and end states (from and to) are optional.
• Suppose you omit an @keyframes' start (0%) or end (100%) state. In that case, browsers will default to the element's existing styles for either state.
• The important rule (!important) does not work in keyframes. Browsers will ignore any keyframe declaration with an !important rule.

Let's see another example.

How to define shape-image's keyframes

@keyframes shape-image {
  0% { width: 40%; border: 5px solid blue;}
  40% { width: 70%; border: 1px solid red; border-radius: 50%;}
  75% { width: 50%; border: 30px solid green;}
  100% { width: 100%; border: 7px solid purple;}
}

Here's what we did in the snippet above:

1. We created the @keyframes ruleset named shape-image.
2. We defined four keyframes for browsers to apply when an associated element's animation is at the specified key moments.

Tip: Use the CSSKeyframesRule interface in JavaScript to access the CSS @keyframes at-rules.

So, now that we know the CSS @keyframes ruleset, we can discuss the other component of CSS animations—animation properties.

What Are CSS Animation Properties?

CSS animation properties inform browsers about the animation you wish to apply to a specific element.

In other words, CSS animation properties describe the animation's attributes, such as its name, duration, direction, and iteration.

The nine (9) types of CSS animation properties are:

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-play-state
• animation-fill-mode
• animation

Let's discuss each one now.

What is the CSS animation-name property?

The CSS animation-name property defines the name of the @keyframes at-rules containing the styles you wish to apply to a specific element.

Here's an example:

div {
  width: 150px;
  height: 150px;
  animation-name: change-color;
}

@keyframes change-color {
  from {background-color: purple;}
  to {background-color: yellow;}
}

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. We created change-color's @keyframes ruleset.
3. We defined two keyframes for browsers to use when the div element's animation is at its zero percent (0%) and one hundred percent (100%) duration.

Tip: You can use the keyword none to deactivate an animation.

What is the CSS animation-duration property?

The CSS animation-duration property defines the time to complete one animation cycle.

Note the following:

• The animation-duration property must be in milliseconds (ms) or seconds (s) units.
• animation-duration's value must be zero or positive. Otherwise, browsers will ignore the duration declaration.
• Zero seconds (0s) is animation-duration's default value.
• Suppose 0s is animation-duration's value. In that case, browsers will still execute the animation by firing the animationStart and animationEnd events. But the animation-fill-mode's value will determine whether the animation is visible. For instance, if you set the animation-fill-mode to none, the animation will be invisible.

Let's see some examples of the animation-duration property.

How to animate an element's color change within three seconds

div {
  width: 150px;
  height: 150px;
  animation-name: change-color;
  animation-duration: 3s;
}

@keyframes change-color {
  from {background-color: purple;}
  to {background-color: yellow;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to three seconds (3s).
3. We created change-color's @keyframes ruleset.
4. We defined two keyframes for browsers to apply when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

Therefore, browsers will create a smooth three-second animation from change-color's first keyframe to its last.

How to animate an image's border and width changes within seven seconds

img {
  animation-name: shape-image;
  animation-duration: 7s;
}

@keyframes shape-image {
  0% { width: 40%; border: 5px solid blue;}
  40% { width: 70%; border: 1px solid red; border-radius: 50%;}
  75% { width: 50%; border: 30px solid green;}
  100% { width: 100%; border: 7px solid purple;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the img element.
2. The animation-duration property sets the animation's runtime for one cycle to seven seconds (7s).
3. We created shape-image's @keyframes ruleset.
4. We defined four keyframes for browsers to apply when the image's animation is at the specified key moments.

Therefore, browsers will create a smooth seven-second animation from shape-image's first keyframe to its last.

What is the CSS animation-timing-function property?

The CSS animation-timing-function property defines an animation's implementation timing (speed) throughout its duration.

In other words, the animation-timing-function property specifies the speed for implementing the animation at various intervals of its duration.

The values the animation-timing-function property accepts are:

• ease: Starts the animation slowly. Then speeds it up and ends it slowly. ease is the animation-timing-function property's default value. It is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).
• ease-in: Starts the animation slowly with a gradual increase in speed. It is equivalent to cubic-bezier(0.42, 0, 1, 1).
• ease-out: Starts fast and ends the animation slowly. It is equivalent to cubic-bezier(0, 0, 0.58, 1).
• ease-in-out: Starts and ends the animation slowly. It is equivalent to cubic-bezier(0.42, 0, 0.58, 1).
• linear: Starts and ends the animation using a consistent speed throughout the animation's duration. It is equivalent to cubic-bezier(0, 0, 1, 1).
• cubic-bezier(p1, p2, p3, p4): Allows you to define the values of the cubic-Bezier curve.

Let's see some examples of the animation-timing-function property.

How to animate an element's width change using a linear speed

div {
  width: 150px;
  height: 150px;
  background-color: purple;
  animation-name: change-width;
  animation-duration: 7s;
  animation-timing-function: linear;
}

@keyframes change-width {
  from {width: 50px;}
  to {width: 100%;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to seven seconds (7s).
3. The linear timing function applied a consistent speed to the div's animation.
4. We created change-width's @keyframes ruleset.
5. We defined two keyframes for browsers to apply when the div's animation is at zero percent (0%) and one hundred percent (100%) duration.

Therefore, browsers will create a smooth seven-second animation from change-width's first keyframe to its last.

Let's see another example.

How to animate an element's width change using an ease-in-out and a linear speed

div {
  width: 150px;
  height: 150px;
  color: white;
  animation-name: change-width;
  animation-duration: 7s;
}

.first-div {
  background-color: purple;
  animation-timing-function: ease-in-out;
}

.second-div {
  background-color: orange;
  animation-timing-function: linear;
}

@keyframes change-width {
  from {width: 50px;}
  to {width: 100%;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to seven seconds (7s).
3. We used the ease-in-out timing function to apply a slow start and slow end speed to the first-div's animation.
4. The linear timing function applied a consistent speed to the second-div's animation.
5. We created change-width's @keyframes ruleset.
6. We defined two keyframes for browsers to apply when the div elements' animations are at their zero percent (0%) and one hundred percent (100%) durations.

Therefore, browsers will create a smooth seven-second animation from change-width's first keyframe to its last.

What is the CSS animation-delay property?

The CSS animation-delay property defines how long browsers should wait before starting an animation.

In other words, use animation-delay to specify whether the animation should start immediately from the beginning, immediately from a specific time, or later (after some delay).

Note the following:

• The animation-delay property must be in milliseconds (ms) or seconds (s) units.
• 0s is animation-delay's default value. It causes the animation to start once browsers apply it to an HTML element.
• A negative value causes the animation to start immediately from the specified time. For instance, suppose an element's animation-delay value is -3s. In that case, the animation will begin immediately at 3 seconds.
• A positive value causes the animation to start after the specified delay time has elapsed. For instance, suppose an element's animation-delay value is 3s. In that case, the animation will begin after a 3-second delay.

Let's see some examples of the animation-delay property.

How to animate an element's width change with a four-second delay

div {
  width: 150px;
  height: 150px;
  color: white;
  animation-name: change-width;
  animation-duration: 7s;
}

.first-div {
  background-color: purple;
  animation-timing-function: ease-in-out;
}

.second-div {
  background-color: orange;
  animation-timing-function: linear;
  animation-delay: 4s;
}

@keyframes change-width {
  from {width: 50px;}
  to {width: 100%;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div elements.
2. The animation-duration property sets the animation's runtime for one cycle to seven seconds (7s).
3. We used the ease-in-out timing function to apply a slow start and slow end speed to the first-div's animation.
4. The linear timing function applied a consistent speed to the second-div's animation.
5. The animation-delay property applied a four-second (4s) delay to the starting time of the second-div's animation.
6. We created change-width's @keyframes ruleset.
7. We defined two keyframes for browsers to apply when the div elements' animations are at their zero percent (0%) and one hundred percent (100%) durations.

Therefore, browsers will delay the second-div's animation for four seconds while starting the first-div's animation immediately.

Below is another example of the animation-delay property.

How to animate an element's width change from the fourth-second mark of the animation sequence

div {
  width: 150px;
  height: 150px;
  color: white;
  animation-name: change-width;
  animation-duration: 7s;
}

.first-div {
  background-color: purple;
  animation-timing-function: ease-in-out;
}

.second-div {
  background-color: orange;
  animation-timing-function: linear;
  animation-delay: -4s;
}

@keyframes change-width {
  from {width: 50px;}
  to {width: 100%;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div elements.
2. The animation-duration property sets the animation's runtime for one cycle to seven seconds (7s).
3. We used the ease-in-out timing function to apply a slow start and slow end speed to the first-div's animation.
4. The linear timing function applied a consistent speed to the second-div's animation.
5. The animation-delay property makes the second-div's animation start from the fourth-second mark of the animation sequence.
6. We created change-width's @keyframes ruleset.
7. We defined two keyframes for browsers to apply when the div elements' animations are at their zero percent (0%) and one hundred percent (100%) durations.

Therefore, browsers will start the second-div's animation immediately at the fourth-second mark.

What is the CSS animation-iteration-count property?

The CSS animation-iteration-count property defines the number of times browsers should repeat an animation.

Note the following:

• 1 is animation-iteration-count's default value.
• The animation-iteration-count property accepts non-integer values—for instance, 0.5 tells browsers to play half of a single animation cycle.
• animation-iteration-count does not accept negative values.
• An infinite value means browsers should repeat the animation forever.

Below are some examples.

How to animate an element's width change with a two-cycle iteration

div {
  width: 70px;
  height: 50px;
  background-color: purple;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 2;
}

@keyframes change-width {
  from {width: 70px;}
  to {width: 100%;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
4. The animation-iteration-count property tells browsers to run the animation twice.
5. We created change-width's @keyframes ruleset.
6. We defined two keyframes for browsers to apply when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

Therefore, browsers will run the div's animation in two cycles.

Below is another example of the animation-iteration-count property.

How to animate an element's width change with an infinite iteration

div {
  width: 70px;
  height: 50px;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
4. The animation-iteration-count property tells browsers to run the animation infinitely.
5. We created change-width's @keyframes ruleset.
6. We defined two keyframes for browsers to apply when the div element's animation is at its zero percent (0%) and one hundred percent (100%) duration.

Therefore, browsers will run the div's animation infinitely.

What is the CSS animation-direction property?

The CSS animation-direction property specifies whether the animation's first iteration should run forward or backward. It also defines whether browsers should alternate the direction of subsequent iterations.

The values animation-direction accepts are:

• normal: Play the animation in the normal direction (that is, forward). normal is animation-direction's default value.
• reverse: Play the animation in the reverse direction (backward).
• alternate: Play the first animation cycle in the normal direction. Then, alternates the subsequent iterations between the backward and forward directions.
• alternate-reverse: Play the first animation cycle in the reverse direction. Then, alternates the subsequent iterations between the forward and backward directions.

Below are some examples.

How to animate an element's width change while starting each animation cycle backward

div {
  width: 70px;
  height: 50px;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
4. The animation-iteration-count property tells browsers to run the animation infinitely.
5. The animation-direction property starts each animation cycle in reverse (backward).
6. We created change-width's @keyframes ruleset.
7. We defined two keyframes for browsers to apply when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

Below is another example of the animation-direction property.

How to animate an element's width change while alternating the animation's direction

div {
  width: 70px;
  height: 50px;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
4. The animation-iteration-count property tells browsers to run the animation infinitely.
5. The animation-direction property alternates the direction of each cycle's animation.
6. We created change-width's @keyframes ruleset.
7. We defined two keyframes for browsers to apply when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

What is the CSS animation-play-state property?

The CSS animation-play-state property specifies whether the browser is running or has paused a specific animation.

The values the animation-play-state property accepts are:

• running: Specifies that the browser is running the animation. running is animation-play-state's default value.
• paused: Specifies that the browser has paused the animation.

Here's an example:

div {
  width: 70px;
  height: 50px;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

div:hover {
  animation-play-state: paused;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
4. The animation-iteration-count property tells browsers to run the animation infinitely.
5. The animation-direction property alternates the direction of each cycle's animation.
6. We used the animation-play-state on the div's hover pseudo-class to pause the animation whenever users move their mouse over the div element.
7. We created change-width's @keyframes ruleset.
8. We defined two keyframes for browsers to apply when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

What is the CSS animation-fill-mode property?

The CSS animation-fill-mode property defines the styles browsers should apply to an element before (or after) its animation runs.

The values the animation-fill-mode property accepts are:

• none: Browsers will apply no style to the element before or after the animation runs. none is animation-fill-mode's default value.
• forwards: The element will retain the last keyframe's style declarations when the animation ends. (Note: The animation-direction and animation-iteration-count properties determine the last keyframe.)
• backwards: The element will retain the first keyframe's style declarations during the animation-delay period. (Note: The animation-direction property determines the first keyframe.)
• both: Browsers will apply both the forwards and backwards rules. Therefore, the animation properties will extend in both directions.

Below are some examples.

How to style an element after its animation ends

div {
  width: 70px;
  height: 50px;
  background-color: green;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
4. The animation-fill-mode property tells browsers to retain the last keyframe's style declarations when the animation ends.
5. We created change-width's @keyframes ruleset.
6. We defined two keyframes for browsers to apply when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

Below is another example of the animation-fill-mode property.

How to style an element during its animation delay period

div {
  width: 70px;
  height: 50px;
  background-color: green;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 3s;
  animation-fill-mode: backwards;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
4. The animation-fill-mode property tells browsers to retain the first keyframe's style declarations during the animation-delay period.
5. We created change-width's @keyframes ruleset.
6. We defined two keyframes for browsers to apply when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

Let's see a third example of the animation-fill-mode property.

How to style an element during its animation delay and after the animation

div {
  width: 70px;
  height: 50px;
  background-color: green;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 3s;
  animation-fill-mode: both;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

Try Editing It

Here's what we did in the snippet above:

1. The animation-name property specifies the @keyframes we wish to apply to the div element.
2. The animation-duration property sets the animation's runtime for one cycle to five seconds (5s).
3. We used the ease-in-out timing function to apply a slow start and slow end speed to the div's animation.
4. The animation-fill-mode property tells browsers to apply both the forwards and backwards rules.
5. We created change-width's @keyframes ruleset.
6. We defined two keyframes for browsers to use when the div element's animation is at zero percent (0%) and one hundred percent (100%) duration.

What is the CSS animation Property?

We use the animation property as a shorthand for:

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-play-state
• animation-fill-mode

In other words, instead of writing:

div {
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
  animation-iteration-count: 3;
  animation-direction: alternate;
  animation-play-state: running;
  animation-fill-mode: both;
}

You can alternatively use the animation property to shorten your code like so:

div {
  animation: 5s ease-in-out 2s 3 alternate both running change-width;
}

Try Editing It

Here is the animation property's syntax:

animation: animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state animation-name;

Note:

• The way you arrange the time values is essential. Browsers read the first time-value as animation-duration. And they assign the second one to animation-delay.
• It is best to list animation-name last. Otherwise, browsers may assign the animation-name's value to other properties.
• You can apply multiple @keyframes rulesets to an element using the animation property. Here's an example:

div {
  width: 70px;
  height: 70px;
  background-color: green;
  animation: 
    5s ease-in-out 3s 3 alternate both change-width, 
    5s 3s infinite alternate both change-shape, 
    5s 3s infinite rotate-hue;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

@keyframes change-shape {
  from {border-radius: 0%; border: 1px solid blue;}
  to {border-radius: 50%; border: 7px solid green;}
}

@keyframes rotate-hue {
  from {filter: hue-rotate(0deg);}
  to {filter: hue-rotate(360deg);}
}

Try Editing It

The snippet above applied three @keyframes rulesets to the div element using commas (,) to separate each @keyframes' configurations.

Note: We used the hue-rotate() function to rotate the div's colors.

Important Stuff to Know about CSS Transitions and Animations

1. You can't animate all CSS properties. Have a look at MDN's Animatable CSS properties article to see the ones you can animate.
2. CSS transitions and animations are expensive operations for most CSS properties—except opacity and transform. In other words, applying transitions (or animations) to any CSS box model property is inherently a CPU-intensive task. Therefore, animate only opacity, and transform properties if you are concerned about your page's performance.
3. Be mindful of the layout repainting issues that CSS transitions may cause through your elements' stacking order.

Wrapping up

In this article, we discuss the differences between CSS transitions and animations. We also used examples to discuss how to use them.

Thanks for reading.

And here's a useful React TypeScript resource:

I wrote a book about Creating NPM Packages!

It is a beginner-friendly book that takes you from zero to creating, testing, and publishing NPM packages like a pro.

A view

As you can see in the above image, when an input within the form gains focus, its label floats to the top and a semi-thick border appears around the input. If text gets typed into the input and the input loses focus, the label remains on top. Otherwise, the label drops back down into the input.

Many modern forms have some sort of transition applied to them. Not only do these transitions make the form more dynamic, but they also help guide the user on the state of the input (that is whether it has focus or not) and what kind of data each input is expected to handle.

In this tutorial, you will learn about some cool CSS features like transitions, selectors like :placeholder_focus ,and many other CSS properties you should know.

Let's dive in!

The HTML Markup

We are going to define the markup for our sign up form. But before that, we have to set up our HTML boilerplate and correctly link to our stylesheet from the head tag. You can easily do this with the Emmet plugin by typing ! then tab in your IDE/Code editor.

You can also copy this boilerplate and paste it into your index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

</body>
</html>

Within the body tag, we define the markup for our sign up form:

<div class="signupFrm">
    <form action="" class="form">
      <h1 class="title">Sign up</h1>

      <div class="inputContainer">
        <input type="text" class="input" placeholder="a">
        <label for="" class="label">Email</label>
      </div>

      <div class="inputContainer">
        <input type="text" class="input" placeholder="a">
        <label for="" class="label">Username</label>
      </div>

      <div class="inputContainer">
        <input type="text" class="input" placeholder="a">
        <label for="" class="label">Password</label>
      </div>

      <div class="inputContainer">
        <input type="text" class="input" placeholder="a">
        <label for="" class="label">Confirm Password</label>
      </div>

      <input type="submit" class="submitBtn" value="Sign up">
    </form>
  </div>

We create a container div to hold the form element. Each of the form's inputs, along with its text label, are wrapped inside a container div. The labels serve the purpose of informing the user what information each input should take in.

And our page will look like this:

HTML Form of four inputs and four labels

You may notice that the placeholder value we have assigned to all inputs is "a". This will be helpful later in the tutorial when we start to apply some dynamic logic.

How to Style the Form

Our form is pretty basic, so let's add some styling to make it look nicer.

First, we need to perform some resets and set the background color:

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

/* Get rid of all default margins/paddings. Set typeface */
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: white;
  font-family: "lato", sans-serif;
}

Here's what our page will look like:

Without any styling yet

After stying the body, we'll set the display mode of the content to flex. This makes sure that all the direct children inside a container element div are displayed side-by-side by default.

In our case, there's only one child inside the container signupFrm. The only reason we use display: flex here is to use the align-items and justify-content properties to help center everything vertically and horizontally:

/* Puts the form in the center both horizontally and vertically. Sets its height to 100% of the viewport's height */

.signupFrm {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

The vh property, which stands for viewport height, ensures that the form takes up 100% of the height of the browser window, regardless of the screen size or orientation. That will make it more responsive.

Our form is now aligned to the center

Now we'll style the form a bit:

.form {
  background-color: white;
  width: 400px;
  border-radius: 8px;
  padding: 20px 40px;
  box-shadow: 0 10px 25px rgba(92, 99, 105, .2);
}

.title {
  font-size: 50px;
  margin-bottom: 50px;
}

In the first style targeted on the form, we set the background to white, we give it a width of 400px, we add some curve around the form, and finally we set a shadow around the box. We also set the font size of the title and some space below the element.

And the result should look like this:

The form is now inside a card, with a box shadow

Next, we'll style the div which contains the form inputs and form labels.

.inputContainer {
  position: relative;
  height: 45px;
  width: 90%;
  margin-bottom: 17px;
}

We set the position property of our input's container div to relative. This will enable us position the children input and label however we want. We also set the width to take up 90 percent of the entire container width.

This is how our form will be rendered in the web browser.

Looks better

Now we need to style our inputs.

We first set the position to absolute. This will allow us to move each of them to the top-left part of the relatively positioned container parent.

We also need to hide our arbitrary placeholder text (the "a" characters mentioned earlier), so they don't overlap with the text within each label. The placeholder text will be needed when we implement the transition:

/* Style the inputs */

.input {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  border: 1px solid #DADCE0;
  border-radius: 7px;
  font-size: 16px;
  padding: 0 20px;
  outline: none;
  background: none;
  z-index: 1;
}

/* Hide the placeholder texts (a) */

::placeholder {
  color: transparent;
}

With the styles applied, our form should now look like this:

The placeholder "a" is no longer visible

Next, we style the text labels:

/* Styling text labels */

.label {
  position: absolute;
  top: 15px;
  left: 15px;
  padding: 0 4px;
  background-color: white;
  color: #DADCE0;
  font-size: 16px;
  transition: 0.5s;
  z-index: 0;
}

The label shows text that tells which information is expected inside the input. We start by setting its position to absolute. And by setting the top and left properties, we can move the text upwards relative to its container.

Next we set a transition of 0.5 seconds. This is how long it will take the text to move up when hovered on.

Finally, we also set a z-index of 0. The low z-index ensures that the label is positioned behind other "higher-placed" elements if they ever overlap.

Here is what gets rendered on the page:

The result

Now we are going to focus on the buttons.

We'll add some smooth animations with the CSS transform property, which moves the button up a little and changes the color once it's hovered over:

.submitBtn {
  display: block;
  margin-left: auto;
  padding: 15px 30px;
  border: none;
  background-color: purple;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 30px;
}

.submitBtn:hover {
  background-color: #9867C5;
  transform: translateY(-2px);
}

Here is the result:

The button scales up and changes color when hovered over

Next, we need to perform some state changes.

When an input gains focus, we want to position its label beyond the top of the container (-7px), 3 pixels from the left, reduce the font-size to 14, and change the color to purple:

.input:focus + .label {
  top: -7px;
  left: 3px;
  z-index: 10;
  font-size: 14px;
  font-weight: 600;
  color: purple;
}

Here's the result:

Labels go up when input gains focus

We also need to add a purple border around the input when it gains focus.

.input:focus {
  border: 2px solid purple;
}

Purple border added

Finally, we have to do something very important.

Currently, when you type some text into the form and move focus (your mouse) away from it, the label text and the text within the input collide:

Collision between label and input value

With the following CSS, we'll specify that, when we type a value into the input and change focus, we want the label to remain floating. Also, well specify that we want the label text to lose its purple color:

.input:not(:placeholder-shown)+ .label {
  top: -7px;
  left: 3px;
  z-index: 10;
  font-size: 14px;
  font-weight: 600;
}

And with that, here is the final look of our sign up page.

Final look

Wrapping Up

I hope you learned some new things about CSS from this tutorial. CSS transitions bring life to your website, and in this guide we have made our form much more lively with them.

You can get all the code from this tutorial from this GitHub repository.

I recently created a newsletter where I provide practical tips and resources on learning web development. Subscribe to my newsletter and get tips right in your inbox.

Thanks for following along.

P/S: If you are learning JavaScript, I created an eBook which teaches 50 topics in JavaScript with hand-drawn digital notes. Check it out here.

A transition occurs when a CSS property changes from one value to another value over a period of time.

You can create CSS Transitions with the transition property:

.selector { 
  transition: property duration transition-timing-function delay; 
}

The transition property is a shorthand of four CSS properties, transition-property, transition-duration, transition-timing-function, transition-delay.

.selector { 
  transition-property: property; 
  transition-duration: duration; 
  transition-timing-function: timing-function; 
  transition-delay: delay 

  /* The transition property is the shorthand for the above four properties */ 
  transition: property duration timing-function delay; 
}

transition-property refers to the CSS property you wish to transition. It is required in the transition shorthand.

transition-duration refers to the duration of the transition. How long do you want the transition to last? This value is written in seconds with the s suffix (like 3s). It is also required in the transition shorthand.

transition-timing-function refers to how to transition occurs. You’ll learn more about this later.

transition-delay refers to how long you want to wait before starting the duration. This value is written in seconds with the s suffix (like 3s). transition-delay is optional in the transition shorthand.

Triggering transitions

You can trigger CSS transitions directly with pseudo classes like :hover (activates when mouse goes over an element), :focus (activates when a user tabs onto an element, or when a user clicks into an input element), or :active (activates when user clicks on the element).

/* creating transitions directly in CSS */ 
.button { 
  background-color: #33ae74; 
  transition: background-color 0.5s ease-out; 
} 

.button:hover { 
  background-color: #1ce; 
}

You can also trigger CSS transitions through JavaScript by adding or removing a class.

/* CSS */
.button { 
  background-color: #33ae74; 
  transition: background-color 0.5s ease-out; 
} 

.button.is-active { color: #1ce; }

// JavaScript
const button = document.querySelector('.button') button.addEventListener('click', _ => button.classList.toggle('is-active'))

Understanding transition-timing-function

The transition-timing-function governs how a transition occurs. All transitions have a value of linear by default, which means the property changes evenly until the end of the transition.

.selector { 
  transition: transform 1s linear; 

  /* OR */ 
  transition-property: transform; 
  transition-duration: 1s; 
  transition-timing-function: linear; 
}

The thing is, few things move linearly in life. That’s not how real objects move. Sometimes, we accelerate; sometimes, we decelerate. The transition-timing-function allows you to capture all of that.

Imagine yourself throwing a tennis ball into an open field. The ball leaves your hand with the maximum speed. As it moves, it loses energy, it decelerates and eventually comes to a halt. This is called ease-out. There’s a timing function for it.

.selector { 
  transition-timing-function: ease-out; 
}

Now imagine you’re in a car. It’s not moving right now. When you move the car, it accelerates and goes toward its top speed. This is called ease-in. There’s also a timing function for it.

.selector { 
  transition-timing-function: ease-in; 
}

Since you have ease-in and ease-out, there’s also a timing function that combines the two together, ease-in-out. (I advise against using ease-in-out in your transitions unless your transitions last longer than a second. Nothing eases in and out within a second. It simply looks weird.)

.selector { 
  transition-timing-function: ease-in-out; 
}

See this pen for a demo of the timing functions you’ve learned so far:

Finally, if you don’t like any of the above choices, you can create your own timing function with cubic-bezier.

Creating your own timing function with cubic-bezier

A Cubic-bezier is a set of four values that determine your transition-timing-function. It looks like this:

.selector { 
  transition-timing-function: cubic-bezier(x1, y1, x2, y2); 
}

Don’t worry about the x1, y1,, x2 and y2. You’ll never create cubic-bezier curves by writing numbers yourself (unless you already know what they mean and you’re tweaking your timing function for perfection).

You can rely on both Chrome and Firefox’s trusty developer tools to help you create your curves. To use it, you add a transition-timing-function into an element, then open up devtools and click on the timing function.

See the Pen CSS Transition Timing Functions by Zell Liew (@zellwk) on CodePen.

Going in-depth about creating your own bezier curves for your animations is out of scope for today’s article. If you’re interested, you can find more information about cubic-bezier curves in “Understanding CSS Timing Functions“ by Stephen Greig.

Transitioning two or more properties

You can transition two (or more) CSS properties by separating them with a comma in your transition or transition-property property.

You can do the same with duration, timing-functions and delays as well. If the values are the same, you only need to specify one of them.

.selector { 
  transition: background-color 1s ease-out, color 1s ease-out; 

  /* OR */  
  transition-property: background, color; 
  transition-duration: 1s; 
  transition-timing-function: ease-out; 
}

You may be tempted to transition every CSS property with all. Don’t ever do this. This is bad for performance. Always specify the property you’re trying to transition.

/* DON'T EVER DO THIS */ 
.selector { 
  transition-property: all;
} 

/* ALWAYS DO THIS */ 
.selector { 
  transition-property: background-color, color, transform; 
}

Transitioning in vs transitioning out

Sometimes, you want the properties to transition in and out at differently. You want the duration, timing-function or delay to be different.

To do so, you write another set of transition- properties.

.button { 
  background-color: #33ae74; 
  transition: background-color 0.5s ease-out; 
} 

.button:hover { 
  background-color: #1ce; 
  transition-duration: 2s; 
}

When you write transition properties in the triggering (pseudo) class, the transition properties in the triggering class overwrites the original transition properties you’ve stated in the base class.

So, in the example above, when you hover on the button, the background color takes 2 seconds to change from #33ae74 to #1ce.

When you hover out from the button, the background color only takes 0.5s to change back to #1ce because the transition-duration of 2s no longer exists.

Wrapping up

CSS Transitions are the easiest way to perform animations. You can create transitions either with the transition shorthand or with transition- properties.

To create a transition, you overwrite a property in a class (or psuedo class), and you specify the property to transit in transition or transition-property.

Remember to change your transition-timing-function so your animation looks more real!

If you loved this article, you’ll love learn Learn JavaScript — a course that helps you learn to build real components from scratch with JavaScript.

(Oh, by the way, if you liked this article, I’d appreciate it if you could share it. )

Originally published at zellwk.com.