Home > Developer > Web Develop
1. Syntax:
1 Property Duration timing-function delay; 2 Property Duration timing-function delay; 3 Property Duration timing-function delay; 4 Property Duration timing-function delay;
are syntactically compatible with each browser.
2, transition contains four parts of the set, each part is set as follows:
A) Property: Specifies the name of the CSS attribute that sets the transition effect, with the following optional values:
| None | No properties get a transition effect. |
| All | The default value all properties will have a transition effect. |
| Property | Defines a list of CSS property names that apply a transition effect, separated by commas, for example: Width,height |
For example: transition:width 3s; only the width of the animation transition effect, other properties do not produce effect.
b) Duration: Specifies how many seconds or milliseconds are required to complete the transition effect, such as: Transition:all 3s; Represents 3 seconds to complete the transition effect.
c) Timing-function: Speed curve with specified speed effect, optional values are as follows:
| Linear | Specifies the transition effect (equal to Cubic-bezier (0,0,1,1)) that starts at the same speed to the end. |
| Ease | A transition effect (Cubic-bezier (0.25,0.1,0.25,1)) that specifies a slow start and then a slow end. |
| Ease-in | Specifies a transition effect that starts at a slow speed (equals Cubic-bezier (0.42,0,1,1)). |
| Ease-out | Specifies a transition effect that ends at a slow speed (equals Cubic-bezier (0,0,0.58,1)). |
| Ease-in-out | Specifies a transition effect (equal to Cubic-bezier (0.42,0,0.58,1)) that starts and ends at a slow speed. |
| Cubic-bezier (N,n,n,n) | Define your own values in the Cubic-bezier function. The possible values are numbers between 0 and 1. |
d) Delay: Define when the transition effect starts, such as: Transition:width 3s linear 5s;
Here's a generation of simple code demos:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <Scriptsrc= "Js/jquery.js"></Script>5 <style>6 . A{7 width:100%;8 Height:200px;9 transition:All 3s ease-in;Ten background:#03F; One } A . C{ - width:300px; - } the . A:hover{ - Height:400px; - } - </style> + </Head> - + <Body> A <Divclass= "a"> at </Div> - - <P>Click on the page to narrow the width</P> - <P>Move to the red area to make the height larger</P> - <Script> - $ (document). Click (function(){ in $('. A'). addclass ('C'); - }); to </Script> + </Body> - </HTML>
The Transition property of 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
