A deformation
Transform : element may be rotated to rotate an object, zoom Scale, Translate moved, inclined skew, the matrix modification matrix.
Example:
transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);
/*矩阵变形*/
matrix(<number>,<number>,<number>,<number>,<number>,<number>);
/*透视*/
perspective(length);
Transition : excessive property
transition: when the speed of the long name of the speed of the effect over the effect of the transition effects css property curve effect starts over time;
transition: property duration timing-function delay;
/*示例*/
transition:1s ease all;
-webkit-tansition:1s ease all;
-moz-transition:1s ease all;
-o-transition:1s ease all;
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯rotate (): two-dimensional space rotating elements.
When the element is set perspective value available Rotate3D () effect rotation of the three-dimensional space.
rotateX(angele)/*相当于rotate3d(1,0,0,angle)指定在三维空间内的X轴旋转*/
rotateY(angele)/*相当于rotate3d(0,1,0,angle)指定在三维空间内的Y轴旋转*/
rotateZ(angele)/*相当于rotate3d(0,0,1,angle)指定在三维空间内的Z轴旋转*/
scale()
scaleX(<number>)/*只在X轴（水平方向）缩放元素*/
scaleY(<number>)/*只在Y轴（垂直方向）缩放*/
scaleZ(<number>)/*只在Z轴缩放，前提：元素设定透视值*/
Translate ([,]) : movement amount of displacement.
translateX(<translation-value>);/*只在X轴（水平方向）移动*/
translateY(<translation-value>);/*只在Y轴（垂直方向）移动*/
translateZ(<translation-value>);/*只在Z轴移动，前提：元素设置透视值*/
skew () : inclination
skewX(<angle>);/*只在X轴（水平）倾斜*/
skewY(<angle>);/*只在Y轴（垂直）倾斜*/
Matrix (A, c, e, B, D, F) : a matrix modification, c, e is represented by the value of sine or cosine values.
a: represents a scaleX (); X axis scaling
c: skewY (); Y-axis tilt
e: skewX (); X-axis gradient
b: scaleY (); Y axis scaling
d: translateX () X axis
f: translateY () Y-axis moving
transform:matrix(<number>,<number>,<number>,<number>,<number>,<number>);
perspective (): Perspective
.wrap{
perspective:1000px;
}
.wrap .child{
transform:perspective(1000px);
}
Second, the transition
Property-Transition : excessive property
transition-property:all;/*针对所有元素都有过度效果*/
transition-property:none;/*没有元素有过度效果*/
transition-property:ident;/*指定css属性有过度效果，例如width*/
transition-duration: over time
transition-delay: the delay time is negative, the operation starts over from the display point in time, before the operation will be truncated.
transition-timing-function: transition effects, default ease.
transition-timing-function:ease;/*缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔*/
transition-timing-function:linear;/*线性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函数*/
transition-timing-function:ease-in;/*渐显效果，等同于cubic-bezier(0.42,0,1.0,1.0)函数*/
transition-timing-function:ease-out;/*渐隐效果，等同于cubic-bezier(0,0,0.58,1.0)函数*/
transition-timing-function:ease-in-out;/*渐显渐隐效果，等同于cubic-bezier(0.42,0,0.58,1.0)函数*/
transition-timing-function:cubic-bezier;/*特殊的立方贝塞尔曲线效果*/
Third, animation
name-Animation : Animation name, must be used with @keyframes rules, as defined by the name of the animation @keyframes, if a plurality of attribute values separated by commas.
@keyframes equivalent to a namespace, followed by a noun, if the animation-name in the class defines the corresponding name can be executed animation. Keywords can be used directly from and to the definition of animation, from one state transition to another state.
.animation_name{
left:0;
top:100px;
position: absolute;
-webkit-animation: 0.5s 0.5s ease infinite alternate;
-moz-animation: 0.5s 0.5s ease infinite alternate;
-webkit-animation-name:demo;
-moz-animation-name:demo;
}
@-webkit-keyframes demo{
from{left:0;}
to{left:400px;}
}
@-webkit-keyframes demo1{
0%{left:0;}
50%{left:200px;}
100%{left:400px;}
}
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯DURATION-Animation : Animation Time
Timing-function-Animation : the play mode, the following values:
ease: effect of alleviating, equivalent to cubic-bezier (0.25,0.1,0.25,1.0) function, both cubic Bezier.
linear: linear effects
ease-in: fade effect
ease-out: fade effect
ease-in-out: fade fade effect
step-start: immediately jumps to the end state of the animation
step-end: holding animation start state, the the execution time of the end of the animation, immediately jumps to the end of the animation state
step ([, [start | end ]]?): the first parameter is the number of intervals specified number, that animated the stage show is divided into n steps, the second the default parameters for the end, the final step in setting state, start to the end of the state, end as at the beginning of the state, if the effect of the conflict and set up animation-fill-mode to animation-fill-mode is set to the end of the animation state.
cubic-bezier (,,,): special effect cubic curve Siebel
Delay-Animation : start playing time
animation-iteration-count indicates an infinite loop when the number of plays, the value is infinite:
direction-Animation : playback direction, values:
normal: normal direction
reverse: animation run in reverse, with the normal direction is always similar
alternate: animation cycle alternating positive and negative movement
Fill-MODE-Animation : state of play, the value:
none: default values, not set
forwards: After the end of the animation to maintain the status
backwards: return to the animation after the start of the state
both: forwards and backwards to follow two rules after the end of the
animation-play-state: the animation of objects retrieved or set state The value:
running: default, sports
paused: pause
Fourth, the association properties
Origin-Transform : deformation origin, Transform of the reference point, the default is the center point of the element. There are two parameters, a parameter as the abscissa, the ordinate of two parameters.
percentage: percentage specified coordinate value, or negative
length: the length specified coordinate value, or negative
left center right: the horizontal direction value
top center bottom: the vertical direction value
prigin-Perspective : perspective view of the origin, are defined in the 3D elements of the X-axis and Y-axis, it allows to change the position of the bottom of the 3D elements, defining the property, which is a child element of an element, a perspective view, rather than the element itself.
NOTE: Using this property must be used together, and properties perspective, 3D conversion element affects only.
Value: percentage, length, left, center , right, top, center, bottom
backface-visibility : hidden content of the back, the back is visible by default, after the reverse transformation of the content is still visible when the backface-visibility settings hidden, hidden content after rotation, the front will no longer be visible after rotation.
Value: visible, hidden
the Transform-style: 3D rendering, set the elements of how to render embedded in 3D space, there are two values:
Flat: all child elements are rendered in 2D plane
preserve-3d: 3D space reserved