Home > Developer > JavaScript
Css3 transition, css3transition
Transition: transition
Transition: Short for transition-property/duration/timing-function/delay.
Transition: <'transition-properties'> | <'transition-duration'> | <'transition-timing-function'> | <'transition-delay'> [,.. .];
Transition-property: name of the transformed property.
None, all, one or more <Properties> (separated by commas ).
Transition-duration: duration. Unit: s or ms.
<Time> the default value is 0. No transition effect.
Transition-timing-function: the speed curve of the transition effect.
Linear: constant speed, equal to cubic-bezr (0, 0, 1, 1)
Slow: slow speed, equal to cubic-bezr (0.25, 0.1, 0.25, 1)
Starting from slow-in, equal to cubic-bezr (0.25, 0.1, 0.25, 1)
Terminated-out: ends slowly, equal to cubic-bezr (0.25, 1)
Starting-in-out: starts and ends with a slow state, which is equal to cubic-bezeiser (0.42, 0, 0.58, 1)
Cubiz-bezr (n, n ~ 1.
Transition-delay: Specifies the start time. The default value is 0.
Separated by commas.
-Moz-transition: color 0.3 s bytes-out 2 s;
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> excessive </title>
<Style type = "text/css">
/* Case */
. T {
Width: 200px;
Height: 300px;
Background: blue;
Transition: width 2 s, height 2 s;
-Moz-transition: width 2 s, height 2 s;/* Firefox 4 */
-Webkit-transition: width 2 s, height 2 s;/* Safari and Chrome */
-O-transition: width 2 s, height 2 s;/* Opera */
}
. T: hover {width: 300px; height: 200px ;}
/* Test the transition-timing-function */
. Bwh {width: 100px; height: 50px; background: # cccccc; border: 1px solid red ;}
. Div1 {transition: width 2 s; transition-timing-function: linear;/* specifies the effect of the transition from the end to the end at the same speed (equal to cubic-bezr (0, 0, 1, 1 )) */}
. Div2 {transition: width 2 s; transition-timing-function: transition-in;/* specifies the transition effect starting with a slow speed (equal to cubic-bezr (0.42, 1 )). */}
. Div3 {transition: width 2 s; transition-timing-function: progress;/* specify the slow start, then increase, and then the slow end of the transition effect (cubic-bezr (0.25, 0.1, 0.25, 1 ))*/}
. Div4 {transition: width 2 s; transition-timing-function: transition-out;/* specifies the transition effect that ends at a slow speed (equal to cubic-bezr (0.58, 1 )). */}
. Div5 {transition: width 2 s; transition-timing-function: transition-in-out;/* specifies the transition effect starting and ending at a slow speed (equal to cubic-bezr (0.42, 0, 0.58, 1 ))*/}
. Bwh: hover {width: 400px ;}
/* Test transparency */
. D {width: 200px;
Height: 100px;
Background: black;
Transition: opacity 3 s;
-Moz-transition: opacity 3 s;/* Firefox 4 */
-Webkit-transition: opacity 3 s;/* Safari and Chrome */
-O-transition: opacity 3 s;/* Opera */
}
. D: hover {opacity: 0.1 ;}
</Style>
</Head>
<Body>
<Div class = "t"> </div>
<Div class = "d"> </div>
<Div class = "bwh div1"> </div>
<Div class = "bwh div2"> </div>
<Div class = "bwh div3"> </div>
<Div class = "bwh div4"> </div>
<Div class = "bwh div5"> </div>
<Div class = "bwh div6"> </div>
</Body>
</Html>
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
