Morphing and transition animations in CSS

New variants have been added to the CSS3 standard, which makes it easier to transform the position shape of elements in a Web page. Its syntax is as follows:

Transform:none |  <transform-function>+

For the attribute value of <transform-function>, thecss specifies 4 types of common transformations

1.translate ()

This value specifies the object's 2D translation(2D translation). The first parameter corresponds to the X-axis, and the second parameter corresponds to the Y -axis. If the second parameter is not provided, the default value is 0 .

Cases:

. exp{width:150px;height:150px;background:red;}. Exp:hover{transform:translate (100px,100px);}

When the mouse moves over the element, the position of the element changes (shifted 100px to pan left , and the 100pxis shifted downward).

Of course, you can also refer to the development of a direction of translation, such as TranslateX(),translatey(), at this time, the value in parentheses only one, indicating the length of the translation.

2.rotate()

This value specifies the 2d rotation of the object, with the number of degrees of rotation in parentheses, in deg. It is important to note that when you use this property value, you first set the element's center point, which is transform-origin, which can be aunit of length or a percentage.

Cases:

. exp{width:150px;height:150px;background:red;}. exp:hover{transform-origin:0 50%;transform:rotate (45deg);}

　　

In 2d rotation, the default direction of rotation is clockwise, and the center of rotation is The position set by Transform-origin. At the same time, we can also define how it rotates in the direction of the axis of rotation, such as Rotatex(),rotatey().

3.Scale()

This property represents the scaling of the element, with two values in parentheses in the 2d transformation, representing the scale of the x - axis and y - axis direction, with a value of one number, Represents the scale factor with the original size.

Cases:

. exp{width:150px;height:150px;background:red;
}.exp:active{transform-origin:0 50%;transform:scale (2,1.5);}

　　

Similar to the above property values, we can set the zoom in a single direction,ScaleX(),ScaleY ().

4.Skew()

The value of the property represents the skew of the element, which is worth two arguments representing the skew on the X -axis and the Y -axis, and the values are represented by an angle (deg).

Cases:

. Exp{width:150px;height:150px;background:red;transform:skew (25deg,0);}

　　

In the tilt, the position of the last resulting element is related to transform-origin .

The four properties above apply not only to2dscene, but also for3dscene, you only need to overwrite it asTranslate3d(),Rotate3d (),skew3d (),Scale3d (). In this case, the coordinate system hasXYZthree axes, whereXThe axis is horizontal, the positive direction is right,YThe axis is in the vertical direction, in the positive direction downward,ZThe axis is the direction of the vertical screen, and the vertical screen outward (that is, the one pointing to the front of the screen) is the positive direction.

After understanding the transformations in CSS, we can design transition animations from this. The transition animation here refers to the animated effect that occurs when certain attributes of an element are changed through CSS. Creating a simple transition effect in CSS can be accomplished in the following few steps:

First, declare the initial state style of the element in the default style;

Second, declare the final state style of the transition element, such as the suspended state;

Third, add a few different styles in the default style by adding a transition function.

1. Transition-property ( transition Properties ):

A property that represents an animated effect in an animation, where the transition property can set any property to a value, and we can also set its value to all directly, indicating that each property that has a change produces an animated effect.

1. Transition-duration ( time required for the transition ):

This property is primarily used to set the time it takes for a property to transition to another property, that is, the length of time it takes to transition from the old property to the new property, commonly known as duration. Unit is s.

Cases

. Exp{width:150px;height:150px;background:red;transition-property:width;transition-duration:1s;}. exp:hover{width:300px;}

When the mouse moves over the box, the box is stretched slowly.

3. Transition-timing-function ( animation - transition function ):

This property represents the performance of the animation when the animation occurs. The values are:

Ease: default value, gradually slow (Cubic-bezier (0.25,0.1,0.25,1))

Linear: Uniform transition effect ( equals cubic-bezier (0,0,1,1))

Ease-in: accelerated Transition effect ( equals cubic-bezier (0.42,0,1,1))

Ease-out: transition effect of deceleration ( equals cubic-bezier (0,0,0.58,1))

Ease-in-out: accelerates and slows down ( equals cubic-bezier (0.42, 0, 0.58, 1.0))

Cubic-bezier (n,n,n,n): defines its own value in the Cubic-bezier function. The possible values are numbers between 0 and 1. ( animation speed customization )

4.transition-delay ( animation - transition delay Time ):

Transition-delay is used primarily to specify the time at which an animation starts executing, that is, how long it takes to start executing after changing the attribute value of the element.

Cases:

. exp{width:150px;height:150px;background:red;transition-property:width;transition-duration:1s;transition-delay : 1s;}. exp:hover{width:300px;}

When the mouse moves over the box, the width of the box changes to 300px, and then a second later, creating an animated effect.

When you connect more than one of these attributes, you can write:

Transition:[None | <transition-property>] | | < transition-duration > | | < transition-timing-function> | | < transition-delay> [, *]

Cases:

　　

Morphing and transition animations in CSS