CSS3 transition Transition

The Transition property is a shorthand property for setting four transition properties:

 Property Duration timing-function delay;

• Transition-property
• Transition-duration
• Transition-timing-function
• Transition-delay

value	Description
Transition-property	Specifies the name of the CSS property that sets the transition effect.
Transition-duration	Specifies how many seconds or milliseconds to complete the transition effect.
Transition-timing-function	Speed curve that specifies the speed effect.
Transition-delay	Defines when the transition effect starts.

Transition-property is used to specify that when one of the attributes of an element is changed, the transition effect is performed, which mainly has the following values:

None (no attribute changes);

All (change all attributes) This is also its default value;

Indent (element attribute name);

When the value is none, transition stops execution immediately, and when specified as all, the element will perform a transition effect when any property value changes occur, ident is a property value that can be specified for the element.

The corresponding types are as follows:

1, color: Through the red, green, blue and Transparency component transformation (each value is processed separately), such as: Background-color,border-color,color,outline-color CSS properties;

2, Length: real numbers, such as: Word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin, Min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing, Background-position and other attributes;

3, percentage: real numbers, such as: Word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width, Max-height,line-height,height,background-position and other attributes;

4, Integer discrete steps (the entire number), in the real digital space, and the use of floor () to convert to an integer, such as: Outline-offset,z-index properties;

5, Number True (floating point type) value, such as: Zoom,opacity,font-weight and other properties;

6. Transform list: For more information, please refer to: "CSS3 transform".

7, Rectangle: by x, y, Width and height (converted to numerical) transformation, such as: crop;

8, Visibility: discrete step, within the range of 0 to 1 digits, 0 means "hidden", 1 means full "display", such as: visibility;

9, Shadow: Action on color, x, Y, and blur (fuzzy) attributes, such as: Text-shadow;

10. Gradient: Change the position and color of each stop. They must have the same type (radial or linear) and the same stop value in order to perform the animation, such as: background-image;

11. Paint Server (SVG): supports only the following: from gradient to gradient and from color to color, and then works like above;

12. space-separated List of above: If the list has the same item value, each item in the list changes according to the above rules, otherwise there is no change;

13, a shorthand property: If all parts of the abbreviation can be animated, it will change as if all the individual attributes change.

One thing to be reminded here is that not all attribute changes are triggered by the transition action effect, such as the adaptive width of the page, which does not trigger the transition effect when the browser changes width. However, the change in the property type shown in the table above will trigger a transition action effect.

Second, Transition-duration:

Transition-duration is used to specify the duration of the element conversion process, the value:<time> is the number, in S (seconds), can be used for all elements, including: Before and: after pseudo-elements. The default value is 0, which means that the transformation is instantaneous.

Third, Transition-timing-function:

123	Transition-timing-function:ease | Linear | ease-in | Ease-out | Ease-in-out |cubic-bezier (<number>, <number>, <number>, <number>) [, ease | linear | ease-in |eas E-out | Ease-in-out | Cubic-bezier (<NUMBER>, <number>, <number>, <number>)]*

Value:

The value of transition-timing-function allows you to change the conversion rate of a property value based on the time of the push, Transition-timing-function has 6 possible values:

1. Ease: (gradually slows down) the default value, ease function is equivalent to Bezier curve (0.25, 0.1, 0.25, 1.0);

2, Linear: (constant speed), the linear function is equivalent to the Bezier curve (0.0, 0.0, 1.0, 1.0);

3, Ease-in: (acceleration), the Ease-in function is equivalent to the Bezier curve (0.42, 0, 1.0, 1.0);

4, Ease-out: (deceleration), the Ease-out function is equivalent to the Bezier curve (0, 0, 0.58, 1.0);

5, Ease-in-out: (Acceleration and deceleration), the Ease-in-out function is equivalent to the Bezier curve (0.42, 0, 0.58, 1.0);

6, Cubic-bezier: (this value allows you to customize a time curve), a specific cubic-bezier curve. (x1, y1, x2, y2) four values are specific to point P1 and Point P2 on a curve. All values must be in the [0, 1] area, otherwise invalid.

It is cubic-bezier to calculate the value of the attribute in the "transform" process through the Bezier curve, as shown in the following curve, by altering the coordinates of the P1 (x1, y1) and P2 (x2, y2) to change the output Percentage of the entire process. The initial default value is defaults.

A few other properties:

Four, Transition-delay:

1	Transition-duration: <time> [, <time>]*transition-delay: <time> [, <time>]*

Transition-delay is used to specify the time at which an animation starts executing, that is, how long it takes to start the transition effect after changing the attribute value of the element, and the value:<time> is the number, in S (seconds), Its use is extremely similar to transition-duration and can be used for all elements, including: Before and: after pseudo-elements. The default size is "0″, that is, the transform is executed immediately, with no delay."

Sometimes we not only change the properties of a CSS effect, but want to change the transition effect of two or more CSS properties, then we just string together a few transition declarations, separated by commas (","), Then each can have their own different duration and the rate of their time transformation. But it should be noted that the values of both Transition-delay and transition-duration are time, so to differentiate their position in ligatures, the General browser will decide according to the order of precedence, the first 怭 value that can be resolved to a time is Transition-duration the second one is Transition-delay. Such as:

123456

A {-moz-transition:background 0.5s ease-in,color 0.3s ease-out;-webkit-transition:background 0.5s ease-in,color 0.3s ea Se-out;-o-transition:background 0.5s ease-in,color 0.3s ease-out;transition:background 0.5s ease-in,color 0.3s Ease-out; }}

If you want to perform all the properties of the transition effect on the element, then we can also use the all property value to operate, at which time they share the same duration and rate transformation, such as:

123456

A {-moz-transition:all 0.5s ease-in;-webkit-transition:all 0.5s ease-in;-o-transition:all 0.5s Ease-in;transition:all 0.5s ease-in;}

To synthesize the above we can give transition a shorthand method: Transition: <property> <duration> <animation type> <delay> as shown:

A sample code that corresponds to:

123456

p {-webkit-transition:all. 5s ease-in-out 1s;-o-transition:all. 5s ease-in-out 1s;-moz-transition:all. 5s Ease-in-out 1 s;transition:all. 5s ease-in-out 1s;}

First, change the Width property
Div. css3-transition-test1 {transition: width 1s ease-in;   -moz-transition: width 1s ease-in; /* Firefox 4 *  /-webkit-transition: width 1s ease-in; /* Safari and Chrome *  /-o-transition: width 1s ease-in; / * Opera */ }
Second, changing multiple attributes
  

P. css3-transition-test2{  -webkit-transition:-webkit-transform1s, opacity1s, background1s, width1s, height1s, font-size1s; -moz-transition-property:width, height,-o-transform, background, font-size, opacity; -moz-transition-duration: 1s,1s,1s,1s,1s,1s; -o-transition-property:width, height,-o-transform, background, font-size, opacity; -o-transition-duration: 1s,1s,1s,1s,1s,1s; Transition-property:width, height, transform, background, font-size, opacity; Transition-duration: 1s,1s,1s,1s,1s,1s;}p.css3-transition-test2:hover {< Span class= "indent" > -webkit-transform: rotate (360deg); -moz-transform: rotate ( Span class= "number" >360deg);  -o-transform: rotate (360deg); transform: rotate (360deg);  
 
 
             /span>                

Loading JavaScript files

<script src=‘jquery.transit.js‘></script>

Conversion properties

In addition to the attributes that JQuery originally supported, some properties are supported (the use .css method does not animate, just changes the value directly)

$("#box"). CSS ({x:' 30px '});Move Right $ ("#box"). css ({y:' 60px '});Move Down $ ("#box"). CSS ({translate: [60,30]});Move right down $ ("#box"). CSS ({rotate:' 30deg '});Rotate Clockwise $ ("#box"). CSS ({scale:2});Enlarge twice times (200%) $ ("#box"). CSS ({scale: [2, 1.5]}); //width and height different magnification $ ("#box"). CSS ({skewx: ' 30deg '}); //Horizontal chamfered $ ("#box"). CSS ({skewy: ' 30deg '}); //Vertical Skew $ ("#box"). CSS ({perspective: + , Rotatex: 30}); //Webkit 3d rotation $ ("#box"). CSS ({rotatey: $); $ ("#box"). CSS ({rotate3d: [1, 1, 0, ]});                   

Supports relative values

$("#box").css({ rotate: ‘+=30‘ });        // 增加30度$("#box").css({ rotate: ‘-=30‘ }); // 减少30度

Units can be omitted

$("#box").css({ x: ‘30px‘ });$("#box").css({ x: 30 });

Multiple values, they can be arrays or separated by commas

$("#box").css({ translate: [60,30] });$("#box").css({ translate: [‘60px‘,‘30px‘] });$("#box").css({ translate: ‘60px,30px‘ });

Supports getting property values (returns an array if the attribute has multiple values)

$("#box").css(‘rotate‘);     //=> "30deg"$("#box").css(‘translate‘); //=> [‘60px‘, ‘30px‘]

Animation Effect-$.fn.transition

$(‘...‘).transition(options, [duration], [easing], [complete])

You can use it $.fn.transition() to animate the CSS3. He was $.fn.animate() the same as the effect, except that he used the CSS3 transition.

$("#box"). Transition ({opacity:0.1, Scale:0.3}); $ ("#box"). Transition ({opacity:0.1, Scale:0.3},500);Animation Duration $ ("#box"). Transition ({opacity:0.1, Scale:0.3},' Swing ');Easing effect $ ( "#box"). Transition ({opacity: 0.1, Scale: 0.3}, 500,  ' linear '); //animation duration + easing effect $ (" #box "). Transition ({opacity: 0.1 , scale: 0.3}, function (//callback function $ ( "#box"). Transition ({opacity: 0.1, scale: 0.3}, 500,  ' linear ', function ( //any             

You can also configure all options in the parameters

$("#box").transition({  opacity: 0.1, scale: 0.3,  duration: 500,  easing: ‘linear‘, complete: function(){}});

CSS3 transition Transition