Html5-css3-javascript (4)

Deformation and animation-related properties in CSS3

CSS3 has added morph and animation-related properties on its original basis, which allows you to implement features that previously required large pieces of JavaScript. The transformation of the CSS3 can shift, rotate, scale, and skew 4 geometric transformations on the HTML component, which can control the appearance of the HTML component in a richer form.

CSS3 provides transition animations with the help of 4 geometric transformations, such as displacement, rotation, scaling, and tilt. Transition animations are simple, as long as you specify which CSS properties of the HTML component require an animation effect to perform the change, and specify the duration of the animation, you can guarantee that the HTML component plays the animation by the specified rules.

More powerful than transition animation is the animation animation, animation animation can also be combined with displacement, rotation, scaling, tilt 4 geometric transformations, but it can specify multiple keyframes, allowing the definition of more rich custom animation.

1. Deformation support provided by CSS3

CSS3 provides deformation support for common geometric transformations of HTML components, including rotation, scale, tilt, shift 4, or transformation matrices.

CSS3 provides the following two attribute values for morph support.

Transform: This property is used to set the warp. This property supports one or more morph functions. CSS3 provides the following transformation functions.

Translate (TX [, Ty]): This function sets the HTML component to move the TX distance horizontally, moving the Ty distance vertically. Where the Ty parameter can be omitted, if the Ty parameter is omitted, then Ty defaults to 0, indicating that there is no displacement on the longitudinal.

TranslateX (TX), Translatey (Ty)

Scale (SX, SY): This function sets the HTML component to be scaled horizontally over the SX, with a vertical scaling ratio of sy. The SY parameter can be omitted, and if omitted, SY defaults to SX, that is, to maintain the horizontal ratio scaling.

ScaleX (SX) = scale (sx,1), ScaleY (SY) = scale (1,sy)

Rotate (angle): This function sets the HTML component to turn the angle angle clockwise.

Skew (SX [, SY]): This function sets the HTML component to tilt the sx angle along the x axis, tilting the sy angle along the y axis. Where the SY parameter can be omitted, if the SY parameter is omitted, the SY default is 0.

SKEWX (SX), Skewy (SY)

Matrix (M11,m12,m21,m22,dx,dy): This is a function based on matrix transformation. The first 4 parameters will form a deformation matrix, and DX, DY will be responsible for translating the coordinate system.

Transform-origin: This property sets the center point of the warp. The property value should be specified as Xcenter ycenter, where Xcenter, Ycenter supports the following property values.

Left: Specifies that the center point of rotation is at the right edge of the HTML component. The property value can only be specified to Xcenter.

Top: Specifies that the rotation center point is at the top edge of the HTML component. The property value can only be specified to Ycenter.

Right: Specifies that the rotation center point is at the left edge of the HTML component. The property value can only be given to Xcenter.

Bottom: Specifies that the rotation center point is located below the bounds of the HTML component. The property value can only be given to Ycenter.

Center: Specifies that the rotation center point is in the middle of the HTML component. If both Xcenter and Ycenter are specified as center, the rotation center point is at the center of the HTML element.

Length value: Specifies the length of the center point of rotation from the left and right boundaries.

Percent: Specifies the percentage position of the rotation center point in landscape and portrait orientation.

Example:

-moz-transform:rotate (30DEG);

-webkit-transform:rotate (30DEG);

-o-transform:rotate (30DEG);

2. Transition animations provided by CSS3

CSS3 provides transition animation support, and transition animations can control how a certain property of an HTML component changes over a period of time, in a smooth gradient, resulting in an animated effect.

Transition animations are specified by the Transition property. The value of the Transition property includes the following 4 sections.

Transition-property: Specifies which CSS property of an HTML element is smoothed and gradient-processed. This property can specify Background-color, width, height, and various standard CSS properties. All means that all properties perform transition animation processing.

Transtion-duration: Specifies the duration of the property smoothing gradient.

Transtion-timing-function: Specifies the speed of the gradient. The following values are supported in this section.

Ease: The animation starts slowly, then speeds up, and then slows down when it reaches its maximum speed.

Linear: Linear speed. The speed at which the animation starts is unchanged at the end.

Ease-in: The animation starts at a slower speed and then accelerates.

Ease-out: The animation starts at a very fast speed and then slows down.

Ease-in-out: The animation starts at a slower speed, then speeds up, and then slows down when it reaches its maximum speed.

Cubic-bezier (X1,Y1,X2,Y2): Controls the speed of the animation by Bézier curves. The value of this property can completely replace ease, linear, ease-in, Ease-out, Ease-in-out, and so on.

Transition-delay: Specifies the delay time, which specifies how long the delay will take to begin a smooth gradient.

Example:

-moz-transition:background-color 4s linear;

-webkit-tansition:background-color 4s linear;

-o-transtion:background-color 4s linear;

3. Animation animations provided by CSS3

CSS3 provides powerful tween animation support: Animation animations, which allow developers to define multiple keyframes, and the browser will be responsible for calculating and inserting virtual animation frames between keyframes.

CSS3 provides several properties for animation animations.

Animation-name: Specifies the animation name. This property specifies an existing Keyframe definition.

Animation-duration: Specifies the duration of the animation.

Animation-timing-function: Specifies the speed at which the animation changes.

Animation-delay: Specifies how long the animation is delayed to begin execution.

Animation-iteration-count: Specifies the number of loop executions for the animation. Infinite Cycle Infinite

Animation: This is a composite property. The format of this property is: Animation-name animation-duration animation-timing-function animation-delay Animation-iteration-count, Use this property to specify both Animation-name, Animation-duration, Animation-timing-function, Attributes such as Animation-delay and Animation-iteration-count.

It should be noted that currently only Chrome, Safari browsers support this property, and when using this property, you also need to add the-webkit-prefix before the property.

The attribute value of Animation-name in the above attribute should be a keyframe definition, and this keyframe definition satisfies the following format:

KeyFrames Key frame Name {

from | to | Percentage

Attribute 1: Attribute value 1;

Attribute 2: Attribute value 2;

Attribute 3: Attribute value 3;

...

}

...

}

Above syntax format, from | to | Percentages are used to define the location of keyframes. Where from represents the beginning; to represents the end frame of the animation, and the percentage specifies where the keyframe appears. For example, 10% means keyframes appear at 1/10 times for animations. A keyframe definition can contain multiple keyframes.

Example:

/* Define a keyframe */

@-webkit-keyframes ' Fisheye ' {

/* Define keyframes at the beginning of the animation */

0% {

-webkit-transform:scale (1);

Background-color: #eee;

border-radius:10px;

}

/* Define keyframes for animation at 40% */

40% {

-webkit-transform:scale (1.5);

Background-color: #bbb;

border-radius:10px;

}

/* Define keyframes for animation at 100% */

100% {

-webkit-transform:scale (1);

Background-color: #eee;

border-radius:10px;

}

}

Div>a:hover {

/* Specify to perform fisheye animation */

-webkit-animation-name: ' Fisheye ';

/* Specify the execution time of the animation */

-webkit-animation-duration:3s;

/* Specifies the loop of the animation infinite times */

-webkit-animation-iteration-count:infinite;

}

Html5-css3-javascript (4)