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

Source: Internet
Author: User
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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.