Introduction to the use of transition and animation animated properties in CSS3

This article mainly introduces the transition of CSS3 and animation animation properties using the main points transition and animation can be used to make Basic page picture dynamic effect, of course, further control or need JavaScript help, A friend you need can refer to the following

Transition (excessive)
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 manner, with the following syntax:

Transition:property duration timing-function delay;   /* Property: Performing the Transition's properties duration: Duration of the transition timing-function: rate mode for performing transitions delay: How long the delay executes */

Transition-property
Desirable values:

None
No properties get a transition effect.
All
All properties will have a transition effect.
Property
Defines a list of CSS property names to which the transition effect is applied, separated by commas.

p{   transition-property:width;   -moz-transition-property:width;/* Firefox 4 */-webkit-transition-property:width; /* Safari and Chrome */-o-transition-property:width;    /* Opera */}

Transition-duration
The parameter is time, in S (s) or MS (MS), the default is 0, recall if only the Transform property, is not the transformation snapped.

p{   transition-duration:5s;   -moz-transition-duration:5s; /* Firefox 4 */-webkit-transition-duration:5s; /* Safari and Chrome */-o-transition-duration:5s; /* Opera */}

Transition-timing-function

Since it is animation, then there is the speed of animation, different speeds will produce different results, the following are desirable values.

Ease: (gradually slows down) the default value, the Ease function is equivalent to the Bezier curve (0.25, 0.1, 0.25, 1.0).
Linear: (constant speed), the linear function is equivalent to the Bezier curve (0.0, 0.0, 1.0, 1.0).
Ease-in: (Accelerated), the ease-in function is equivalent to the Bezier curve (0.42, 0, 1.0, 1.0).
Ease-out: (deceleration), the Ease-out function is equivalent to the Bezier curve (0, 0, 0.58, 1.0).
Ease-in-out: (Acceleration and deceleration), ease-in-out function equals Bezier curve (0.42, 0, 0.58, 1.0)

Transition-delay
The parameter is time, s (seconds), or MS (milliseconds), which is 0 by default, which is immediately executed, and it will come in handy if there are multiple animations in order.

Animation (animation)
Key Frame Keyframe
Implements a custom animation, implemented by setting the keyframe, which specifies the animation style on a specific node from the starting point (0%) to the endpoint (100%). It's like waking a person up, opening your Eyes (0%), standing Up (10%), wearing a blouse (40%), wearing pants (80%), finishing your Face (100%), and then stringing each node together is an animation.

Again animation
Animation, the key is to move the word, then for the elements on the page, can change is its style properties, such as the animation rules custom animation, the content of font-size from 18px to 28px, this is the move, plus its own properties (it can specify the duration of animation, Motion form, etc.), you can present a dynamic effect instead of a momentary change.

In general, transition to achieve animation usually need to be triggered by the hover pseudo-class, otherwise, when the page is loaded, it has finished moving, to maintain the end of the movement, this is not what we want. Unlike animation, it has more expressive forms that make it look like it is born, and is inherently moving.

Grammar

. area{        width:50px;        height:50px;        margin-left:100px;        Background:blue;        -webkit-animation-name: ' demo ';/* animated property name, which is the animated name we defined earlier 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:infinite;/* define the loop data, infinite for infinite times */     -webkit-animation-direction:alternate;/* Define Animation mode */  }

Examples and abbreviations
Note that the last attribute, direction, we can think, a from a to B this is an animation, set to normal, the second time when the playback is again from the beginning, it appears very abrupt, this time need to use alternate, To make it appear that a is moving back and forth between A and B, the code is as follows:

/* Land and B These two balls are absolutely positioning method, small ball is also, as long as the control left value can */.circle{   //I have added a ball to this sphere called Demo1 animation   //You see, it moved itself, recall, Use transform when, is not also need to use hover to trigger    -webkit-animation: ' demo1 ' 2s linear infinite alternate;       -o-animation: ' demo1 ' 2s linear infinite alternate;       Animation: ' Demo1 ' 2s linear infinite alternate;   }   Define animation section   //I only write-webkit, real add @-0-,@-moz-, @keyframes   @-webkit-keyframes demo1 {from       {            left:200px;           background-color:lightcoral;        }        50%{            left:290px;            Background-color:lightblue;        }       to {            left:380px;           Background-color:lightseagreen;        }   }

Alternate way, put it down and put it back.

The normal way, is to put out the start again

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!