Transitions in CSS

« Prev Next »

CSS transitions allow you to animate the change of CSS properties over time. You can use transitions to create smooth animations when an element changes from one state to another.

Transition examples include hover effects, color changes, and element transformations. This article provides an overview of the CSS transition syntax and examples of how to use them in your web development projects.

 

transitions-in-css

CSS Transition Syntax

transition: property duration timing-function delay;
  • property: The CSS property that you want to animate (e.g., background-color, width, opacity).
  • duration: The duration of the transition (e.g., 1s, 500ms).
  • timing-function: The timing of the transition (e.g., ease, linear, ease-in, ease-out).
  • delay: Optional; the delay before the transition starts (e.g., 0s, 200ms).

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Transition Example</title>
  <style>
    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      transition: background-color 0.3s ease; /* Transition for background-color */
    }

    button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <button>Hover Over Me</button>
</body>
</html>
Run ›
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.