CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



transition-duration

CSS transitions are a powerful tool for creating smooth and visually appealing animations on web pages. One of the key properties of CSS transitions is the transition-duration property, which determines how long the transition effect should last.

What is Transition-Duration?

The transition-duration property is used to specify the length of time it takes for a CSS transition to complete. This property is used in conjunction with other transition properties, such as transition-property and transition-timing-function, to create a complete transition effect.

The value of the transition-duration property is specified in seconds or milliseconds. For example, a value of 1s would indicate that the transition should take one second to complete, while a value of 500ms would indicate that the transition should take half a second to complete.

How to Use Transition-Duration

The transition-duration property can be applied to any element that has a CSS transition effect applied to it. To use the transition-duration property, simply add it to the CSS rule for the element, along with the other transition properties that are being used.

For example, let's say we have a button element that we want to apply a transition effect to when it is hovered over. We could use the following CSS code:

button {
  background-color: blue;
  color: white;
  transition-property: background-color, color;
  transition-duration: 0.5s;
}

button:hover {
  background-color: red;
  color: black;
}

In this example, we have specified that the background-color and color properties should be transitioned when the button is hovered over. We have also specified that the transition should take 0.5 seconds to complete.

Code Examples

Here are some additional code examples that demonstrate how to use the transition-duration property:

Example 1:

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition-property: background-color;
  transition-duration: 1s;
}

div:hover {
  background-color: red;
}

In this example, we have a div element that changes its background color from blue to red when it is hovered over. The transition effect takes 1 second to complete.

Example 2:

img {
  width: 200px;
  height: 200px;
  transition-property: transform;
  transition-duration: 0.5s;
}

img:hover {
  transform: rotate(180deg);
}

In this example, we have an image element that rotates 180 degrees when it is hovered over. The transition effect takes 0.5 seconds to complete.

Conclusion

The transition-duration property is an essential part of creating smooth and visually appealing CSS transitions. By specifying the length of time it takes for a transition effect to complete, we can control the speed and timing of the animation. With the help of other transition properties, such as transition-property and transition-timing-function, we can create complex and dynamic transition effects that enhance the user experience on our web pages.

References

Activity