25th Chapter CSS3 Transition effect

25th Chapter CSS3 Transition effect
Learning Essentials:
1. Introduction to Transition
2.transition-property
3.transition-duration
4.transition-timing-function
5.transition-delay
6. Abbreviations and versions

CSS3 transition effect, this function can be used without JavaScript to
Implement simple user interaction capabilities.

A Introduction to Transitions
Transitions typically trigger smooth transitions through a few simple CSS actions, such as: hover,: Focus,
: Active,: checked and so on. CSS3 provides the transition property to implement this transition function, with the main attributes such as
The following table:
Property Description
Transition-property to specify CSS properties for a transition or dynamic simulation
Transition-duration Specify the time required to complete the transition
Transition-timing-function specifying the function of the transition
Transition-delay Specify the delay time at which the transition begins to occur
Transition abbreviated form, according to the door four attribute value ligatures

We first create an element that has no transition effect and then trigger it by: hover. In the absence of any transitional effect
The trigger will immediately blunt execution.
Set element style
div {
width:200px;
height:200px;
Background-color:white;
border:1px solid Green;
}
Background turns black after mouse hover, text turns white
Div:hover {
Background-color:black;
Color:white;

margin-left:50px;
}

Two Transition-property
First, setting the first property of a transition is the property of the specified transition. Again, you need to specify that you want to transition a dollar
Two sets of styles are used for user and page interaction. Then use the Transition-property property, detailed property
The values are the following table:
Property Value Description
None does not specify any style
All default value, Transition-property attribute supported by the specified element

From the list in the door, generally speaking, none is used to have a transition style to cancel. And all, it is
All transition-property styles are supported, and one is to specify some of the Transition-property
Style. So what are the styles supported by Transition-proerty? Most of them support

Set background and text color with transition effect
Transition-property:background-color, color, margin-left;

Three Transition-duration
If you simply set the style of the transition, you won't be able to achieve the effect immediately. The time required for the transition must be added, as the default
In the case of a transition time of 0.
Set the transition time to 1 seconds, if half a second can be set to. 5s
Transition-duration:1s;
Four Transition-timing-function
When the transition effect is running, for example, an easing effect is created. By default, the ease is: The element style is over from the initial state
When crossing to the terminating state, the speed from fast to slow, gradually slow, that is, ease. is also the default value, several other easing methods are as follows
Table shows the following:

Property value Ease

Describes the default value, when the element style transitions from the initial state to the terminating state by the speed
Slow down, slow down gradually. Equivalent to Bezier curve (0.25, 0.1,
0.25, 1.0)

Linear
The element style transitions from the initial state to the terminating state at a constant speed. Equivalent
Hubessers curve (0.0, 0.0, 1.0, 1.0)

Ease-in
When the element style transitions from the initial state to the terminating state, the speed is increasing
Fast, showing an accelerating state. Equivalent to Bezier curve (0.42, 0,
1.0, 1.0)

Ase-out
When the element style transitions from the initial state to the terminating state, the speed is increasing
Slow, presenting a deceleration state. Equivalent to Bezier curves (0, 0, 0.58,
1.0)

Ease-in-out
When the element style transitions from the initial state to the terminating state, it is accelerated, then reduced
Speed. Equivalent to Bezier curve (0.42, 0, 0.58, 1.0)
Ease-in-out
Constant speed
Transition-timing-function:linear;
All five of these are set property values, and we can also customize this easing. Using Cubic-bezier ()
The property value, which passes four parameters p0,p1,p2,p3, values between 0~1.
Custom easing
Transition-timing-function:cubic-bezier (0.25, 0.67, 0.11, 0.55);
As for the specific values of what to do, how can we accurately get the relevant information, this to understand the computer graphics
Learn about the three times Bezier curve, similar to the curve in Photoshop. Here we ignore.
There is also a non-smooth transition, which is a skip transition with the property value: Steps (N,type). The first value is a
A number of values that indicate a few jumps. The second value is start or end, an optional value. To jump or knot at the beginning
When the beam jumps.
Jump 10 times to the end
Transition-timing-function:steps (10,end);

Five Transition-delay
This property can set a transition delay effect, which is the effect after the set delay time. Use
The Transition-delay property value. If you have more than one style effect, you can set multiple delay times, separated by spaces.
Setting the delay effect
transition-delay:0s, 1s, 0s;
Six Abbreviations and versions
I can use transition directly to shorthand, there are two forms of shorthand. The first is that each style has a separate sound
The second is to not consider the style, which is to use all declaration.
Separate declaration
transition:background-color 1s ease 0s, color 1s ease 0s, margin-left
1s ease 0s;
If each style is unified, use all directly
transition:all 1s ease 0s;
In order to be compatible with the old version, you need to add the corresponding browser prefix, version information to check

<! DOCTYPE html>
<meta charset= "Utf-8" >
<TITLE>CSS3 transition Effects </title>
<link rel= "stylesheet" type= "Text/css" href= "Style.css" >
<body>

<div> I'm html5</div>.

</body>

@charset "Utf-8";

Body {
margin:100px;
}

div {
width:200px;
height:200px;
border:1px solid Green;
Background-color:white;
/*transition-property:background-color, Color, margin-left;*/
/*transition-property:all;*/
/*transition-duration:1s;*/
/*transition-timing-function:ease;*/
/*transition-timing-function:linear;*/
/*transition-timing-function:ease-in;*/
/*transition-timing-function:cubic-bezier (0.25, 0.65, 0.88, 0.25); */
/*transition-timing-function:steps (5, start); */
/*transition-delay:0s, 2s, 0s;*/

/*transition:background-color 1s ease 0s, color 1s ease 0s, margin-left 1s ease 0s;*/
transition:all 1s ease-in 0s;
}

Div:hover {
Background-color:black;
Color:white;
margin-left:100px;
};

25th Chapter CSS3 Transition effect