The difference between transition and transform in CSS-CSS Tutorial-php.cn

The difference between transition and transform in CSS

王林

Release： 2024-02-18 19:46:19

Original

1421 people have browsed it

The difference between transition and transform in CSS

Both transition and transform in CSS are properties used to achieve animation effects, but their functions and usage methods are different.

The transition attribute is used to specify the transition effect of the element during the change of CSS attributes. Through the transition attribute, we can make the element's attributes change smoothly from the initial state to the final state instead of changing suddenly. The syntax of transition is as follows:

transition: property duration timing-function delay;

Copy after login

Among them, property represents the CSS property to be transitioned, which can be a single property or multiple properties, separated by commas. duration represents the duration of the transition, in seconds or milliseconds. timing-function represents the timing function of the transition effect, which is used to control the speed curve of the transition. The default is ease. delay represents the delay time before the transition begins.

The following is an example of using transition transition:

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s ease;
}

.box:hover {
  width: 200px;
}
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

Copy after login

In the above example, when the mouse is hovering over the .box element, the width will smoothly transition from 100px to 200px.

The transform attribute is used to perform deformation operations on elements, such as rotation, scaling, translation, and tilt. With the transform attribute, you can change the appearance of an element without changing the document layout. The syntax of transform is as follows:

transform: function(value);

Copy after login

Among them, function represents the deformation function to be executed, which can be rotation, scaling, translation or skew, etc.

The following is an example of using transform:

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
}
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

Copy after login

In the above example, the .box element is rotated 45 degrees.

In summary, the transition attribute is used to control the smooth transition effect of CSS attributes, while the transform attribute is used to deform elements. In practical applications, the two are often used together to control the transition effect of the transform attribute through the transition attribute, thereby achieving more complex animation effects.

The above is the detailed content of The difference between transition and transform in CSS. For more information, please follow other related articles on the PHP Chinese website!