CSS3 Transition Principle (Animation Series II)

CSS3 Transition effect (CSS3 transition)

One

A CSS Transition (transition) is a motion tween mechanism that defines the element's smooth transition or change within a certain time interval by defining the state of the elements from the state of the starting point and the end point. You can make the property change process last for a while instead of taking effect immediately.

By transition you can decide which attribute will animate (by explicitly listing these properties), when to start the animation (by setting the delay), how long the animation lasts (by setting duration), and how to animate (by defining the timing function, such as linear or start fast end slow).

How to define transition (transitions)

Transition also contains four child properties, namely: Transition-property, the transformation of the continuation of the time: Transition-duration, in the continuation period, transition-timing-function, Rate change of Transformation Transition-delay: Transformation delay time

Two

The transition effect of a CSS3 allows an element to be converted from one effect to another.
To do this, you have to specify two things: Specify the duration of the effect that the CSS property you want to add the effect to.

An example is provided:

    Div
    {
    width 2s;
    width 2s; * Firefox 4/
    width 2s;/* Safari and Chrome
    /width 2s;/* Opera/
    }

Note: If the animation delay time is not specified, the transition will have no effect because the default value is 0.

When the mouse is put on, the transformation begins:

    Div:hover
    {
    width: 300px;
    }

Three

How to perform animation effects. (where animation effects are defined.) ）

CSS3 animation is generally defined by mouse events or mouse state animation, usually we can use the pseudo class in CSS, use JS to modify the style attributes of elements or append delete style to perform the definition of animation. Usually we can use the CSS in the Pseudo class and JS in the mouse events to define, CSS in the Pseudo class animation includes:

Dynamic Pseudo class	Elements that work	Describe
: Link	Only links	Links that are not visited
: Visited	Only links	Links that have been visited
: hover	All elements	Mouse over Element
: Active	All elements	Mouse click Element
: Focus	All elements that can be selected	Element is selected

The example above is using the pseudo class in CSS to perform animations. Use JS to modify the element's style attributes or append the delete style to perform the animation: Generally, mouse event operation and timed operation (Window.settimeout (), Window.setinterval ());

Also note that when an element uses a transition (transition), it is immediately used. appendchild () to add it to the DOM or delete its display:none;. This is considered that if the initial state never existed then the element was always in its final state. The easiest way to overcome this limitation is to use a window.settimeout () with a very small number of millimeters.

JS events can also, such as click,focus,mousemove,mouseover,mouseout and so on
Four, basic Syntax for transition:

CSS3 animations are implemented by transition attributes and other CSS attributes (color, width, distortion, position, and so on).

1, Transition-property (transition properties)

You can specify which attributes of an element change to perform a transition (transition), which triggers the properties of the browser reflow or repaint those CSS properties can be applied to animations, see: https://developer.mozilla.org/zh-CN/ Docs/css/css_animated_properties all CSS Properties listed here, if you can do animation, then explain how to set. All can be specified, and the Transition (transition) effect is performed when any of the elements of a transitive (transition) property value changes. When you can specify none, the animation stops immediately. The initial default value is all

Some properties can be transformed.

transition-property: The attributes to be changed, such as the width of the elements is width, the color of the text to change this is a list of convertible attributes that the consortium has given:

CSS Properties	The object of the change
Background-color	Color
Background-image	Just a gradient.
Background-position	Percentage, length
Border-bottom-color	Color
Border-bottom-width	Length
Border-color	Color
Border-left-color	Color
Border-left-width	Length
Border-right-color	Color
Border-right-width	Length
Border-spacing	Length
Border-top-color	Color
Border-top-width	Length
Border-width	Length
Bottom	Percentage, length
Color	Color
Crop	Percentage
Font-size	Percentage, length
Font-weight	Digital
grid-*	Number
Height	Percentage, length
Left	Percentage, length
Letter-spacing	Length
Line-height	Percentage, length, number
Margin-bottom	Length
Margin-left	Length
Margin-right	Length
Margin-top	Length
Max-height	Percentage, length
Max-width	Percentage, length
Min-height	Percentage, length
Min-width	Percentage, length
Opacity	Digital
Outline-color	Color
Outline-offset	Integer
Outline-width	Length
Padding-bottom	Length
Padding-left	Length
Padding-right	Length
Padding-top	Length
Right	Percentage, length
Text-indent	Percentage, length
Text-shadow	Shadow
Top	Percentage, length
Vertical-align	Percent, length, keywords
Visibility	Visibility of
Width	Percentage, length
Word-spacing	Percentage, length
Z-index	Positive integer
Zoom	Digital

Almost all CSS properties with components such as color, size, or position, including many newly added CSS3 properties, can be applied to transformations. One notable exception is Box-shadow, but some browsers have added support for Box-shadow.

The value also has a powerful "all" value, representing all the attributes on the table;

In addition to the above attributes, of course, there are CSS3 in the CSS3 deformation, such as zooming in and out, rotating oblique cut, gradient and so on.

2, transition-duration (transition duration)

transition-duration:<time> [, <time>]*