Html_ Web page Making animation

I. CSS3 deformation

1. Introduction to Deformation

is a collection of effects, such as a pan-rotated zoom tilt effect, and no effect can be called morphing.

Syntax: transform:[transform-function]*;

Tranform-function: Sets the deformation function, which can be one or more, separated by an empty number in the middle.

Transform (): A translation function that repositions the position of an element based on the x, y coordinates.

Scale (): The scaling function, the value is a degree value.

Rotate (): rotation function, the value of a number of degrees.

Skew (): Tilt function, value a number of degrees.

CSS3 3D deformation before parentheses plus 3d such as Transform3D ()

2.2d variants

1) 2d Displacement

Syntax: Translate (tx,ty);

TX: The length of the vector that represents the x-axis movement, or positive, which means moving to the x-axis to the right or to the left.

Ty: The length of the vector that represents the y-axis movement, if positive, down, and vice versa, upward

2) 2d Zoom

Syntax: Scale (SX,SY)

SX: Width Scaling Amount

SY: Height Scaling Amount

3) 2d Tilt

Syntax: Skew (Ax,ay)

The tilt direction of the ax:x axis.

The tilt direction of the ay:y axis.

The unit is expressed in deg (°).

4) 2d Rotation

Syntax: Rotate (a)

Two. CSS3 transition

1. Introduction

2. Use of transition properties

transition:[]*;

Transition-propery: Specifies CSS properties for staging or dynamic impersonation.

Transition-duration: Specifies the time that is required to complete the transition.

Transition-timing-function: Specifies the transition function.

Transition-delay: Specify the delay time at which the transition begins

Multiple use these attributes separated by a space.

1) Transition Properties

The Transution-property property is used to define the CSS property name of the transform animation.

Common values:

IDENT: Specified CSS Property (width height Background-color property)

All: Specifies that all elements support the style of the Transition-property property.

2) time required for transition

3) Transition function

The Transition-teming-function property is used to specify the transition speed

Value:

Ease: The element style transitions from the initial state to the terminating state as fast as it is slow, and slowly (the default value).

Linear: The element style transitions from the initial state to the stop state speed constant.

Ease-in: The element style transitions from the initial state to the terminating state faster (fade effect).

Ease-out: The element style is getting slower (fade effect) from the initial state to the terminating state.

The ease-in-out accelerates and slows down first.

4) Transition delay time

Used to specify the time at which the animation starts executing, and how long it takes to perform the transition effect when the element attribute is changed. This time can be positive, 0, negative.

Positive value: The element transition effect is not triggered immediately, and is not triggered until the set time value is crossed.

Negative value: The element transition effect is displayed from that point in time, and the previous action is truncated.

0: The default value, the element transition effect executes immediately.

3. Trigger mechanism for Transitions

Pseudo-Class Trigger:: Hover:active:focus:checked

Media query: The @media property can be used to determine the size direction of the device.

JavaScript trigger: Triggered by JavaScript script.

Three. Introduction to CSS3 Animation

The 1.tramsition property animates by specifying how the initial and ending states of a property are flattened between the two states.

2.animation animation mainly consists of two parts.

1) achieve a more complex animation effect with animations like FLASJ Animation's key character declaration

2) Locate the element that you want to animate, and invoke the animation of the Keyframe declaration.

Set keyframes

Grammar:

@keyframes idnet{

from{style here}

percenrage{}

to{}

}

You can also change from and to 0% and 100%

Call KeyFrames

Syntax: animation:[];

Animation-name Animation Name

Animation-duration animation-timing-function Animation-delay the same as before.

Animation-ieration-count: Indicates the number of plays Infinite unlimited times.

Animation-direction: Playback direction of the animation

Normal plays forward every time

Alternate even several times forward odd reverse

Animation-play-state: Animation playback status

Running re-play

Paused pause

Animation-fill-mode: Defines actions that occur before and after the animation begins

Forwards indicates that the animation continues to apply the position of the last keyframe after it finishes, and backwards indicates that the initial frame of the animation is applied quickly when the animation style is applied to the element

Both represents values with forwards and backwards

Html_ Web page Making animation