Class 38 | CSS Transitions and Animations

CSS Transitions and Animations are powerful tools that allow you to add visual effects to your web pages. Transitions let you smoothly change the appearance of an element. At the same time, animations create more complex visual effects by allowing you to define keyframes and specify how a property changes over time.

Here are some examples of how you can use CSS Transitions and Animations to enhance your website:

CSS Transitions

Example 1: Hover Effects

One of the most common uses of CSS transitions is to create hover effects. In this example, we’ll create a simple hover effect for a button:

<button class="btn">Hover Me</button>

.btn {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: red;
}

In this example, we’ve added a transition property to the button’s CSS, which tells the browser to animate the background-color property over a duration of 0.3s with an easing function of ease. When the button is hovered over, the background-color property changes to red, creating a smooth transition.

Example 2: Toggle Effects

Transitions can also create toggle effects, such as expanding and collapsing elements. Here’s an example of how to create a simple toggle effect for a dropdown menu:

<button class="toggle-btn">Toggle Menu</button>
<ul class="menu">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

.menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.menu.active {
  max-height: 500px;
}

In this example, we’ve added a max-height property to the .menu element, which is initially set to 0 and has an overflow property set to hidden. We’ve also added a transition property that animates the max-height property over a duration of 0.3s with an easing function of ease.

When the .menu element is given the .active class, the max-height property is changed to 500px, causing the menu to expand smoothly.

CSS Animations

Example 1: Keyframe Animation

One of the most powerful features of CSS Animations is the ability to define keyframes, which allow you to create complex visual effects. Here’s an example of a simple keyframe animation that changes the color and size of a button:

<button class="animated-btn">Animate Me</button>

.animated-btn {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    background-color: blue;
  }
  50% {
    transform: scale(1.2);
    background-color: green;
  }
  100% {
    transform: scale(1);
    background-color: blue;
  }
}

In this example, we’ve added an animation property to the button’s CSS, which tells the browser to play the pulse animation for a duration of `2

Next Class