Transition Property in CSS

This CSS transitions provide a way to control animation speed when changing CSS properties.The CSS transitions are effects that are added to change the element gradually from one style.

value	used for
transition	The shorthand property for setting the four transition properties into a single property.
transition-delay	The specifies a delay in seconds for the transition effect.
transition-duration	This specifies how many seconds or milliseconds a transition effect takes to complete.
transition-property	This specifies the name of the CSS property the transition effect.
transition-timing-function	This specifies the speed curve of the transition effect

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      div{
        width: 300px;
        height: 300px;
        background-color: orangered;
        /* transition-property: width,height,background;
        transition-duration: 0.5s,0.5s,1s;
        transition-timing-function: ease-in-out; */

        /* transition-property:all;
        transition-duration: 0.5s;
        transition-timing-function: ease-in-out;
        transition-delay: 0.5s; */
        border:5px solid black;

        /* transition:all 0.5s ease-in 1s; */

        transition-property:all;
        transition-duration: 2s;
        transition-timing-function:cubic-bezier(.96,.29,.48,1.13);
        transition-delay: 0.1s;

      }
      div:hover{
        width: 600px;
        height:600px;
        background:rebeccapurple;
        border:5px dashed red;
      }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

Output

Transition Property in CSS

Source Code :

Output

CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects