Class 4: CSS Advanced: Animations, transitions, and pseudo-classes.

Welcome to Class 4, where we will dive deeper into CSS animations, CSS transitions, and pseudo-classes to make your web pages interactive and visually appealing. This class will cover the theory, important properties, and practical examples.

1. CSS Transitions

CSS Transitions allow you to change property values smoothly (over a duration) instead of instantly.

Key Properties of Transitions

  • transition: Shorthand property to define all transition properties.
  • transition-property: Specifies the CSS property to which the transition will be applied (e.g., color, background-color, transform).
  • transition-duration: Specifies the duration of the transition (e.g., 2s, 500ms).
  • transition-timing-function: Specifies the speed curve of the transition (e.g., ease, linear, ease-in, ease-out, cubic-bezier).
  • transition-delay: Specifies the delay before the transition starts (e.g., 1s, 0ms).

Example: Button Hover Transition

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <style>  
    button {  
      background-color: #4CAF50;  
      color: white;  
      padding: 10px 20px;  
      border: none;  
      cursor: pointer;  
      font-size: 16px;  
      transition: background-color 0.3s ease, transform 0.3s ease;  
    }  
    button:hover {  
      background-color: #45a049;  
      transform: scale(1.1);  
    }  
  </style>  
</head>  
<body>  
  <button>Hover Me</button>  
</body>  
</html>

Transition Timing Functions

  • ease: Default; starts slow, speeds up, then slows down.
  • linear: Maintains a constant speed.
  • ease-in: Starts slow and accelerates.
  • ease-out: Starts fast and slows down.
  • cubic-bezier: Custom timing function (e.g., cubic-bezier(0.68, -0.55, 0.27, 1.55)).

2. CSS Animations

CSS Animations allow you to create more complex, keyframe-based animations.

Key Properties of Animations

  • @keyframes: Defines the animation with keyframes.
  • animation-name: Specifies the name of the animation.
  • animation-duration: Specifies how long the animation lasts.
  • animation-timing-function: Specifies the speed curve (similar to transitions).
  • animation-delay: Specifies when the animation starts.
  • animation-iteration-count: Specifies how many times the animation runs (e.g., infinite, 1, 3).
  • animation-direction: Specifies whether the animation runs forward, backward, or alternates (normal, reverse, alternate).
  • animation-fill-mode: Specifies what styles should be applied before/after the animation (forwards, backwards, both).

Example: Bouncing Ball Animation

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <style>  
    .ball {  
      width: 50px;  
      height: 50px;  
      background-color: red;  
      border-radius: 50%;  
      position: relative;  
      animation: bounce 2s infinite ease-in-out;  
    }  
    @keyframes bounce {  
      0%, 100% {  
        transform: translateY(0);  
      }  
      50% {  
        transform: translateY(-150px);  
      }  
    }  
  </style>  
</head>  
<body>  
  <div class="ball"></div>  
</body>  
</html>

Shorthand for CSS Animations

animation: bounce 2s ease-in-out infinite;

3. CSS Pseudo-classes

Pseudo-classes are used to define the style of specific states of elements, such as when they are hovered, focused, or selected.

Most Common Pseudo-classes

  1. hover: Styles an element when the user hovers over it.
  2. focus: Styles an element when it is focused (e.g., input field).
  3. active: Styles an element when it is active (e.g., button click).
  4. nth-child(n): Styles an element based on its position in the parent.
  5. first-child / last-child: Styles the first or last child of a parent.
  6. not(selector): Styles elements that do not match the specified selector.

Example: Pseudo-classes for a Navigation Bar

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <style>  
    nav a {  
      color: black;  
      text-decoration: none;  
      padding: 10px 15px;  
      display: inline-block;  
      transition: color 0.3s;  
    }  
    nav a:hover {  
      color: red;  
    }  
    nav a:focus {  
      outline: 2px solid blue;  
    }  
    nav a:last-child {  
      font-weight: bold;  
    }  
  </style>  
</head>  
<body>  
  <nav>  
    <a href="#">Home</a>  
    <a href="#">About</a>  
    <a href="#">Contact</a>  
  </nav>  
</body>  
</html>

4. Combining Transitions, Animations, and Pseudo-classes

You can combine all three concepts to create interactive and visually engaging elements.

Example: Animated Button with Hover Effects

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <style>  
    button {  
      background-color: #008CBA;  
      color: white;  
      border: none;  
      padding: 15px 30px;  
      font-size: 16px;  
      cursor: pointer;  
      position: relative;  
      overflow: hidden;  
      transition: background-color 0.5s ease;  
    }  
    button:hover {  
      background-color: #005f73;  
    }  
    button::before {  
      content: "";  
      position: absolute;  
      top: 0;  
      left: -100%;  
      width: 100%;  
      height: 100%;  
      background: rgba(255, 255, 255, 0.2);  
      transform: skewX(-45deg);  
      transition: left 0.5s ease;  
    }  
    button:hover::before {  
      left: 100%;  
    }  
  </style>  
</head>  
<body>  
  <button>Hover Me</button>  
</body>  
</html>

5. Important Tips for Animations and Transitions

  1. Use will-change for performance optimization when animating properties like transform or opacity..element { will-change: transform, opacity; }
  2. Avoid animating layout-affecting properties like width, height, margin, or top for performance reasons. Instead, use transform or opacity.
  3. Use ease-in-out for smooth transitions in most cases.

Summary

  • Transitions allow smooth property changes over time.
  • Animations enable complex, keyframe-based effects.
  • Pseudo-classes target specific states of elements for styling.
  • Combining these techniques can create highly interactive and visually dynamic user interfaces.

Homework

  1. Create a button with hover, active, and focus pseudo-classes and transitions.
  2. Create an animated spinner using CSS keyframes.
  3. Experiment with nth-child and hover to create a colorful grid.

This concludes Class 4: CSS Advanced! You should now be comfortable using transitions, animations, and pseudo-classes to enhance your designs.