css
  1. css-transition
PreviousNext

CSS Transitions

  • CSS Transitions allow you to smoothly animate the transition between two states of an element.
  • They can help you create more engaging and interactive web experiences.

Syntax

The syntax for CSS Transitions includes the transition-property, transition-duration, transition-timing-function, and transition-delay properties.

transition-property: property;
transition-duration: time;
transition-timing-function: easing;
transition-delay: time;

Example

Here is a simple example of using CSS Transitions to animate the background color of a button:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Transition Example</title>
    <style>
        button {
            background-color: blue;
            color: white;
            padding: 10px;
            border: none;
            cursor: pointer;
            transition-property: background-color;
            transition-duration: 0.5s;
            transition-timing-function: ease-in-out;
        }
        
        button:hover {
            background-color: red;
        }
    </style>
</head>
<body>
    <button>Click me for animation</button>
</body>
</html>
Try Playground

Explanation

The transition-property property specifies which CSS property should be transitioned. In this case, we have set it to background-color.

The transition-duration property specifies the length of time the animation should take. In this case, we have set it to 0.5 seconds.

The transition-timing-function property specifies the easing function to be used for the transition. In this case, we have used ease-in-out, which creates a smooth, gradual transition.

The transition-delay property specifies a delay before the transition starts. In this case, we have not used it.

Use

CSS Transitions can be used to add subtle and engaging effects to your web pages. They can be applied to a wide range of CSS properties, including background color, text color, and font size.

Important Points

  • CSS Transitions require a starting state and an ending state for a smooth transition.
  • Only properties with a numerical value can be transitioned.
  • You can add multiple transitions to an element by separating them with a comma in the transition-property value.

Summary

CSS Transitions provide a simple, yet powerful way to add engaging animations to your web pages. With their easy-to-use syntax and a wide range of potential applications, they offer a powerful tool for creating beautiful, interactive web experiences.

Transform@font-face
Published on: