Detailed explanation of css3transition property

CSS3 transition allows us to create a transition effect between two different CSS styles. By using the transition attribute, we can define how a CSS property transforms from one value to another. This change can be triggered by mouse events (such as :hover), button presses, etc.

Basic usage of the transition attribute

In CSS3, the transition attribute is used to specify how to transition from one CSS style to another. The following is a basic example of using the transition attribute:

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s;
}
div:hover{
  width: 150px;
}

In the above code, when the mouse hovers over the div element, the width of the div element will convert from 50px to 150px, and the transition effect will last for 2 seconds.

The detailed syntax of the transition attribute

The syntax of the transition attribute is as follows:

transition: [property] [duration] [timing-function] [delay];

Among them:

[property]: transitional CSS property names, which can be a single property or multiple properties, separated by commas.

[duration]: Specify the duration of the transition, in seconds (s) or milliseconds (ms).

[timing-function]: Specify the time function of the transition, which can be ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier().

[delay]: Specify the delay time before the transition starts executing, in seconds (s) or milliseconds (ms).

Based on the above syntax, we can define more complex transition effects through the transition attribute.

The value of the transition attribute

The following are the optional values ​​and default values ​​​​of the transition attribute:

[property]: CSS property name, such as height , width, background-color, etc.

[duration]: time, such as 1s, 3.5s, 500ms, etc., the default value is 0s

[timing-function]: time function, such as linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier, the default value is ease.

[delay]: time, such as 1s, 3.5s, 500ms, etc., the default value is 0s.

transition-timing-function attribute

The transition-timing-function attribute is used to specify the time function of the transition. It determines how CSS property values ​​transition smoothly from starting value to ending value. Common time functions include:

linear: constant speed easing, that is, uniform motion

ease: default value. Start slowly, change quickly in the middle, and slow down again at the end

ease-in: start slowly

ease-out: end slowly

ease-in-out: start slowly and end

cubic-bezier: Custom time function

transition-delay property

The transition-delay property is used to specify the delay time of the transition effect . That is, how long the transition effect waits to start executing after it is triggered. If a delay value is specified, the transition effect will start executing after a delay of the specified time after triggering.

Examples of transition attributes

Here are some examples of transition attributes:

Transition origin

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s;
  transform-origin: top;
}
div:hover{
  width: 150px;
  transform: rotate(45deg);
}

In the above code, when the mouse hovers over the div element, the width of the div element will transition from 50px to 150px, and this transition effect will last for 2 seconds. At the same time, the div element is rotated 45 degrees around the top.

Multiple attributes

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s, height 2s, background-color 2s;
}
div:hover{
  width: 150px;
  height: 150px;
  background-color: blue;
}

In the above code, when the mouse hovers over the div element, the width, height and background color of the div element will change at the same time, and the transition effect will last for 2 seconds.

Custom time function

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
div:hover{
  width: 150px;
}

In the above code, when the mouse is hovering over the div element, the width of the div element will convert from 50px to 150px, and the transition effect will last for 2 seconds. At the same time, we used cubic-bezier() to customize the time function to make the transition effect more personalized.

Summary

CSS3 transition effect is very powerful, and various complex transition effects can be defined through the transition attribute. By mastering the relevant knowledge of transition, we can design animation effects in Web pages in a more colorful way.

The above is the detailed content of Detailed explanation of css3transition property. For more information, please follow other related articles on the PHP Chinese website!