CSS3 deformation transform, transition, animation learning, css3transition

CSS3 deformation transform, transition, animation learning, css3transition

To learn about CSS3 animation, first learn about deformation transform and transition.
Most of these new attributes are supported in the new version of the browser, and some need to add browser prefixes (-webkit-,-moz-,-ms-,-o-). This article provides simplified content, the original attribute is used directly.
According to the support of different attributes, you need to add corresponding browser prefix support in actual use.

Directory:

 

I. deformation transform

Deformation includes rotate rotation, scale scaling, translate displacement, skew, matrix deformation, and perspective operations.

1. Initial Page Structure

    <style type="text/css">        html {            font-family: Arial;        }        .box {            position: relative;            margin: 200px auto;            width: 100px;            height: 20px;            text-align: center;            border: 1px solid #ddd;            background-color: #75e275;            cursor: pointer;        }        .left,        .right {            position: absolute;            top: -10px;            width: 10px;            height: 40px;            background-color: #4d8aeb;        }        .left {            left: 0;        }        .right {            right: 0;        }        .box:hover {            transform: rotate(-30deg);        }    </style>    

　　<div class="box">        <div class="left"></div>        <div class="right"></div>    </div>

2. deformation operation

1) rotateTransform:Rotate (<angle>); angle values include: angle deg, radian rad, gradient gard, turn/circle, positive value indicates clockwise rotation, and reverse clockwise

.box:hover {    transform: rotate(-30deg);}

If the perspective value is set for the element itself or the element (used to set the viewer's position), The rotate3d () function can implement a rotation in a three-dimensional space.

RotateX (angele), EquivalentRotate3d (1, 0, 0, angle)X-axis rotation in a three-dimensional space

RotateY (angele), EquivalentRotate3d (0, 0, angle)Y axis rotation in a three-dimensional space

RotateZ (angele), EquivalentRotate3d (0, 0, 1, angle)Zaxis rotation in a three-dimensional space

.box:hover {    transform: perspective(300px) rotateY(120deg);}

.box:hover {    transform: rotateY(120deg);}

.box:hover {    transform: rotate3d(1, 0, 0, 45deg);}

2) zoomTransform:Scale (<number> [, <number>]); scale the elements at the same time on the X and Y axes.

<Number> it indicates a scaling multiple, which can be a positive number, a negative number, or a decimal number. A negative number is used to flip the element before scaling. Contains two parameters. If the second parameter is missing, the value of the second parameter is equal to that of the first parameter.

ScaleX (<number> ):It indicates that the element is scaled only on the X axis (horizontal direction.

ScaleY (<number> ):It indicates that only the elements are scaled in the Y axis (vertical direction.

ScaleZ (<number> ):It indicates that only the zooming element is in the Z axis. The premise is that the perspective value is set for the element itself or the parent element of the element.

Similarly, there areScale3d (x, y, z)

.box:hover {    transform: scale(1.5);}

.box:hover {    transform: scale(2, 1);}

.box:hover {    transform: scaleY(1.5);}

3) DisplacementTransform:Translate (<translation-value> [, <translation-value>]); indicates that the elements are moved simultaneously on the X and Y axes.

<Translation-value> indicates the displacement. It contains two parameters. If the second parameter is omitted, the second parameter is 0. If the parameter is negative, it indicates moving in the opposite direction.

TranslateX (<translation-value> );It indicates that the element is moved only on the X axis (horizontal direction.

TranslateY (<translation-value> );It indicates that only the elements are moved in the Y axis (vertical direction.

TranslateZ (<translation-value> );Indicates moving the element only on the Z axis, provided that the perspective value is set for the element itself or its parent element.

Similarly, there areTransform(X, y, z)

.box:hover {    transform: translate(100px);}

.box:hover {    transform: translate(-30px, 50px);}

4) skewTransform:Skew (<angle> [, <angle>]); contains two parameter values, indicating the angle of the x-axis and Y-axis skew respectively. The value type is deg.

If the second parameter is null, the default value is 0. If the parameter is negative, it is skewed to the opposite direction.

SkewX (<angle> );It indicates that it is skewed only on the X axis (horizontal direction ).

SkewY (<angle> );Indicates that only the Y axis (vertical direction) is skewed.

.box:hover {    transform: skewX(30deg);}

.box:hover {    transform: skew(30deg, 30deg);}

5) matrix deformationTransform:Matrix (<number>, <number> );

Matrix () is a matrix function that specifies a 2D transformation in the form of a matrix with six values (a, c, e, B, d, f, it is equivalent to directly applying a [a c e B d f] transformation matrix, where c and e are represented by sine or cosine values.

These six parameters are actually a 3*3 matrix:

.box:hover {    transform: matrix(1, 0, 0, 2, 40, 20);}

Similarly, you can use matrix3d to define 3D conversion. It is a 4x4 matrix that uses 16 values.

 

6) pivotingTransform:Perspective (length); sets the viewer's location, maps the visible content to a cone, and then projects it to a 2D plane.
Perspective can also be directly defined as an attribute.Perspective:<Length>, but it is set that all child elements have a common perspective value.

It is vital for 3D transformation. If perspective is not specified, all points in the Z space will be tiled to the same 2D video plane, and the concept of perspective depth will not be stored in the transformation results. The child element acting on the element.

The following two style definitions have the same results

body {    perspective: 300px;}.box:hover {    transform: rotateY(30deg);}.box:hover {    transform: perspective(300px) rotateY(30deg);}

7) Other transfrom-related attributes

In addition to transform, there are also some attributes related to transformation, which are rarely used and are not understood yet...

• Transform-origin deformation origin -- allows you to change the location of the converted Element
• Transform-style 3D rendering-specifies how nested elements are displayed in 3D space
• Perspective-origin perspective origin-specifies the bottom position of a 3D Element
• Backface-visibility hide the back of the content-define whether the elements are visible when they are not facing the screen

 

7-1) transform-origin

This attribute provides two parameter values. The first is used for abscissa, and the second is used for ordinate. If only one parameter value is provided, the value is used for abscissa, And the ordinate value is 50% by default.

Percentage: Specify the coordinate value by percentage. It can be a negative value.

Length: Specify the coordinate value with the length value. It can be a negative value.

Left center right is a horizontal value, while top center bottom is a vertical value.

.box:hover {    transform-origin: left;    transform: rotate(30deg);}

7-2) transform-style

Sets how embedded elements are rendered in 3D space. There are two values: flat: all child elements are presented on the 2D plane; preserve-3d: retaining 3D space

 

7-3) perspective-origin

This attribute defines 3D elements on the X and Y axes. This attribute allows you to change the bottom position of a 3D element. The perspective-origin attribute during definition. It is a child element of an element, perspective, rather than the element itself.
This attribute must be used with the perspective attribute to only affect 3D conversion elements.

This attribute provides two parameter values. The first is used for abscissa, and the second is used for ordinate. If only one parameter value is provided, the value is used for abscissa, And the ordinate value is 50% by default.

Percentage: Specify the coordinate value by percentage. It can be a negative value.

Length: Specify the coordinate value with the length value. It can be a negative value.

Left and center right are values in the horizontal direction, while top center bottom is values in the vertical direction.

　　

7-4) backface-visibility

This attribute can be used to hide the back of the content. By default, the back is visible, which means that the transformed content is still visible even after the flip. However, when backface-visibility is set to hidden, the content after rotation is hidden because the front of the rotation is no longer visible. Optional values:

Visible: default value. The background is visible when the image is rotated.

Hidden: the background is invisible during rotation.

 

Ii. transition

The transition is a composite attribute that can define both transition-property, transition-duration, transition-timing-function, and transition-delay sub-attribute values.

The page structure is as above. Familiarize yourself with these attributes based on examples.

1. You can set four sub-attribute values at the same time in the integrated transition.

        .box {            position: relative;            margin: 200px auto;            width: 100px;            height: 20px;            text-align: center;            border: 1px solid #ddd;            background-color: #75e275;            cursor: pointer;            transition: 2s background-color;        }            

        .box:hover {            background-color: #0f0;        }    

2. transition-property: all | none | <property> [, <property>]

transition-duration: 2s;transition-property: height,background-color

        .box:hover {            width: 130px;            height: 30px;            background-color: #0f0;        }    

3. transition-duration: Set the animation transition time [execution time]. The default value 0 indicates that the execution result is directly displayed without transition. The Unit is second (s) or millisecond (ms ).

4. transition-delay: Specifies the animation Execution delay Time. The default value 0 indicates immediate execution. The time can be a positive or negative number, and a negative number indicates truncation of the animation within the specified time. The Unit is second (s) or millisecond (ms ).

transition-delay: 1000ms;transition-duration: 2s;transition-property: height,background-color

5. transition-timing-function: sets the animation transition effect. The default value is transition.

Effect: The relief effect is equivalent to the cubic-bezr (0.25, 0.1, 0.25, 1.0) function

Linear: linear effect, equivalent to the cubic-bezr (0.0, 0.0, 1.0, 1.0) function.

Gradient-in: the gradient effect, equivalent to the cubic-bezr (0.42, 0, 1.0, 1.0) function.

Gradient-out: the gradient effect, which is equivalent to the cubic-bezr (0.58, 1.0,) function.

Gradient-in-out: the gradient effect, equivalent to the cubic-bezr (0.42, 0, 0.58, 1.0) function.

Cubic-bezeiser: Special cubic besell Curve Effect

transition-timing-function: linear;transition-delay: 1000ms;transition-duration: 2s;transition-property: height,background-color

 

3. animation

When using an animation, you first define the animation name and behavior through @ (-webkit-) keyframes, and then set the animation feature value through the animation attribute for calling.

        @keyframes test {            from {                width: 100px;                height: 20px;            }            50% {                height: 50px;            }            to {                width: 130px;                height: 30px;                background-color: #0f0;            }        }        .box:hover {            animation: test 2s;        }

The preceding Code sets an animation named test. The animation execution time is 2 s and defines the animation behavior from start (from | 0%) to end (to | 100%, the start from can be omitted, but the end cannot be omitted.

See

1. Integrated with animation, multiple sub-attributes can be defined at the same time

2. the animation name of the animation, which must be consistent with that set in @ keyframes.

3. animation-duration animation execution time <time>: positive number, in seconds or milliseconds (MS ). The default value is 0, indicating that the animation is not executed.

4. The default animation delay time of animation-delay is 0, which indicates immediate execution. A positive number indicates a certain animation delay time, and a negative number indicates the animation is truncated for a certain period of time. Unit: second (s) or millisecond (s)

5. The transition type of the animation-timing-function animation. values include:

Effect: The relief effect is equivalent to the cubic-bezr (0.25, 0.1, 0.25, 1.0) function, which is a cube.

Linear: linear effect, equivalent to the cubic-bezr (0.0, 0.0, 1.0, 1.0) function.

Gradient-in: the gradient effect, equivalent to the cubic-bezr (0.42, 0, 1.0, 1.0) function.

Gradient-out: the gradient effect, which is equivalent to the cubic-bezr (0.58, 1.0,) function.

Gradient-in-out: the gradient effect is equivalent to the cubic-bezr (0.42, 0, 0.58, 1.0) function.

Step-start: Jump to the animation end state immediately.

Step-end: Keep the animation starting State until the animation execution time ends, and immediately jump to the animation end state.

Steps (<number> [, [start | end]?) : The first parameter number is the specified interval, that is, the animation is displayed in n steps. The second parameter defaults to end and sets the status of the last step. start is the status at the end, end is the starting state. If it is set to conflict with the effect of animation-fill-mode, the animation end state is set to the animation end state.

Cubic-bezr (<number >,< number>): Special cubic besell curve effect.

        @keyframes test {            to {                transform: rotate(1turn);            }        }        .box:hover {            animation-name: test;            animation-duration: 2s;            animation-delay: -.5s;            animation-iteration-count: 2;            animation-timing-function: linear;        }

It is worth noting the significance of the number Parameter in steps.

        @keyframes test {            50% {                width: 130px;            }            100% {                width: 160px;            }        }        .box:hover {            animation-name: test;            animation-duration: 1s;            animation-timing-function: steps(5);            animation-fill-mode: forwards;        }

Steps (5) indicates that each interval in an animation is divided into 5 segments, that is, 0-50% is divided into 5 segments, and 50%-100% is divided into 5 segments.

6. animation-iteration-count: <number> | infinite; specifies the number of times the object animation is played cyclically. Infinite is an infinite loop

7. animation-direction specifies the direction of the object animation Movement

Normal: normal direction. Default Value.

Reverse: the animation is run in reverse direction, always opposite to normal. (Not supported under FF14.0.1)

Alternate: the animation will rotate in both positive and negative directions, with an odd number (1, 3, 5 ......) Normal motion, even (2, 4, 6 ......) It will reverse, that is, all associated values will reverse.

Alternate-reverse: the animation starts from the opposite direction, and then changes in the positive and negative directions. The motion direction is always the opposite of that defined by alternate. (Not supported under FF14.0.1)

animation-direction: alternate-reverse;

 

8. animation-fill-mode: Retrieves or sets the State beyond the animation time of an object. The value can be

None: default value. Do not set the status outside the object Animation

Forwards: After the animation ends, the animation ends. However, when the animation-direction is 0, the animation is not executed and the animation starts continuously.

Backwards: returns the status when the animation starts.

Both: The forwards and backwards rules can be followed.

        @keyframes test {            to {                width: 130px;            }        }        .box:hover {            animation-name: test;            animation-duration: 1s;            animation-timing-function: linear;            animation-fill-mode: backwards;        }    

animation-fill-mode: forwards; /* or both */

 

9. animation-play-state: running | paused: Retrieves or sets the state of the object animation. running is the default value.

        @keyframes test {            to {                transform-origin: center center;                transform: rotate(1turn);            }        }        .box {            animation-name: test;            animation-duration: 1s;            animation-timing-function: linear;            animation-fill-mode: forwards;            animation-iteration-count: infinite;        }        .box:hover {            animation-play-state: paused;        }