transform
transform: none | <transform-function > [<transform-function>] *
is:
Transform: Rotate | Scale | skew | Translate | Matrix;
Note: transform (deformation) required to add the space between a plurality of variables
rotate (< angle>): by specifying the angle of the original parameter elements in a 2D rotation (2D rotation), there is the need to define the transform-origin attribute. transform-origin is defined by the point of rotation,
wherein the angle refers to the angle of rotation, if the set value is positive for clockwise rotation, if the set value is negative, counterclockwise rotation. Such as: transform: rotate (30deg):
zoom scale: If the second parameter is not provided, then take the first parameter value may be set as the base point of the element by transform-origin, the same element in the center point position
scale ( x, y) so that the elements in the horizontal direction and the vertical direction while scaling (i.e. X-axis and Y-axis while the scaling);
the scaleX (X) elements are only scaled horizontally (X-axis scale);
scaleY (Y) element is only scaled vertically ( Y-axis scale);
center position which is the center point of the elements, the scaling of the base 1, if the value is greater than 1 element amplifies, otherwise its value is less than 1, the element narrowing.
Skew distortion, wherein the second parameter is optional, if the second parameter is not set, then the Y-axis is the same as 0deg element anchored center, we can also change the position of the element by point transform-origin
Twisted skew: skew (x, y) so that the element simultaneously twist (X-axis and Y-axis simultaneously with a certain angle value distortion) in the horizontal and vertical directions;
Matrix: Matrix (<Number>, <Number>, <Number> , <Number>, <Number>, <Number>)
Translate: Translate (X, Y) in the horizontal direction and a vertical direction while moving (i.e. X-axis and Y-axis moving simultaneously); translateX (x) only the horizontal direction (X axis movement); translateY, (Y) to move only in the vertical direction (Y axis)
1translate (<Translation-value> [, <Translation-value>]) the default point is the center point of an element
to change the element point transform-origin
his main role is let us transform before performing the action can change the point position of the element, the element because we default point is its central location
transform-origin (X, Y) : used to set the starting point of the movement element (reference point). The default point is the center point of the element.
Wherein X and Y may be a percentile, em, px, wherein X may be a character parameter values left, center, right
1, top left | left top is equivalent to 0 0 | 0% 0%
2, top | top center | center top is equivalent to 50% 0
3, right top | top right is equivalent to 100% 0
4, left | left center | center left is equivalent to 0 50% | 0% 50%
5, center | center center is equivalent to 50% 50% (default)
6, right | right center | center right equivalent to 100% 50%
7, bottom left | left bottom is equivalent to 0 100% | 0% 100%
8, bottom | bottom center | center bottom 100% equivalent to 50%
9, bottom right | right bottom is equivalent to 100% 100%
Here are the rules of grammar in various browser kernel:
// Mozilla browser kernel: + Firefox3.5
-moz-the Transform-Origin: the XY; // Webkit core browser: Safari and Chrome
-webkit-the Transform-Origin: the XY; // Opera
-o-the Transform-Origin: the XY ; // IE9 -ms-transform-origin: xy; // the W3C standard transform-origin: xy;
transform writing rules in different browser kernel
//Mozilla内核浏览器：firefox3.5+
-moz-transform: rotate | scale | skew | translate ;
//Webkit内核浏览器：Safari and Chrome
-webkit-transform: rotate | scale | skew | translate ;
//Opera
-o-transform: rotate | scale | skew | translate ;
//IE9
-ms-transform: rotate | scale | skew | translate ;
//W3C标准
transform: rotate | scale | skew | translate ;
W3C standard for css3 the transition this kind is described in: "css the transition allows css attribute value smoothly transitions within a certain time period this effect can click the mouse, focus,.
Is clicked or any of the elements changing the trigger, and smoothly animated CSS effects of changes in property values. "
grammar:
transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>
[, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
mainly containing transition values of four properties:
properties to perform transformations: transition-property,
converting the continuation time: transition-duration,
the duration period, rate conversion changes transition-timing-function,
converting the delay time transition-delay.
The following property values were run four
Property-transition: none | All | [ < the IDENT>] [ ',' < the IDENT>] *
transition-Property wherein the element is used to specify when performing a transition effect attribute change, which mainly has the following values: none ( no property changes);
All (all attribute change) this is the default value; indent (element attribute name). When the value is none, transition immediately stop the execution,
will be performed when the transition effect is specified to all, any attribute value change elements, ident can specify a particular attribute value of the element.
二、transition-duration:
grammar:
transition-duration ： <time> [, <time>]*
transition-duration element is used to specify the duration of the conversion process, the value: <time> value is in units of s (seconds) or ms (milliseconds), may be applied to all elements,
Comprising: before and: after pseudo elements. The default value is 0, that is, when the transformation is immediate
transition-timing-function:
grammar:
transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
[, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
1, ease :( gradually slows down) the default value, EASE Bezier function is equivalent to (0.25, 0.1, 0.25, 1.0).
2, linear :( uniform), Linear Bezier function is equivalent to (0.0, 0.0, 1.0, 1.0).
3, ease-in :( acceleration), ease-in function is equivalent to a Bezier curve (0.42, 0, 1.0, 1.0).
4, ease-out :( deceleration), ease-out Bezier function is equivalent to (0, 0, 0.58, 1.0).
5, ease-in-out :( acceleration and deceleration), ease-in-out function is equivalent to a Bezier curve (0.42, 0, 0.58, 1.0)
6, cubic-bezier :( This value allows you to customize a time curve), a specific cubic-bezier curves . (x1, y1, x2, y2 ) on the curve at a particular value of four points P1 and P2.
All values required in [0, 1] region, otherwise invalid.
四、transition-delay:
grammar:
Delay-transition: < Time> [, < Time>] *
Sometimes we not only change the attributes of a css effects, but want to change two or more transition effects css properties, so we just put a few transition statement string together with a comma ( ",") apart,
and each may have different duration and their time rate conversion method.
However, it is noteworthy requires: transition-delay value and transition-duration time is, so to distinguish them in position in the ligatures, the browser will typically determined according to the order,
the first time can be resolved to a value of frivolous The second is a transition-duration transition-delay
If you want to perform attribute all transition effects to the elements, then we can take advantage of all property values to operate, when they shared the same duration and rate conversion methods, such as:
a {
-moz-transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in;
transition: <property> <duration> <animation type> <delay>
//Mozilla内核
-moz-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* //Webkit内核 -webkit-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* //Opera -o-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* //W3C 标准 transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
Animation:
" Keyframes ", we called him the "key frame"
@keyframes IDENT {
from {
Properties:Properties value; } Percentage { Properties:Properties value; } to { Properties:Properties value; }
Or all written percentage: IDENT is a movie name @keyframes the IDENT {0% { the Properties: the Properties value; } Percentage { the Properties: the Properties value; } 100% { the Properties: the Properties value; }}
How to call just defined animation "
Transition requires a trigger event (hover event or click events, etc.) will vary over time its css property;
in the case and animation without the need for any triggering event can also explicitly over time changes to change the attribute value of the element css
cSS animation css animation will affect the value of the corresponding element, throughout the animation, the change in the property value of an element is completely controlled by the animation, the attribute value will be the front cover behind the animation.
Let us look at how to call animation attribute to an element
.demo1 { width: 50px; height: 50px; margin-left: 100px; background: Blue; -webkit-Animation-name: 'wobble'; / * animation attribute name, that is, we define the animation keyframes front name * / - animation-dURATION-WebKit: 10s; / * duration of the animation * / -webkit-Timing-function-animation: EASE-in-OUT; / * animation frequency, and transition-timing-function is the same * / -webkit-animation -delay: 2S; / * animation delay time * / -webkit-animation-the Iteration-COUNT: 10; / * define the loop data, infinite as unlimited * / -webkit-animation-direction: Alternate; / * way * Custom animation / } are the following in Animation: Animation-name;
animation-duration; Value: <time> is a number in s default value is "0" (sec.).
Timing-function-Animation;
Animation-Delay;
Animation-Iteration-COUNT;
Animation-direction;
Animation-Play-State.
Here we were to look at the use of these properties
animation-timing-function and the transition of the transition-timing-function as conversion method having the following six: ease; ease-in; ease -in-out; linear; cubic-bezier
animation-delay: the animation element is used to specify the start time. Value of <time> value is in units of s (seconds), the default value is 0
Iteration-COUNT-Animation: Infinite | < Number> [, Infinite | < Number>] * Animation-Iteration-COUNT is used to specify the number of playback animation loop element, which can take the values <number> is a number whose default value "1"; infinite infinite number of cycles.
direction-Animation: Normal | Alternate [, Normal | Alternate] * Animation-direction element is used to specify the direction of the animation playback which only two values, the default value is normal, if set to normal, each animation cycle are It is played forward; another value is alternate, his role is, animation play forward in even-numbered, odd-numbered player in the opposite direction.
animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>]
A plurality of animation requires ② transform avoid conflicts
have animated element is rotated 360 degrees side while enlarged (amplified from 0 to 100%), as a typical characteristic of this animation we obviously extracted independently connected to a common