CSS3 transition transition-property property

Grammar:

transition-property：all | none | <property>[ ,<property> ]*

Parameter analysis:
1.all: Set all properties that can be transitioned.
2.none: Do not specify attributes that can be transitioned.
3.<property>: Specify the properties that can be transitioned.
Special instructions:
1. If multiple attributes are set, separate the attribute names with commas.
2. The corresponding script property is transitionProperty.

Transition-property is used to specify the transition effect to be executed when one of the attributes of the element changes. It mainly has the following values: none (no attribute changes); all (all attributes change). This is also Its default value; indent (element attribute name). When its value is none, the transition will stop executing immediately. When it is specified as all, the transition effect will be executed when any attribute value of the element changes. ident can specify a certain attribute value of the element. The corresponding types are as follows:

1. Color: Transformed through red, green, blue and transparency components (each numerical value is processed) such as: background-color, border-color, color, outline-color and other css attributes ;

2. Length: real numbers such as: word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height, attributes such as max-width, max-height, line-height, height, border-width, border-spacing, background-position;

3. Percentage: real numbers such as: word-spacing, width, vertical -align, top, right, bottom, left, min-width, min-height, max-width, max-height, line-height, height, background-position and other attributes;

4, integer discrete steps (The entire number), occurs in the real number space, and when using floor() to convert to an integer, such as: outline-offset, z-index and other attributes;

5, the real (floating point) value of number , such as: zoom, opacity, font-weight, and other attributes;

6. Transform list: For details, please refer to: "CSS3 Transform"

7. Rectangle: Through x, y, width and Height (converted to numerical value) transformation, such as: crop

8, visibility: discrete steps, within the range of 0 to 1, 0 means "hidden", 1 means completely "displayed", such as: visibility

9. Shadow: Acts on color, x, y and blur (blur) attributes, such as: text-shadow

10. Gradient: Changes through the position and color of each stop. They must have the same type (radial or linear) and the same stop value in order to perform animation, such as: background-image

11, paint server (SVG): only supports the following cases: from gradient to gradient and color to color, and then the work is similar to the above

12. space-separated list of above: If the list has the same item value, each item in the list will change according to the above rules, otherwise there will be no change

13. a shorthand property: If all parts of the abbreviation can be animated, they will change like all single property changes

Specifically what CSS attributes can achieve the transition effect, the W3C official website lists all CSS attribute values and value types that can achieve the transition effect. You can click here to learn more. What needs to be reminded here is that not all attribute changes trigger the transition action effect, such as the adaptive width of the page. When the browser changes the width, the transition effect will not be triggered. However, changes in the attribute types shown in the above table will trigger a transition action effect.

Code example:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.php中文网.com/" /> 
<title>php中文网</title> 
<style> 
#thediv{
  width:100px;
  height:100px;
  background:blue;
  transition-property:width;
  -moz-transition-property:width;
  -webkit-transition-property:width;
  -o-transition-property:width;
   
  transition-duration:2s;
  -moz-transition-duration:2s;
  -webkit-transition-duration:2s;
  -o-transition-duration:2s;
}
#thediv:hover{
  width:500px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

The transition attribute set by the above code is width.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="//m.sbmmt.com/" /> 
<title>php中文网</title> 
<style> 
#thediv{
  width:100px;
  height:100px;
  background:blue;
   
  transition-property:width,height;
  -moz-transition-property:width,height;
  -webkit-transition-property:width,height;
  -o-transition-property:width,height;
   
  transition-duration:2s;
  -moz-transition-duration:2s;
  -webkit-transition-duration:2s;
  -o-transition-duration:2s;
}
#thediv:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

The above code can set the transition effect of two attributes, separated by commas.

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="//m.sbmmt.com/" /> <title>php中文网</title> <style> #thediv{ width:100px; height:100px; background:blue; transition-property:width,height; -moz-transition-property:width,height; -webkit-transition-property:width,height; -o-transition-property:width,height; transition-duration:2s; -moz-transition-duration:2s; -webkit-transition-duration:2s; -o-transition-duration:2s; } #thediv:hover{ width:500px; height:200px; } </style> </head> <body> <div id="thediv"></div> </body> </html>

submit Reset Code

Automatic operation

CSS3 transition transition-property property

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]