Animations and Transitions

Hello, everyone! Welcome to the lesson on Animations and Transitions.

In this lesson, we’ll learn how to add animations and transitions to HTML elements using CSS. We’ll explore how to control the movement, timing, and appearance of animated elements.

What are Animations and Transitions?

Animations and transitions are visual effects that can be used to enhance the user experience of a website or application.

Animations create movements, while transitions change the state of an element.

Why Use Animations and Transitions?

Animations and transitions can be used to:

• Capture user attention
• Make the website or application appear more dynamic
• Enhance usability

CSS Properties for Animations and Transitions

There are many CSS properties that can be used to add animations and transitions to HTML elements. Some of the common CSS properties for animations and transitions include:

• Animation: Defines an animation for an element.
• Animation-name: Defines the name of the animation.
• Animation-duration: Defines the duration of the animation.
• Animation-timing-function: Defines the timing function of the animation.
• Animation-delay: Defines the delay of the animation.
• Animation-iteration-count: Defines the number of times the animation will be repeated.
• Animation-direction: Defines the direction of the animation.
• Animation-fill-mode: Defines how the animation is filled.
• Transition: Defines a transition for an element.
• Transition-property: Defines the property that will be changed by the transition.
• Transition-duration: Defines the duration of the transition.
• Transition-timing-function: Defines the timing function of the transition.
• Transition-delay: Defines the delay of the transition.

Examples

Let’s look at some examples of using CSS properties to add animations and transitions to HTML elements:

Example 1:

The following CSS code animates the size of an element:

.animated {
  animation: size 2s ease-in-out;
}

@keyframes size {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

Example 2:

The following CSS code adds a transition to the movement of an element:

.transition {
  transition: left 2s ease-in-out;
}

.transition:hover {
  left: 100px;
}

Example to consolidate what we learned

Example of Animation

Let’s create an animation that makes a button grow and shrink.

HTML

<button class="animated">Click here</button>

CSS

.animated {
  animation: size 2s ease-in-out;
}

@keyframes size {
  0% {
    width: 0;
  }

  50% {
    width: 100%;
  }

  100% {
    width: 0;
  }
}

Code Explanation

The HTML code defines a button with the class animated.

The CSS code defines an animation for the animated class called size. The animation has a duration of 2 seconds and uses the ease-in-out timing function. The animation changes the button’s width from 0 to 100% and back to 0.

Transition Example

Let’s create a transition that makes an element disappear when the user hovers over it.

HTML

<div class="transition">
  <h1>This element disappears</h1>
</div>

CSS

.transition {
  transition: opacity 2s ease-in-out;
}

.transition:hover {
  opacity: 0;
}

Code Explanation

The HTML code defines an element with the class transition containing a heading.

The CSS code defines a transition for the transition class called opacity. The transition has a duration of 2 seconds and uses the ease-in-out timing function. The transition changes the element’s opacity from 1 to 0.

Summary

In this lesson, we learned how to add animations and transitions to HTML elements using CSS.

We explored the most common CSS properties for animations and transitions and saw some examples of using these properties to enhance HTML elements.

In Module 4, we’ll delve into using advanced selectors to control which elements are affected by CSS rules.

We’ll learn to address common CSS issues and use additional features and tools to enhance productivity.