Css3 making deformation and animation effects _ form Effects

Below through the way to show you the next CSS3 production deformation and animation effect

CSS3 makes several properties of animation: Warp (Transform), Transition (transition), and animation (animation).

The following description: Transition transition.

One, examples

First, through an example of the transition animation effect.

Mouse up, div width from 100px to 200px.

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

This effect is actually animation, but very change very fast, not smooth.

If you want to put the mouse up after the div width in 5s smooth transition to 200px. Only need to add one line of code;

Copy Code code as follows:

div:hover{
width:200px;
Transition:width 5s ease-in;}

This effect is actually animation, but very change very fast, not smooth.

If you want to put the mouse up after the div width in 5s smooth transition to 200px. Only need to add one line of code;

Copy Code code as follows:

div:hover{
width:200px;
Transition:width 5s ease-in;}

Here is the transition attribute, which is used to achieve a smooth transition of property values, visually produce animation effects.

The transition used above is abbreviated and contains four attributes: Transition-property,transition-duration,transition-timing-function,transition-delay, The following will be introduced.

Second, transition

CSS3 new Transition property can make the effect more delicate and smooth when the style of the event-triggering element changes.

Transition is used to describe how to make CSS property values smooth from one value to another over time. This transition effect can be triggered by clicking on the mouse , getting focus , being clicked , or any change to the element .

Grammar:

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

Transition has four property values:

Transition-property: The property that performs the transition.

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

Transition-timing-function, in the continuation time period, the transition transformation rate change, the simple understanding is specifies the transition function.

Transition-delay: Transition delay time.

1, Transition-property

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

Grammar:

Copy Code code as follows:

Transition-property:none | All | [<IDENT>] [', ' <IDENT>]*

None: No transition effects are applied to all properties.

All: Default value. When the value is all, the element will perform a transition effect when any property values change.

Ident: element attribute name. Specify which properties are specified by ident. If a property in the specified attribute cannot apply a transition effect, other properties are still in effect.

A transition property can have a transition effect only if it has an attribute with a midpoint value (the attributes that require animation). All of the CSS property values and the types of values that can implement transition effects are listed in the Consortium

Property Name Typebackground-color as colorbackground-position as repeatable list of simple list of length, Percentag E, or Calcborder-bottom-color as colorborder-bottom-width as lengthborder-left-color as colorborder-left-width as Leng Thborder-right-color as colorborder-right-width as lengthborder-spacing as simple list of Lengthborder-top-color as Co Lorborder-top-width as lengthbottom as length, percentage, or Calcclip as rectanglecolor as colorfont-size as LENGTHF Ont-weight as font weightheight as length, percentage, or calcleft as length, percentage, or calcletter-spacing as Le Ngthline-height as either number or Lengthmargin-bottom as lengthmargin-left as lengthmargin-right as Lengthmargin-to P as lengthmax-height as length, percentage, or calcmax-width as length, percentage, or calcmin-height as length, PE Rcentage, or Calcmin-width as length, percentage, or calcopacity as numberoutline-color as coloroutline-width as Lengt Hpadding-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 Lengthvis Ibility as visibilitywidth as length, percentage, or calcword-spacing as lengthz-index as Integer

Note: Not what attribute changes will trigger Transiton animation effects, such as the adaptive width of the page, when the browser changes the width, does not trigger the transition effect. However, the property type changes shown in the above table will trigger a transition action effect.

For example: You can animate several properties at the same time, for example, to the height and line-height animation effect, the implementation of div variable height text is still vertically centered.

<! DOCTYPE html> 
 

2, Transition-duration

Transition-duration is used to set the time that is required to transition from the old property to the new property, that is, the duration.

3, Transition-timing-function

Grammar:

Copy Code code as follows:

<single-transition-timing-function> = Ease | Linear | ease-in | Ease-out | Ease-in-out | Step-start | Step-end | Steps (<integer>[, [start | end]]?) | Cubic-bezier (<NUMBER>, <number>, <number> <number>)

The transition-timing-function property refers to the transition "easing function". This function creates an acceleration curve, so the speed of change can change continuously during the whole transition change. Mainly includes the following functions.

Ease: Default value, element style transitions from initial state to end state speed from fast to slow, slowly. Linear: Meaning is a linear transition, that is, the transition process at constant speed. Ease-in: Faster and faster, with an accelerated state, often referred to as the "fade effect." Ease-out: The speed is more and more slow, showing deceleration state, often known as the "Fade effect." Ease-in-out speed first accelerated after deceleration, known as the "Fade Fade effect."

Example: The mouse passes the question mark, helps the information fade fade.

<!doctype html> 

4, Transition-delay

Transition-delay sets how long the animation starts when the property value is changed.

5. Attribute Shorthand

When changing the transition effect of multiple CSS properties, separate several transition declarations with commas, and each attribute has its own transition time and effect.

Note: The first time is the length, the second is the delay.

Copy Code code as follows:

a{
Transition:background 0.8s ease-in 0.3,
Color 0.6s ease-out 0.3;}

Iii. Bezier Curves and transition

The mathematical model of transition is the Bezier curve, described below.

The curve is actually the interpolation effect between two points, Bezier curve is an interpolation algorithm, more complex than linear interpolation.

Bezier curves: Start point, endpoint (also called Anchor Point), control point. The shape of the Bezier curve changes by adjusting the control point.

The K-order Bezier interpolation algorithm needs to k+1 a control point.

First Order Bezier curve (line segment): Meaning is a continuous point from P0 to P1 to describe a segment. One Bezier interpolation is linear interpolation.

Hill Bessel Curve (parabola): P0-P1 is the tangent of the curve at the P0 point.

Sanche Besel Curve:

Transition use is the Sanche Besel interpolation algorithm, the following figure.

Time is in the 0,1 range, and the property to be transformed is considered to be 0,1 interval. The coordinates of P0 and P3 are always (0,0) and (1,1). The Transition-timing-function property is used to determine the coordinates of the 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]

Iv. other relevant information

Canvas Bezier Curve

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

I hope that this content can help everyone, thank you.