CSS - transition Property

Previous
Next

CSS transition property allows you to animate changes in an element's style properties over a specified duration. They provide a simple and efficient way to add animations to web elements without the need for complex JavaScript code or external libraries.

CSS transition property is a shorthand property for

Possible Values

  • <length> − A specific length value such as pixels (px), centimeters (cm), inches (in), etc.

Applies to

All elements, ::before and ::after pseudo-elements.

Syntax

transition: margin-right 4s;
transition: margin-right 4s 1s;
transition: margin-right 4s ease-in-out;
transition: margin-right 4s ease-in-out 1s;
transition: display 4s allow-discrete;
transition: margin-right 4s, color 1s;

The value for the transition property is defined as one of the following:

  • The none value indicates that there will be no transitions on this element. This is the default value.

  • Commas are used to separate one or more single-property transitions.

A single-property transition specifies the transition for one specific property or all properties. This includes:

  • A zero or one value indicating the property or properties for which the transition should be applied. This can be specified as:

    • A <custom-ident> representing a single property.

    • The all value in transitions indicates that the transition will be applied to all attributes that change when the element changes its state

    • If no value is specified, all value will be assumed, and the transition will apply to all changing properties.

  • Specify zero or one <easing-function> value indicating the easing function to be used.

  • Specify zero, one, or two <time> values for transition properties. The first parsed-time value is applied to transition-duration, and the second is assigned to transition-delay.

  • If a property has discrete animation behaviour, a zero or one value indicates whether to initiate transitions. If the value is present, it can be either allow-discrete or normal keyword.

CSS transition - With Two Values

The following example demonstrates that transition is applied to the padding property with a duration of 2s. When you hover over the box, padding increases to 15px and the background color changes to greenyellow −

<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 5px;
      transition: padding 2s;
      background-color: lightskyblue;
   }
   .box:hover {
      background-color: greenyellow;
      padding: 15px;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>

CSS transition - delay Value

The following example demonstrates that transition is applied to the padding property. The transition takes 2s to complete, and it starts after a delay of 0.5s −

<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 5px;
      transition: padding 2s .5s;
      background-color: lightskyblue;
   }
   .box:hover {
      background-color: greenyellow;
      padding: 15px;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>

CSS transition - easing Function

The following example demonstrates that transition is applied to the background-color property. When you hover over the box, background color changes to green-yellow, starting a smooth color transition with an ease-in-out timing function over the 4s duration −

<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 15px;
      transition: background-color 4s ease-in-out;
      background-color: lightskyblue;
   }
   .box:hover {
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>

CSS transition - easing Function and delay

The following example demonstrates that transition is applied to the padding property. When you hover over the box, background color changes to green-yellow and padding increases to 15px, starting a smooth transition over the duration of 4s with an ease-in-out timing function and a delay of 0.7s −

<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 5px;
      transition: padding 4s ease-in-out 0.7s;
      background-color: lightskyblue;
   }
   .box:hover {
      background-color: greenyellow;
      padding: 15px;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>

CSS transition - behavior Value

The following example demonstrates that transition is applied to the background-color property. When you hover over the box, background color changes to green-yellow, starting a smooth transition over the duration of 5s using the allow-discrete timing function −

<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 10px;
      transition: background-color 5s allow-discrete;
      background-color: lightskyblue;
   }
   .box:hover {
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>

CSS transition - Applied To Two Properties

The following example demonstrates that transition will be applied on text color in 2s and on margin-left in 4s. The text color will transition in 2s, while the left margin will take 4s −

<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 10px;
      transition: color 2s, margin-left 4s;
      background-color: lightskyblue;
   }
   .box:hover {
      color: red;
      margin-left: 70px;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>

CSS transition - Related Properties

Following is the list of CSS properties related to transition:

property value
transition-delay Determines the amount of time to wait before starting a transition effect when a property's value changes.
transition-duration Determines amount of time that a transition animation should take to complete.
transition-property Specifies which CSS properties should have a transition effect applied.
transition-timing-function Determines which intermediate values are generated for CSS properties affected by a transition effect.
Print Page
Previous
Next
Advertisements