Css3: make deformation and animation effects, and css3 deformation Animation

Css3: make deformation and animation effects, and css3 deformation Animation

The following illustration shows how css3 is deformed and animated.

Several attributes of an animation produced by css3: transform, transition, and animation ).

The following describes the transition.

I. Example

First, let's look at the animation effect of transition through an example.

Move the cursor up and the div width increases from Px to PX.

<style type="text/css"> div{  width: 100px; height: 100px;  background-color: red; } div:hover{ width: 200px; }</style><div></div>

This effect is actually an animation, but it is very fast and not smooth.

If you want to smoothly transition the div width to 200px within 5 seconds after moving the mouse up. You only need to add a line of code;

Copy codeThe Code is as follows:
Div: hover {
Width: 200px;
Transition: width 5S contains-in ;}

This effect is actually an animation, but it is very fast and not smooth.

If you want to smoothly transition the div width to 200px within 5 seconds after moving the mouse up. You only need to add a line of code;

Copy codeThe Code is as follows:
Div: hover {
Width: 200px;
Transition: width 5S contains-in ;}

The transition attribute is used to achieve smooth transition of attribute values and visually produce animated effects.

The preceding transition is short for four attributes: transition-property, transition-duration, transition-timing-function, and transition-delay.

Ii. transition

Css3 adds the transition attribute to make the effect more delicate and smooth when the style of the event-triggered element changes.

Transition is used to describe how to smoothly transition css property values from one value to another over a period of time. This transition effect can be found inClick,Focus,ClickedOrAny element changes.

Syntax:

transition ：[<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> ||<'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

Transition has four attribute values:

Transition-property: the property of the execution transition.

Transition-duration: specifies the time required to complete the transition.

Transition-timing-function: Specifies the rate change of the transition during the duration.

Transition-delay: The time of the transition delay.

1. transition-property

Transition-property is used to specify which attribute uses the transition animation effect.

Syntax:

Copy codeThe Code is as follows:
Transition-property: none | all | [<IDENT>] [',' <IDENT>] *

None: no transition effect is applied to all attributes.

All: Default value. When the value is all, the element will execute the transition effect when any attribute value changes.

Ident: the attribute name of the element. Use ident to specify specific attributes. If the transition effect cannot be applied to one of the specified attributes, other attributes still take effect.

Only one transition property is availableProperties of the midpoint Value(Animated attributes must be generated) in order to have a transitional effect. Lists All css attribute values and value types that can achieve the transition effect in w3c.

Property Name  Typebackground-color as colorbackground-position as repeatable list of simple list of length, percentage, or calcborder-bottom-color as colorborder-bottom-width as lengthborder-left-color as colorborder-left-width as lengthborder-right-color as colorborder-right-width as lengthborder-spacing as simple list of lengthborder-top-color as colorborder-top-width as lengthbottom as length, percentage, or calcclip as rectanglecolor as colorfont-size as lengthfont-weight as font weightheight  as length, percentage, or calcleft as length, percentage, or calcletter-spacing as lengthline-height  as either number or lengthmargin-bottom as lengthmargin-left as lengthmargin-right as lengthmargin-top  as lengthmax-height  as length, percentage, or calcmax-width as length, percentage, or calcmin-height as length, percentage, or calcmin-width as length, percentage, or calcopacity as numberoutline-color as coloroutline-width as lengthpadding-bottom as lengthpadding-left as lengthpadding-right as lengthpadding-top as lengthright  as length, percentage, or calctext-indent as length, percentage, or calctext-shadow as shadow listtop  as length, percentage, or calcvertical-align  as lengthvisibility  as visibilitywidth as length, percentage, or calcword-spacing as lengthz-index as integer

Note: Not all attribute changes will trigger the transiton animation effect. For example, the adaptive width of the page. When the browser changes the width, the transition effect will not be triggered. However, the attribute type change shown in the preceding table triggers a transition action.

For example, you can set the animation effect for several attributes at the same time. For example, you can set the animation effect for height and line-height at the same time to achieve vertical center of text with div height.

<! DOCTYPE html> 

2. transition-duration
Transition-duration is used to set the time required to transition from the old property to the new property, that is, the duration.
3. transition-timing-function
Syntax:
Copy codeThe Code is as follows:
<Single-transition-timing-function> = Response | linear | response-in | response-out | response-in-out | step-start | step-end | steps (<integer> [, [start | end]?) | Cubic-bezr (<number >,< number>)

Transition-timing-functionAttribute refers to the transitional "easing function ". Through this function, an acceleration curve is established, so the change speed can be constantly changed throughout the transition change process. It mainly includes the following functions.
Bytes: Default value. The transition speed of the element style from the initial state to the end state is fast and slow. Linear: linear transition, that is, the constant speed of the transition process. Slow-in: the speed is getting faster and faster, and the acceleration status is displayed. It is usually called "gradient effect ". Slow-out: the speed is getting slower and slower, which is usually called "fading effect ". The slow-in-out speed is accelerated first and then slowed down, which is called "Fade-in effect ".
For example, the cursor goes through the question mark to gradually hide the help information.
<! Doctype html> 

4. transition-delay
Transition-delay: Specifies how long the animation starts to be executed after the attribute value is changed.
5. Attribute abbreviation
When changing the transition effect of multiple css attributes, separate several transition statements with commas, and each attribute has its own transition time and effect.
Note: The first time is the duration, and the second time is the latency.
Copy codeThe Code is as follows:
A {
Transition: background 0.8 s transition-in 0.3,
Color 0.6 s outgoing-out 0.3 ;}


Iii. bessercurve and transition
The mathematical model of transition is the besell curve, which is described below.
The curve is actually the result of interpolation between two points. The besell curve is an interpolation algorithm, which is a little more complex than linear interpolation.
Besell curve: the starting point, ending point (also called the anchor), and control point. By adjusting the control point, the shape of the besell curve changes.
The k-order besell interpolation algorithm requires k + 1 Control Point.
First-order besell curve (Line Segment): a continuous point from P0 to P1, used to describe a line segment. A one-time besell interpolation is a linear interpolation.

 
Second-order besell curve (parabolic): The P0-P1 is the tangent of the curve at P0.


Third-order besell curve:


Transition uses the third-order besell interpolation algorithm, for example.
The time is in the range 0, 1, and the property to be transformed is also considered as the range 0, 1. The coordinates of P0 and P3 are (0, 0) and (1, 1 ). The transition-timing-function attribute is used to determine the coordinates of P1 and P2.

 
ease [0, 0] [0.25, 0.1] [0.25, 1.0] [1.0,1.0]linear [0, 0] [0.0, 0.0] [1.0, 1.0] [1.0,1.0]ease-in [0, 0] [0.42, 0] [1.0, 1.0] [1.0,1.0]ease-out [0, 0] [0, 0] [0.58, 1.0] [1.0,1.0]ease-in-out [0, 0] [0.42, 0] [0.58, 1.0] [1.0,1.0]step-start steps(1,start)step-end steps(1,end)cubic-bezier(x1,y1,x2,y2) [0, 0] [x1, y1] [x2, y2] [1.0,1.0]
4. Other Related Materials
Draw the besell curve on canvas
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
I hope this content will help you. Thank you.