Challenge: Adding a transition - CSS Tutorial

Contents

• Introduction Introduction

  • CSS animation advantages

    1m 5s
  • Using GitHub Codespaces with this course

    7m 32s
• 1. Overview of CSS Transitions and Transforms 1. Overview of CSS Transitions and Transforms

  • CSS transform basics

    4m 41s
  • (Locked)
    Simple 3D transforms

    4m 12s
  • (Locked)
    CSS transitions

    4m 41s
  • (Locked)
    Challenge: Adding a transition

    27s
  • (Locked)
    Solution: Adding a transition

    45s
• 2. Understanding CSS Animations 2. Understanding CSS Animations

  • CSS keyframe animation fundamentals

    3m 55s
  • (Locked)
    animation-delay and animation-fill-mode

    2m 20s
  • (Locked)
    A closer look at animation-fill-mode

    2m 34s
  • (Locked)
    animation-direction

    3m 18s
  • (Locked)
    Timing functions and easing

    7m 48s
  • (Locked)
    The steps() timing function

    4m 44s
  • (Locked)
    Challenge: Adding keyframes to an animation

    39s
  • (Locked)
    Solution: Adding keyframes to an animation

    58s
• 3. CSS Animation Building Blocks 3. CSS Animation Building Blocks

  • Infinitely looping animations

    3m 58s
  • (Locked)
    Pause and play with animation-play-state

    3m 16s
  • (Locked)
    Animating 3D transforms

    5m 24s
  • (Locked)
    Chaining multiple keyframe animations

    4m 48s
  • (Locked)
    Challenge: Adding a third animation to the chain

    33s
  • (Locked)
    Solution: Adding a third animation to the chain

    2m 16s
• 4. Animating SVGs with CSS 4. Animating SVGs with CSS

  • Preparing an SVG for animation

    2m 56s
  • (Locked)
    SVG exporting and optimization settings

    5m 15s
  • (Locked)
    Animating SVG with CSS

    5m 39s
• 5. Advanced CSS Animation Techniques 5. Advanced CSS Animation Techniques

  • Creating a motion path for CSS with offset-path

    2m 36s
  • (Locked)
    Animating CSS motion path with offset-path

    3m 30s
  • (Locked)
    Dynamic CSS animation with CSS variables

    9m 2s
  • (Locked)
    Animating variable fonts with CSS

    5m 18s
• 6. Tools for Creating CSS Animations 6. Tools for Creating CSS Animations

  • (Locked)
    Using browser animation inspection tools

    4m 25s
• Conclusion Conclusion

  • (Locked)
    Helpful online tools for CSS

    2m 4s