HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Transitions

CSS Transitions

Transitions allow you to change property values smoothly (from one value to another) over a given duration. This provides essential feedback to users when they hover over or click elements.

Required Properties:

To create a transition, you must specify two things:

The CSS property you want to add an effect to (e.g., background-color, or all).
The duration of the effect (e.g., 0.3s).

You can also define a transition-timing-function to dictate the speed curve (e.g., ease-in, linear, ease-in-out).

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial; background: #fff; padding: 50px; display: flex; gap: 30px; justify-content: center; }
    
    .btn {
      padding: 15px 30px;
      font-size: 18px;
      font-weight: bold;
      color: white;
      background-color: #3498db;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      
      /* The Transition Definition */
      /* Property | Duration | Timing-function */
      transition: background-color 0.4s ease, transform 0.2s ease-out, box-shadow 0.3s;
    }
    
    /* The Hover State that triggers the transition */
    .btn:hover {
      background-color: #2c3e50;
      transform: translateY(-5px); /* Moves it up slightly */
      box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }
    
    .btn:active {
      transform: translateY(0); /* Button press effect */
      box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    }
  </style>
</head>
<body>

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

</body>
</html>

Result

Topics