This is the 18th day of my participation in the August Challenge

Hi, I’m Ken

Author: Please call me Ken Link: juejin.cn/user/109118… The copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.

🌊🌈

Part of the content and pictures of the article are from the Internet. If you have any questions, please contact me (there is an official account in the introduction of the home page).

This blog is suitable for just contactHTMLAnd the friends who want to review after a long time.

🌊🌈

9.1 transition

CSS3 provides powerful transition properties that allow you to add effects such as fade in, fade out, and animation speed to elements as they change from one style to another without using Flash animations or JavaScript scripts. In CSS3, transition attributes mainly include transition-property, transition-duration, transition-timing-function, and transition-delay. This section explains each of these transition attributes in detail.

9.1.1 the transition – the property attribute

The transition-property property specifies the name of the CSS property to which the transition effect is applied, usually when the user moves a pointer to an element. The transition effect starts when the specified CSS property changes. The basic syntax is as follows:

transition-property: none | all | property;
Copy the code

In the syntax above, transition-property values include none, all, and poperty.

The transition – the property attribute values

Attribute values describe
none No attributes will have a transition effect
all All attributes will have a transition effect
property The name of the CSS property that defines the transition effect, separated by commas

Example: Demonstrate the use of transition-property,

<! DOCTYPEHTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>The transition - the property attribute</title>
		
		<style type="text/css">
			
			div {
				width: 400px;
				height: 100px;
				background-color: red;
				font-weight: bold;
				color: #FFF;
			}
			
			div:hover {
				background-color: blue;
				/* Specify the CSS property for the animation transition */
				-webkit-transition-property: background-color;
				/*Safari and Chrome compatible code */
				-moz-transition-property: background-color; 
				/*Eirefox browser compatible code */
				-o-transition-property: background-color;
				/*Opera browser compatible code */
			}
			
		</style>
		
	</head>
	<body>		
		
		<div>Use the transition-property property to change the background color of an element</div>
		
	</body>
</html>
Copy the code



When the mouse pointer is over the red box,

In the above case, the transition-property property is used to specify the CSS property that produces the transition effect as background-color, and the background color is set to change to blue when the mouse is moved up. Meanwhile, to solve the compatibility problem of browsers, different browser prefix compatibility codes are added.

When the mouse pointer hovers over the < div> area of the page, the background color immediately changes from red to blue without transition. This is because when you set the “transition” effect, you must use the transition-duration property to set the transition time, otherwise the transition effect will not occur.

9.1.2 the transition – duration properties

The transition-duration attribute is used to define the duration of the transition effect. The default value is 0, and the unit is usually seconds (s) or milliseconds (ms). The basic syntax is as follows:

transition-duration: time;
Copy the code

Example: Use the transition-duration property

<! DOCTYPEHTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>The transition - duration properties</title>
		
		<style type="text/css">
			
			div {
				width: 150px;
				height: 150px;
				margin: 0 auto;
				background-color: yellow;
				border: 2px solid #00f;
				color: # 000;
			}
			
			div:hover {
				background-color: red;
				/* Specify the CSS property for the animation transition */
				-webkit-transition-property: background-color;
				/*Safari and Chrome compatible code */
				-moz-transition-property: background-color;
				/*Firefox compatible code */
				-o-transition-property: background-color;
				/* Opera browser compatible code */
				/* Specifies the animation transition time */
				-webkit-transition-duration: 5s;
				/*Safari and Chrome compatible code */
				-moz-transition-duration: 5s; 
				/*Firefox compatible code */
				-o-transition-duration: 5s; 
				/*Opera browser compatible code */
			}
			
		</style>
		
	</head>
	<body>		
		
		<div>Use the transition-duration property to set the transition time</div>
		
	</body>
</html>
Copy the code



When the mouse pointer is placed over the box, the color of the box gradually changes from yellow to red



In the example above, the transition-property property specifies the CSS property that will produce the transition to background-color, and sets the background color to red when the mouse moves over it. Also, it takes 5 seconds to define the transition effect using the transtion-duration attribute. When the mouse pointer hovers over the < div> area of the web page, the yellow background gradually transitions to a red one.

9.1.3 the transition – the timing – function properties

The transition-timing-function attribute specifies the speed curve of the transition effect. The default value is “ease”. The basic syntax is as follows:

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n, n, n, n);
Copy the code

Transition-timing-function () : transition-timing-function () : transition-timing-function () : transition-timing-function () : transition-timing-function

Attribute values describe
linear Specifies the transition effect from start to finish at the same speed, equivalent to cubic- Bezier (0, 0, 1, 1)
ease Specifies a transition effect that starts slowly, then speeds up, and finally ends slowly, equivalent to cubic- Bezier (0.25, 0.1, 0.25, 1)
ease-in Specifies a transition effect that starts slowly and then gradually accelerates (fades), equivalent to cubic- Bezier (0.42, 0, 1, 1)
ease-out Specifies a transition effect with a slow end (fade effect), equivalent to cubic- Bezier (0, 0, 0.58, 1)
ease-in-out Specifies a transition effect that starts and ends at a slow speed, equivalent to cubic- Bezier (0.42, 0, 0.58, 1)
cubic-bezier(n, n, n, n) Define the shape of bezier curves for acceleration or deceleration, with values between 0 and 1

Transition-timing-function example: Transition-timing-function

<! DOCTYPEHTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>The transition - the timing - function properties</title>
		
		<style type="text/css">
			
			div {
				width: 200px;
				height: 200px;
				margin: 0 auto;
				background-color: yellow;
				border: 5px solid red;
				border-radius: 0px;
			}
			
			div:hover {
				border-radius: 105px;
				/* Specify the CSS property for the animation transition */
				-webkit-transition-property: border-radius; 
				/* Safari and Chrome compatible code */
				-moz-transition-property: border-radius; 
				/*Firefox compatible code */
				-o-transition-property: border-radius; 
				/*Opera browser compatible code */
				/* Specifies the animation transition time */
				-webkit-transition-duration: 5s; 
				/*Safari and Chrome compatible code */
				-moz-transition-duration: 5s;
				/*Firefox compatible code */
				-o-transition-duration: 5s;
				/*Opera browser compatible code */
				/* Specifies the transition effect for the animation to start and end slowly */
				-webkit-transition-timing-function: ease-in-out; /*Safari and Chrome compatible code */
				-moz-transition-timing-function: ease-in-out;
				/*Firefox compatible code */
				-o-transition-timing-function: ease-in-out;
				/*Opera browser compatible code *//* Line 28 */
			}
			
		</style>
		
	</head>
	<body>		
		
		<div>The transition - the timing - function properties</div>
		
	</body>
</html>
Copy the code



When the mouse pointer is placed over the box, the following changes occur



In the case above, the transition-property property specifies that the CSS property that will produce the transition is “border-radius” and that the transition animation changes from a square to a straight circle. Then use the transition-duration property to define that the transition takes 5 seconds, and use the transition-timing-function property to specify that the transition starts and ends slowly. When the mouse pointer hovers over the < div> area of the web page, the transition action will be triggered, and the square will slowly begin to change, then gradually accelerate, and then slowly become a full circle.

9.1.4 the transition – delay properties

The transition-delay attribute specifies when the transition effect starts. The default value is 0 and the unit is usually seconds (s) or milliseconds (ms). The transition-delay attribute can be a positive integer, a negative integer, or 0. When the value is set to negative, the transition action starts from this point in time and the previous action is truncated. When set to positive, the transition action is delayed. The basic syntax is as follows:

transition-delay: time;
Copy the code

Example: To demonstrate the use of the transition-delay property, add the following style to the second CSS style:

/* Specifies animation delay */
-webkit-transition-delay: 2s;
/*Safari and Chrome compatible code */
-moz-transition-delay: 2s;
/*Firefox compatible code */
-o-transition-delay: 2s;
/*Opera browser compatible code */
Copy the code

The example above uses the transition-delay attribute to specify that the action of the transition will delay triggering for 2s.

When the mouse pointer hovers over the < div> area of the web page, the transition motion will be triggered after 2 seconds. The square slowly begins to change, then gradually accelerates, and then slowly changes to a full circle.

9.1.5 transition properties

The transition property is a compound property, Transition-property: used to set transition-property, transition-duration, transition-timing -function, and transition-delay in one property. The basic syntax is as follows.

transition: property duration timing-function delay;
Copy the code

When you use the Transition property to set multiple transition effects, its parameters must be defined in order and cannot be reversed. The four transition properties, as set in the previous example, can be implemented directly with the following code.

transition: border-radius 5s ease-in-out 2s;
Copy the code
  • Note: _ Either a single attribute or a shorthand attribute can be used to achieve multiple transitions. If you use the transition shorthand property to set multiple transition effects, you need to specify all the values for each transition property set, separated by commas.

That’s the end of today’s introductory study

Peace

🌊🌈

A Ken HTML, CSS introduction guide (a)_HTML basics a Ken HTML, CSS introduction guide (b)_HTML page elements and attributes a Ken HTML, CSS introduction guide (c)_ text style attributes Ken HTML, CSS introduction guide (four)_CSS3 selector Ken HTML, CSS introduction guide (five)_CSS box model Ken HTML, CSS introduction guide (six)_CSS box model Ken HTML, CSS introduction guide (seven)_CSS box model Ken’s Getting Started with HTML and CSS (8)_CSS box model Ken’s Getting Started with HTML and CSS (9)_ Floating and Positioning Ken’s Getting Started with HTML and CSS (10)_ Floating and Positioning Ken’s getting Started with HTML and CSS (11)_ Floating and positioning Ken’s introduction to HTML and CSS (12)_ The application of forms The introduction to HTML and CSS (13)_ the application of forms (14)_ the application of forms the introduction to HTML and CSS (15)_ the application of forms Ken o HTML, CSS, getting started guide (16) _ Ken o multimedia technology of HTML, CSS, getting started guide (17) _ multimedia technology suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (a) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (2) Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (3) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (4) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (5) 【 share | JS dry goods Challenge the shortest time to take you into JS (6)

🌊🌈 About postscript:

Thank you for reading, I hope to help you if there is a flaw in the blog, please leave a message in the comment area or add contact information in the home page of the personal introduction of private chat I thank every little partner generous advice

Original is not easy, “like” + “attention” thanks for your support ❤