css3--animation effects

CSS3 Animation--transition (transition)

Used to specify the time required for changes between different states of the element, the attribute value is a time value, the unit (S/MS); First contact This property feel some trouble, through a period of learning, or simply do the over-knowledge of the finishing.

Correlation attribute 1.transition: Shorthand for properties that can be used to set four property values in a single attribute.

div{    width:100px;    height:100px;    background:yellow;    transition:width 2s linear 2s, height 2s linear 2s;}div:hover{    width:200px;    height:200px;}

• The above code uses the transition shorthand attribute, where the transition attribute specifies the over object, transition time, transition time curve, and excessive delay.

2.transition-property: Used to specify the object that the transition effect applies to. 3.transition-duration: Used to specify the time required for excessive effects. 4.transition-timing-functon: Used to specify the transition effect time curve. 5.transition-delay: Used to specify the delay between over-satisfying conditions and starting over.

div{    transition-property: width;    transition-duration: 1s;    transition-timing-function: linear;    transition-delay: 200ms;}div:hover{    width:200px;    height:200px;}

• The first line above declares that the specified over object is the element width (widths).
• The second line declares the time required to specify the transition (1s).
• The third line declares the time curve (linear) that specifies the excess.
• The four-line declaration specifies the transition delay time (2s).
• Note: The above method changes the box size, will have a certain impact on the surrounding layout, in order to achieve the visual effect of the animation, without affecting the layout, you need to use the CSS3 2d/3d conversion.

CSS3 2d/3d Conversion--transform

• Css2d/3d conversions are also often called CSS animations
• 2d/3d conversions do not cause any impact on the surrounding layout.

Related property values

• rotate (interpreted as rotation)
• translate (understood as mobile)
• skew (understood as italic)
• scale (understood as scaling)
• majtrix (shorthand for the above attribute values)
• above use more (common) in element's click/hover effect

1.rotate (swivel)

The rotation of the mouse over the implementation method:

div{width：100px；height：100px；transition-duration：2s；transition-delay：2s；}div:hover{transform:rotatez(45deg)    transform:rotatex(45deg)transform:rotatey(45deg)}

• The first paragraph of the above code specifies that the transition time for all attributes of an element is 2s and the delay is 2s.
• The second paragraph specifies that when the element is hovered, the Transform property is Rotatey (45deg) (45 degrees clockwise in the y-axis), and if the rotate value is negative, the direction of rotation is counterclockwise. (3D dynamic effect)
• Rotatex (45DEG), which specifies that the element rotates 45 degrees clockwise on the x axis. (3D dynamic effect)
• Rotatez (45DEG), which specifies that the element rotates 45 degrees clockwise on the z axis. (2D dynamic effect)
• The implementation of the element in the mouse hover 2s, the y axis clockwise rotation 45 degrees, the selection process 2s.

2.translate (MOBILE)

Mouse hover Move Implementation code:

 div{width:100px;height:100px;transition-duration:300ms;}div:hover{transform:translate (50px,50px)} 

• The first paragraph of the code specifies that the transition time of the element attribute change process is 3s.
• The second paragraph of the code specifies that when the element is back-hovering, the element item moves 50px in the positive direction of the x-axis, moving 50px in the positive direction of the y-axis, and the direction of movement is negative when the transform value is negative.
• The above can realize the amount of movement when the specified element is back-hovering.

3.scale (zoom)

Zoom implementation code when hovering over the mouse:

 div{width:100px;height:100px;transition:2s;}div:hover{transform:scale (0.4,2);}  

• The first paragraph of the code is still the specified element change transition time of 2s.
• The second paragraph specifies that the element x-axis dimension scale is 0.4 times times (reduced) and the y-axis dimension scale is twice times (magnified).
• The above code implements the scaling of the specified dimensions using 2s time when the element is back-hovering.

4.skew (Tilt)

Often used to change the element box shape implementation code:

div{width:100px;height:100px;transform:slew(20deg,40deg);        }

• The above-specified elements are tilted 20 degrees counterclockwise in the y-axis of the element and 40 degrees counterclockwise in the x-axis midline.

Using the above attributes, we can achieve some simple page animation, when our pages are more ornamental, the code is more concise.

css3--animation effects