Home > Developer > Web Develop
In CSS3, if we use animation, we can animate the text or images on the page to make our pages more vivid and appealing. There are two kinds of animation features that we can use in CSS3, transitions and animations. Let's take a look at the difference between them.
First look at the Transitions feature, which has the following properties:
Transition-property: Specifying properties that require a smooth transition
Transition-duration: Set the time to use for smooth transitions
Transition-timing-function: Set the method used for smooth transitions
Transition-delay: Set the delay time before the smooth transition begins
Defining transitions animations in a line of style code can be written transition:property duration timing-function delay;
The following will achieve a simple effect, the width of a div in the mouse into the 1s after the wide 100px into 200px, the background color from the yellow smooth transition to light blue color, the delay time is 2s, the code listing is as follows:
1 <!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml/DTD/ Xhtml1-transitional.dtd ">2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8"content= "text/html"http-equiv= "Content-type">5 <title></title>6 <styletype= "Text/css">7 8 Div{9 width:100px;Ten Height:100px; One background:#ffff00; A transition:width 1s linear 2s,background-color 1s linear 2s; - } - Div:hover{ the width:200px; - Background-color:#003366; - } - + </style> - </Head> + <Body> A <Div>Example</Div> at </Body> - </HTML>
Next is the animations function, which uses: first we need to create a collection of KeyFrames @keyframes Keyframe collection name {Create Keyframe code (such as 40% {style code in this Keyframe})}, When we create a keyframe, we need to use that Keyframe's collection in the element's style, how do we use it?
Here are the properties we can use:
Animation-name: Specifies the name of the Keyframe collection we use
Animation-duration: Specifies how long it takes to complete an animation
Animation-timing-function: Specifies the method that implements the animation, which can be specified as linear (the animation starts and ends at the same speed), ease-in (first slow and fast), ease-out (fast and slow), ease (slow first and then slow) , Ease-in-out (same as ease)
Animation-delay: Specify how many seconds or milliseconds to delay to start the animation
Animation-iteration-count: Specifies the number of times the animation is executed (can be specified as infinite or unlimited)
Animation-direction: Specifies the direction of execution of the animation, which can be specified as normal (the initial value is returned to the original state after the animation is complete), alternate (the direction in which alternating changes are performed), reverse (in the opposite direction of the animation), Alertnate-reverse (alternating animation in opposite direction)
Defining animations animations in one line of code can be written as Animation:keyframe collection name Duration timing-function delay Iteration-count direction;
Following a simple example, a div completes a smooth transition of four background colors, and the div element rotates 30 degrees clockwise in a key frame with a yellow background color, and the div element rotates 30 degrees counterclockwise in a keyframe with a green background color, and the animation has a delay of 2s. The code listing is as follows:
1 <!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml/DTD/ Xhtml1-transitional.dtd ">2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8"content= "text/html"http-equiv= "Content-type">5 <title></title>6 <styletype= "Text/css">7 8 Div{9 width:100px;Ten Height:300px; One Color: White; A Background-color:Black; - } - @keyframes MyColor{ the 0% { - Background-color:Red; - Transform:Rotate (0deg); - } + 40%{ - Background-color:Yellow; + Transform:Rotate (30deg); A } at 70%{ - Background-color:Blue; - Transform:Rotate ( -30deg); - } - 100%{ - Background-color:Green; in Transform:Rotate (0deg); - } to } + Div:hover{ - Animation:mycolor 5s linear 2s; the } * $ </style>Panax Notoginseng </Head> - <Body> the <Div>Example</Div> + </Body> A </HTML>
From the above example we can draw the difference between the Transitions animation function and the Animations animation function: Although both of them are animated by changing the attribute value of the element, transitions can only be specified by specifying the start and end values of the property. The result is a smooth transition between the two, which makes it impossible to achieve more complex animations, while the animations feature can achieve complex animation effects by defining multiple keyframes and the attribute values of elements in each keyframe.
The difference between animation effect transitions and animations in CSS3
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
