CSS3 transformations, transitions, animations, CSS optimizations

1. Origin of the conversion

Default at the center point;

Modify Origin: Transform-orign:

Value:

1.x coordinate y-coordinate

The upper left corner of the current object is x:0px y:0px;

2. Percent width percent height

0% 0% Upper left Point

50% 50% Center Point

3. Keywords:

Top

Bottom

Left

Right

Center Middle Default

Upper left Top Point

4. If only one value is given, the x-coordinate and y-coordinate are the same;

Two x coordinate y coordinates

Three x coordinate y coordinate z coordinate

2. Convert 2d

Shape size Position

Transform

Rotation: Rotate ()

Displacement: Translate ()

Scaling: Scale ()

Tilt: Skew ()

-Rotation: Rotates the specified angle around the reference origin, clockwise by default;

Syntax: Transform:rotate (NDEG);

n is positive clockwise rotation

n is negative counterclockwise rotation

Rotate not only rotates the elements, but also rotates the direction of the drawing's coordinate system, and if it is done together with other variants, it will affect the subsequent extension of the coordinates to other deformations.

Solution: Put rotate () at the end;

-Displacement: Move the specified distance in the direction of the extension coordinate

Syntax: Translate (x-axis movement distance, y-axis moving distance);

X: Right positive left is negative

Y: Negative on positive

Translate does not affect other elements, but may cover other locations;

Two other single-direction shifts:

TranslateX (distance)

Translatey (distance)

-Zoom: Specify the coordinates on the axis to a multiple of the zoom;

Syntax: scale (multiple)

Multiples: 0-1 decimal is reduced, >1 amplification;

equal to zoom;

Two other single-direction scaling:

ScaleX ()

ScaleY ()

Transform:scale (2); enlarged twice times;

-Tilt: Tilt the specified angle along the direction of the axis;

Syntax: Skew (ndeg); tilt only along the x-axis

Skew (ndeg,ndeg); tilt along the x-axis y-axis

Other two single-direction tilt:

SKEWX ()

Skewy ()

X axis: Angle is positive to left

Negative angle to right pour

Y-axis: angle is upside down

Negative angle to down

3. Convert 3d

Axis: x-coordinate y-coordinate z-coordinate

Property:

Perspective

Sets the distance of the assumed human eye position to the projection plane;

How to use:

Set on the parent element;

Browser compatible:

Chrom,safari:-webkit-perspective

Firefox:-moz-perspective

-Displacement: 3D displacement, can change the position of the element on the z axis;

TranslateX (x)

Translatey (y)

Translatez (z)

Translate3d (x, Y, z)

-Swivel: Rotate ()

Rotatex (NDEG);

Rotatey (NDEG);

Rotatez (NDEG);

-Zoom: Scale ()

Scalez (z)

Scale3d (x, Y, z)

4. Transition

Transition

Transition four elements:

-Transition Properties

Background,color,transform,width,height,opacity,

-Transition takes time

-Transition function: Speed mode

-Transition delay Time: execution interval after excitation operation (S/MS)

1. Transition Properties

Transition-property:background,color;

2. Transition time

Transition-duration:5s 10ms;

3. Transition functions

Transition-timing-function:

Alternate values:

ease; slow-fast-slow;

Linear; constant speed

ease-in; slow-fast (accelerated)

ease-out; fast-slow (slow down)

Ease-in-out; Slow-acceleration-deceleration-slow

4. Transition delay

Transition-delay:5s/ms;

5. Consolidate Transition Properties:

Transsition: Attribute name duration transition function Transition delay, attribute name Duration transition function transition delay;

5. Keyframe Animation

Keyframe: The special state of an object in a position during the execution of an animation;

Keyframe Animation: Use continuous keyframes to control the state change of the object's contact;

Use:

1. Continuous regularity-transition transition

2. Irregular continuous change--animation animation

Realize:

1. Define keyframes:

@keyframes Animation Name {

from/0%{

Animation start State

CSS Styles

}

Percent (key point) {

CSS Styles

}

to/100%{

Animation End State

CSS Styles

}

}

Instance:

@keyframes change{

0%{

background:red;

}

10%{

Background:orange;

}

50%{

Background:yellow;

}

80%{

Background:green;

}

100%{

Background:blue;

}

}

Browser compatible:

@keyframes: IE FF;

@-webkit-keyframes:chrome Safari;

@-o-keyframes:opera;

2. Triggering animations

Animation

Animation: Animation name duration speed type delay;

Use:

1. Write in the non-pseudo-class selector, the page load execution animation;

2. Write in Pseudo-class, the pseudo-class trigger executes the animation;

Browser compatible:

Animation:ie FF;

-webkit-animation:chrome Safari;

-o-animation:opera;

3. Animation Sub-Properties:

-Animation-name: @keyframes (animation) name;

-animation-duration: Length of animation;

-Animation-timing-function: Animation speed

-Animation-dalay: Animation delay time

-Animation-iteration-count: Number of plays

Value:

Numerical

Infinite unlimited times;

-Animation-direction: Animation playback direction;

Value:

Normal playback

Alternate turns the play

-odd number of times positive playback;

-even number of times to reverse the playback;

Animation: Animation name duration speed type delay the number of times the animation playback direction;

-Animation-fill-mode: Effect before and after playback;

Value:

None does not change the default behavior;

Forwards: The last attribute state is guaranteed after the animation is completed;

Backwards: Displays the Start property before the animation is played;

Both

-Animation-play-state: Controls animation playback and pauses

Value:

Paused pause

Running playback

Use occasions:

-Matching pseudo-class

-combined with JS use;

6.CSS optimization;

1. Reduce the number of HTTP requests;

-Merging the background map into an image;

2. CSS is introduced at the top of the page;

3. Put the CSS and JS into the external file (introduce external files, the client will cache);

4.css Code optimization

-merge style;

-Abbreviated style file;

-Reduced style overrides

-code compression (tools)

-Do not scale the image in HTML (change the image size), affect the image transmission;

-Avoid empty src and href;

CSS3 transformations, transitions, animations, CSS optimizations