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

Background Attachment
Live Preview


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