CSS3 and animation-related properties transform, transition, and animation

CSS3 and animation-related properties have three transform, transition, and animation. Here are one by one notes:       Transform  Literally, the interpretation of transform to change, so that ... Transform: deform; Here we can understand the deformation. How can that all change? None means no transformation; rotate rotation transform:rotate (20deg) The rotation angle can be negative. You need a transform-origin to define the rotation base point for the left top center right bottom or coordinate value (50px 70px). Skew Twist Transform:skew (30deg,30deg) skew (relative x-axis tilt, relative y-axis tilt) scale scaling transform:scale (2,3) scale-up twice times, vertically 3 times times larger. such as equal to write a parameter to enlarge. Translate mobile Transform:translate (50px, 50px), matrix matrix deformation basic Syntax Transform:matrix (A, C, B, D, TX, Ty); where a, C, B, D is a two-dimensional matrix:

   ┌     ┐    │a b│   │c d│   └     ┘

A:x axis Scaling b:y axis tilt c:y axis scale d:x axis tilt

TX, Ty is just repositioning elements based on the x and Y coordinates. In fact, it is translate (tx,ty)



Transition
The transition of CSS3 is described in the "CSS" transition allows the CSS property values to smoothly transition within a certain time interval. This effect can be triggered by clicking on the mouse, getting focus, being clicked, or any change to the element, and animating the CSS property values in a sleek and animated manner.

Transition consists of four attribute values:Transition-property: Performs the transformation's properties;

Transition-duration:     The time the transition lasts:

Transition-timing-function: The    rate change of the transformation during the continuation period;

Transition-delay: Transform delay time

The following one by one illustrates these four properties:

Transition-property

Grammar:

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

Transition-property is used to specify that when one of the attributes of an element is changed, the transition effect is performed, which has the following values: None (no property changes); All (change all properties) This is also its default value ; indent (element attribute name); When its value is none, transition stops execution immediately, and when specified as all, the element will perform a transition effect when any property value changes, and ident can specify a property value 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.

properties that support the execution of the transition effect:

Property

Name	Type
Background-color	As color
Background-position	As repeatable list of simple list of length, percentage, or Calc
Border-bottom-color	As color
Border-bottom-width	As length
Border-left-color	As color
Border-left-width	As length
Border-right-color	As color
Border-right-width	As length
Border-spacing	As simple list of length
Border-top-color	As color
Border-top-width	As length
Bottom	As length, percentage, or Calc
Clip	As Rectangle
Color	As color
Font-size	As length
Font-weight	As font weight
Height	As length, percentage, or Calc
Left	As length, percentage, or Calc
Letter-spacing	As length
Line-height	As either number or length
Margin-bottom	As length
Margin-left	As length
Margin-right	As length
Margin-top	As length
Max-height	As length, percentage, or Calc
Max-width	As length, percentage, or Calc
Min-height	As length, percentage, or Calc
Min-width	As length, percentage, or Calc
Opacity	As number
Outline-color	As color
Outline-width	As length
Padding-bottom	As length
Padding-left	As length
Padding-right	As length
Padding-top	As length
Right	As length, percentage, or Calc
Text-indent	As length, percentage, or Calc
Text-shadow	As Shadow List
Top	As length, percentage, or Calc
Vertical-align	As length
Visibility	As visibility
Width	As length, percentage, or Calc
Word-spacing	As length
Z-index	As Integer

Transition-durationtransition-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. Transition-timing-function

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.

Transition-delay

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:

A {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:

A{transition:all 0.5s Ease-in}

}

Animation

As the name implies the meaning of animation. Animation applies the effect of animating it on the page DOM. Before we begin to introduce animation, we need to understand a special thing, that is, "Keyframes", we call him "key frame", played flash friends may not be unfamiliar with this thing.

An example of an official website:

@-webkit-keyframes ' wobble ' {     0% {        margin-left:100px;        Background:green;     }     40% {        margin-left:150px;        Background:orange;     }     60% {        margin-left:75px;        Background:blue;     }     100% {        margin-left:100px;        background:red;     }  }

Here we define an animation called "Wobble", with the name arbitrarily taken. In several stages 0% 40% 60% 100% to transition.

Once the keyframes is defined, it is possible to invoke the defined animation "wobble".

Let's take a look at how to call an element animation property

  . demo1 {     width:50px;     height:50px;     margin-left:100px;     Background:blue;     -webkit-animation-name: ' wobble ';/* animated property name, which is the animated name defined in front of us keyframes */     -webkit-animation-duration:10s;/* animation Duration */     -webkit-animation-timing-function:ease-in-out;/* animation frequency, and transition-timing-function is the same *     /- webkit-animation-delay:2s;/* Animation Delay Time *     /-webkit-animation-iteration-count:10;/* Define the loop data, infinite for infinite times *     /- webkit-animation-direction:alternate;/* Define Animation Mode */  }

Animation-name:

Animation-name: is used to define the name of an animation as the name in the keyframes, otherwise there will be no animation effect. None is the default, and when the value is none, there is no animation effect. In addition, we have this property as in the previous transition, we can attach a few animation to an element at the same time, we just need to use a comma "," separated.

CSS3 animation are similar to transition properties, and they all change the attribute value of an element over time. Their main difference is that transition needs to trigger an event (hover event or click event) to change its CSS properties over time, and animation can change the property value of the element CSS explicitly over time without triggering any events. So as to achieve an animation effect. So that we can call animation's animated property directly in an element, and based on this, CSS3 's animation needs to have a definite animated property value, which is what we call a keyframes to define CSS property values at different times. Achieve the effect of the element at different time periods.

CSS3 and animation-related properties transform, transition, and animation