Home > Developer > Web Develop
Transition--transition
The effect of this transition property is to change the effect of the animation when the style of the element changes. With the transition properties in place, in many cases, writing some simple effects will not need to be calculated with JavaScript.
Transition transition attribute shorthand, four values can be set
Transition-property the name of the transition CSS, or all
Transition-duration the time from one state to another
Transition-timing-function animation curve of transition effect, default easy,linear is constant speed, cubic-bezier (n,n,n,n) can customize animation curve
Transition-delay delay
Below is a rotating block made with the CSS3 transition, the mouse is moved into the block after the 1s, and then 10s in a constant rotation of 3600deg.
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Document</title>6 </Head>7 <Body>8 <Divclass= "box"></Div>9 <style>Ten . Box{ One width:200px; A Height:200px; - background:Red; - margin:0 Auto; the transition:All 10s linear 1s; - } - . Box:hover{ - Transform:Rotate (3600deg); + } - </style> + </Body> A </HTML>
Animation--animation
Transition is when the element state changes, triggering the transition animation effect, and animation properties, when the page opens, it starts to execute, until the end of execution or the page closes.
When you perform an animation, you need to define the animation rules first, and with the rules, the elements can perform the animation effect according to the preset rules. When you define an animation rule, you use @keyframes to set it.
Use the following:
@keyframes Animation_name { 0%{ width:200px; } 100%{ width:400px; } }The rule of the above code is to indicate that the rule name is animation_name, and the rule is that the width of an element is from 200px to 400px.
CSS3 Common attributes (iv)--transitions, animations
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
