css3 animation effects Code
Today to tell you about CSS3 inside the animation effects as well as the code I wrote a small case columns.
First, the transition properties
css3 of transition allows css attribute value transitions smoothly within a certain time interval. This effect can be the mouse across, click, or get the focus for any change in the trigger element and smoothly animated effects changing CSS property values
Transition attribute requires a trigger event, such as: hover (mouse over the event)
Transition-Property 1. : retrieve or set the object attributes involved in the transition
Description: Property Value No attribute can be set individually, may also be provided a plurality of attributes width , height ; can be set to All (default) represents all properties
2. transition-duration duration retrieve or set of objects transition:
Description: Sets the time over ( S, MS ) lS = 1000ms
Transition-Delay 3. : retrieving an object or set of transitional time delay
Description: Sets the excessive delay time ( S, MS ) attribute value is positive when the transition effect is to delay the execution, for the time just ahead of the transition is a negative effect;
Transition-Timing-function 4. : retrieve or set the animation object type transition
Description:
linear uniform
EASE (default) gradually slow down
ease-in acceleration
ease-out deceleration
ease-in-out after accelerated and decelerated
Bezier URL: http://cubic-bezier.com/
Compound written: Transition: Linear All lS 2S;
transition: 2s linear 1s all ;
Explanation: When using composite writing, over time and the delay time sequence are not interchangeable, the first representative of a value over time, the second value representing the time delay;
Note: Which element is deformed, put the transition property Add to whom; recommendations addressed to elements in the initial results;
二、2D transform
transform translated into Chinese has " transformed " or " change " meaning. This property has a very powerful feature, can achieve such a displacement element, and rotating or stretching effect can best embody the transform attribute is to achieve a strong strength element 3D transformation effect.
2D performance function:
. 1 , 2D displacement translate ()
Description: Translate (TX) when a parameter value, the representative of the displacement in the horizontal direction;
Translate (TX , TY) from a first value represents the horizontal direction, from a second value in the vertical direction;
Translate (TX , TY, TZ) from a first value represents the horizontal direction, from a second value in the vertical direction . The third value along the Z axis ( 3D )
translateX (tx) specified displacement direction along the X axis
translateY (ty) specified displacement direction along the Y axis
translateZ (tz) specified displacement direction along the Z axis (3D)
When the attribute value is positive represents rightward or downward movement, when the time is a negative value representative of upward movement to the left or
Description: The attribute values can px can also use % (percentage of the size of the reference element is the width and height)
Description: Translate () displacement effect and positioning in the relative effect is similar, are to be displaced at the current location, its layout elements are not affected, retained its original location.
2 , 2D scaling scale ()
Description: attribute value represents a multiple of the unit is not applied; 0 - 1 is a reduced effect between larger than 1 when the effect is amplified;
The default value is 1 ;
scale ( value 1) representing the horizontal and vertical enlargement or reduction are
scale ( value 1 , value 2) value of 1 : scaling the magnitude values of the horizontal direction 2 : vertical direction
Property value can be set to a negative value, but is rarely used;
scaleX scale (value) in the horizontal direction
scaleY scale (value) in the vertical direction
scaleZ (the value of) the Z scale axis direction ( 3D )
3 , 2D rotation so that rotate ()
Description : Unit attribute values in degrees ( deg )
rotate () rotating along a center point; only put an attribute value, value: clockwise; negative: counterclockwise rotation;
rotateX () along the X rotation axis
rotateY () along the Y rotation axis
rotateZ () along the Z axis ( 3D )
. 4 , 2D oblique skew ()
Description: Unit attribute values in degrees ( deg ); attribute value is positive: negative tilt left or: right or downward
skew ( value 1) when a value representative of along the X -axis gradient
skew ( value 1 , value 2) value of 1 : along the X tilt axis value of 2 : along the Y tilt axis
the skewX () along the X tilt axis
the skewY () along the Y tilt axis
Description: element by transform during deformation, it is not affecting the layout of other elements. Without departing from the document flow.
By default, when the deformation element is deformed along a central point to elements of
When using composite writing, except they shun hearing, it can lead to different results, along hearing they do is parsed from back to front.
transform: translate(100px) rotate(60deg);
5 , the origin is set properties: Transform-Origin
Definitions: transform-Origin is a variant of the origin, that is the element around the point of rotation or deformation, the property is only set transform function attributes when;
Description: Transform-Origin : value 1 value 2 ; value 1 : level value 2 : Vertical
px % left top right bottom ;
Here is my own to write a small text columns:
This is the code, kaleidoscope write round eyes As you may know, it is inside Naruto Uchiha family, senior Tongshu. First, we give him a div as a container contained inside the element, and then set the div center ul of the same width and height of the black circles, and then disposed inside three li is . 3 black oval, with positioning attributes set at ul center position , and finally to a third li inside plus a span width and height equal to the circular, so that we completed the initial effect, then we set across the state, but the mouse across div when li background color is changed to red, the second rotating clockwise 120 degrees, a third rotated counterclockwise 120 degrees.
At this time the mouse across the displayed results:
Hurry to try it!