CSS Transitions

CSS Transitions allow you to gradually change property values over a specific time.

  • Instead of a sudden color or size change, you can animate it smoothly.
  • Imagine flipping a light switch ON/OFF instantly (without transition) vs. slowly turning a dimmer knob (with transition). That’s what CSS Transitions do.

Where Can You Use CSS Transitions?

You can apply transitions to many CSS properties like:

  • color
  • background-color
  • width
  • height
  • margin
  • padding
  • opacity
  • transform (for movement, scaling, rotating)

Basic Syntax of CSS Transition


          selector  {
               transition : property duration timing-function delay ;
          }

Example


          button  {
               background-color : blue transition  background-color 0.5s ease-in-out ;
          }

Let’s Do Our First Simple Example

HTML


          < button > Hover Me< /button >

CSS


          button  {
               background-color : blue 
               color : white 
               padding : 10px 20px 
               border : none       
               transition : background-color 0.4s ease ;
          }

          button : hover {
               background-color : green 
          }

Example in action:

What happens?

When you hover over the button, it smoothly changes from blue to green in 0.4 seconds.

Let's Understand Transition Parts

1. transition-property

Which property do you want to animate?

Example: color, background-color, width, etc.

2. transition-duration

How long should the animation take?

Example: 0.5s, 2s

3. transition-timing-function

This controls how the animation progresses over time.

Timing Function Description
ease Starts slow, speeds up, then slows down (default)
linear Same speed throughout
ease-in Starts slow then fast
ease-out Starts fast then slow
ease-in-out Starts and ends slow

4. transition-delay

Wait how long before the transition starts?

Example: 0.5s, 1s

Multiple Properties in One Transition


          div  {
                transition : background-color 0.5s ease ;
               }

Cool Example: Box Expansion

HTML


          <div   class=  "box" > </div>

CSS


          .box  {
               width :  100px ;
               height :  100px ;
               background-color :  red ;
               transition :  width 1s, height 1s, background-color 1s;
          }

          .box: hover  {
               width :  200px ;
               height :  200px ;
               background-color :  green ;
          }

Example in action:

What happens?

When you hover over the box:

  • Width becomes 200px
  • Height becomes 200px
  • Color becomes green

All these changes happen smoothly in 1 second.

Advanced Example: Smooth Scale on Hover

HTML


          <div   class=  "scale-box" >  Hover Me  </div>

CSS


          .scale-box  {
               width :  150px ;
               padding :  20px ;
               background-color :  coral ;
               text-align :  center ;
               transition :  transform 0.3s ease-in-out ;
          }

          .scale-box: hover  {
               transform :  scale(1.2) ;
          }

Example in action:

Hover Me

Explanation

This uses transform: scale() to zoom the box a bit on hover.

Example: Color and Font Size Change Together

HTML (implicit, applying to an h1-like element)


          <h1   class=  "color-font-h1" >  Hover This Text  </h1>

CSS


          h1  {
               color :  navy ;
               font-size :  24px ;
               transition :  color 0.5s ease, font-size 1s ease-in-out ;
          }
          
          h1: hover  {
               color :  orange ;
               font-size :  32px ;
          }

Example in action:

Hover This Text

Pro Tips for Beginners

  • Only animatable properties work (like color, opacity, transform, etc.)
  • Always set transition on the default state, not on :hover
  • Try using all if you want to apply transition on every changing property 
    
          div  {
               transition :  all 0.5s ease ;
          }

Real Project Ideas Using Transitions

  • Navigation bar hover effects
  • Smooth open/close menu
  • Animated cards on hover
  • Fade in buttons or images
  • Interactive quiz or form elements

Summary

Term Meaning
transition Enables smooth change
duration Time it takes to change
property What you're animating
ease Style of motion
delay Time before animation starts

Practice Challenge for You Bhai

Try to make a card with this behavior:

  • On hover: card zooms slightly, background color changes, and button inside fades in.
  • Use transform, opacity, and transition-delay

Let me know when you're done, I’ll help you review it like your coding mentor

Conclusion

CSS Transitions let you change property values in a gradual manner over a specified duration. Rather than an instant color change or size change, you want to animate that change. To put it simply, think about flipping a light switch ON/OFF (with no transition) compared to turning a dimmer switch knob (with a transition). This difference can be accomplished with CSS Transitions. CSS Transitions are a superpower for front-end developers; you can transform your site into a dynamic, smooth, and interactive experience with only a few lines of code and not look out of place compared other the bigfingers of the web.

Start small, experiment with your buttons, boxes, headers—and slowly build creative transitions.

Try it Yourself