Css3 deformation and animation effect-form special effects-js tutorial

This article mainly introduces the deformation and animation effects produced by Css3. CSS 3 mainly uses three attributes: transform, transition, and animation, if you need it, you can refer to the following illustration to show you the deformation and animation effects of css3.

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 mouse up, and increase the p width from Px to PX.

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

If you want to smoothly transition the p width to 200px within 5s after placing the mouse. You only need to add a line of code;

The Code is as follows:

P: 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 p width to 200px within 5s after placing the mouse. You only need to add a line of code;

The Code is as follows:

P: 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:

The Code is as follows:

Transition-property: none | all | [ ] [',' ] *

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 the vertical center of p-height text.

 
  Deformation and animation  
Vertical text Center

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:

The Code is as follows:

= Bytes | linear | bytes-in | bytes-out | bytes-in-out | step-start | step-end | steps ( [, [Start | end]?) | Cubic-bezr ( , , , )

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.

 
  Transition-demo by starof   
?
Help Information
 

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.

The 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

 Bezr demo

  
   
Your browser does not support canvas.