Lecture 7: CSS Transitions and Animations

In this lecture, we’ll explore how to bring your web pages to life using CSS transitions and animations. These techniques allow you to create smooth, engaging effects that enhance user experience without requiring JavaScript.

Introduction to CSS Transitions

CSS transitions enable you to smoothly change property values over a specified duration. They are ideal for creating hover effects, button animations, and other interactive elements.

1. Basic Syntax

To create a transition, you need to specify the CSS property to transition, the duration, and optional easing functions.

Example:

  .button {
    background-color: #4CAF50;
    transition: background-color 0.3s ease;
  }

  .button:hover {
    background-color: #45a049;
  }

In this example, the background color of the button changes smoothly over 0.3 seconds when hovered.

2. Transitioning Multiple Properties

You can transition multiple properties at once by separating them with commas.

Example:

  .box {
    width: 100px;
    height: 100px;
    background-color: #333;
    transition: width 0.5s, height 0.5s, background-color 0.5s;
  }

  .box:hover {
    width: 150px;
    height: 150px;
    background-color: #555;
  }

This example smoothly changes the width, height, and background color of the box on hover.

3. Easing Functions

Easing functions control the speed of the transition at different points, creating effects like easing in, easing out, or both.

Common easing functions:
- ease: Starts slowly, then speeds up, then slows down again.
- linear: Maintains a constant speed.
- ease-in: Starts slowly, then speeds up.
- ease-out: Starts quickly, then slows down.

Introduction to CSS Animations

CSS animations allow you to create more complex sequences of changes over time, beyond simple transitions. You can animate multiple properties, control the timing, and create keyframes for greater control.

1. Basic Syntax

To create an animation, define keyframes and apply them to an element using the animation property.

Example:

  @keyframes example {
    0% {background-color: red; left: 0px;}
    50% {background-color: yellow; left: 100px;}
    100% {background-color: green; left: 0px;}
  }

  .animate-box {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: red;
    animation: example 5s infinite;
  }

In this example:

The @keyframes rule defines the animation steps, changing the background color and position.
The .animate-box class applies the animation, which runs for 5 seconds and repeats infinitely.

2. Controlling Animation Timing

You can control the timing, delay, and iteration count of an animation.

Example:

  .animate-box {
    animation: example 5s ease-in-out 1s 3 alternate;
  }

5s: Duration of the animation.
ease-in-out: Easing function.
1s: Delay before the animation starts.
3: The animation will repeat three times.
alternate: The animation will reverse direction on each iteration.

3. Combining Transitions and Animations

You can use transitions and animations together to create more dynamic effects.

Example:

  .button {
    background-color: #4CAF50;
    transition: transform 0.3s ease;
  }

  .button:hover {
    transform: scale(1.1);
  }

  @keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
  }

  .pulse-button {
    animation: pulse 1s infinite;
  }

This example:

The .button class uses a transition to slightly scale the button on hover.
The .pulse-button class uses an animation to create a continuous pulsing effect.

Practical Example:

Let’s combine transitions and animations to create a responsive, interactive button.

HTML:

<button class="animated-button">Hover Me!</button>

CSS:

.animated-button {
  padding: 15px 30px;
  font-size: 16px;
  color: white;
  background-color: #008CBA;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.animated-button:hover {
  background-color: #005f73;
  transform: translateY(-5px);
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.animated-button:active {
  animation: shake 0.5s;
}

In this example:

The button changes its background color and moves upward slightly when hovered.
When the button is clicked, it shakes using a custom animation.

Practice Exercise

Create a hover effect for a link that changes its color and adds an underline using a transition.
Create a keyframe animation that moves an element in a circle.
Combine transitions and animations to create an interactive element like a button or a card that scales, changes color, or animates on interaction.

Next Up: In the next lecture, we’ll explore CSS Flexbox Deep Dive, where you’ll learn how to fully utilize Flexbox to create advanced, responsive layouts. Stay tuned!

follow me on LinkedIn

Ridoy Hasan