Chapter 2 CSS3 transition effect-water source

Chapter 2 CSS3 transition effect-original learning points of water:

1. Introduction to transition

2. transition-property

3. transition-duration

4. transition-timing-function

5. transition-delay

6. Abbreviations and versions

Lecturer: Li Yanhui

This chapter mainly discusses the transition effect of CSS3 in HTML5. This function can be used to implement simple user interaction functions without using JavaScript.

1. Introduction to transition

The transition effect is generally triggered by some simple CSS actions, such as hover, focus, active, and checked. CSS3 provides the transition attribute to implement this transition function. The main attributes are as follows:

Attribute	Description
Transition-property	Specifies the CSS attribute for transition or dynamic simulation.
Transition-duration	Specify the time required to complete the transition
Transition-timing-function	Transition Function
Transition-delay	Specify the delay time when the transition starts.
Transition	Abbreviated form: Four attribute values on the portal

We first create an element with no transition effect, and then trigger it through: hover. If no transition effect is triggered, the execution is triggered immediately.

// Set the element style

p {    width: 200px;    height: 200px;    border: 1px solid green;}

// The background turns black and the text turns white after hovering

p:hover {    background-color: black;    color: white;    margin-left: 50px;}

II.Transition-property

First, the first attribute for setting the transition is to specify the transition attribute. Similarly, you need to specify two styles for the transition of an element for user-page interaction. The transition-property attribute is used. The detailed attribute values are as follows:

Attribute Value	Description
None	No style specified
All	Default Value: Specifies the style of the transition-property attribute supported by the element.
Specify a style	Specify the style that supports transition-property

From the door-to-door list, in general, none is used to cancel a transitional style. All supports all transition-property styles, and specify certain styles in transition-property. So what styles does transition-proerty support? See the following table:

Style name	Style Type
Background-color	Color)
Background-image	Only gradients (gradient)
Background-position	Percentage, length (percentage, length value)
Border-bottom-color	Color
Border-bottom-width	Length
Border-color	Color
Border-left-color	Color
Border-left-width	Length
Border-right-color	Color
Border-right-width	Length
Border-spacing	Length
Border-top-color	Color
Border-top-width	Length
Border-width	Length
Bottom	Length, percentage
Color	Color
Crop	Rectangle
Font-size	Length, percentage

Font-weight	Number
Grid -*	Various
Height	Length, percentage
Left	Length, percentage
Letter-spacing	Length
Line-height	Number, length, percentage
Margin-bottom	Length
Margin-left	Length
Margin-right	Length
Margin-top	Length
Max-height	Length, percentage
Max-width	Length, percentage
Min-height	Length, percentage
Min-width	Length, percentage
Opacity	Number
Outline-color	Color
Outline-offset	Integer
Outline-width	Length
Padding-bottom	Length
Padding-left	Length
Padding-right	Length
Padding-top	Length
Right	Length, percentage
Text-indent	Length, percentage
Text-shadow	Shadow
Top	Length, percentage
Vertical-align	Keywords, length, percentage
Visibility	Visibility
Width	Length, percentage
Word-spacing	Length, percentage
Z-index	Integer
Zoom	Number

// Set the background and text color to a transitional Effect

transition-property: background-color, color, margin-left;

III.Transition-duration

If you simply set the transition style, the effect cannot be achieved immediately. The time required for the transition must be added because the transition time is 0 by default.

// Set the transition time to 1 second. If it is half a second, it can be set to. 5 s.

transition-duration: 1s;

4.Transition-timing-function

When the transition effect is running, such as easing effect. By default, an element style changes from the initial state to the terminated state, and the speed changes from fast to slow. The element style gradually slows down, that is, the terminated state. It is also the default value. The following table lists the other easing methods:

// Constant speed

transition-timing-function: linear;

The above five are set attribute values. We can also customize this easing. Use the values of the cubic-bezr () attribute to pass four parameters p0, p1, p2, and p3. The value ranges from 0 ~ Between 1.

// Custom easing

transition-timing-function: cubic-bezier(0.25, 0.67, 0.11, 0.55);

As for what these values do, how can we get the relevant information accurately? This is to understand the knowledge of cubic besell curves in computer graphics, similar to curve color in photoshop. Here we ignore.

Another kind is not smooth transition, but skip transition. The property value is steps (n, type ). The first value is a value, indicating the number of jumps. The second value is start or end. An optional value. It indicates the start or end hop.

// 10 jumps to the end

transition-timing-function: steps(10,end);

5.Transition-delay

This attribute can set a transitional delay effect, that is, the effect is executed after the set delay time. Use the value of transition-delay. If there are multiple styles, you can set multiple latencies separated by spaces.

// Set the latency

transition-delay: 0s, 1s, 0s;

6. Abbreviations and versions

I can use transition for shorthand. There are two forms of shorthand. The first is that each style is declared separately. The second is to use all declarations without considering the style.

// Separate statement

transition: background-color 1s ease 0s, color 1s ease 0s, margin-left 1s ease 0s;

// If each style is uniform, use all

transition: all 1s ease 0s;

To be compatible with the old version, you need to add the corresponding browser prefix. The version information is as follows:

	Opera	Firefox	Chrome	Safari	IE
Prefix required	15 ~ 22	5 ~ 15	4 ~ 25	3.1 ~ 6	None
No prefix is supported.	23 +	16 +	26 +	6.1 +	10.0 +

// Compatible with the full version

-webkit-transition: all 1s ease 0s;-moz-transition: all 1s ease 0s;-o-transition: all 1s ease 0s;-ms-transition: all 1s ease 0s;transition: all 1s ease 0s;