Home > Developer > Web Develop
Transition: Transition
Transition:transition-property/duration/timing-function/delay's abbreviation.
Transition: < ' transition-property ' > | | < ' transition-duration ' > | | < ' transition-timing-function ' > | | < ' Transition-delay ' > [, ...];
Transition-property: The property name of the transform.
None, all, one or more <property> (comma delimited).
Transition-duration: Duration. Unit s or Ms.
<time> defaults to 0. No transition effect.
Transition-timing-function: The velocity curve of the transition effect.
Linear: constant, equal to Cubic-bezier (0,0,1,1)
Ease: slow speed, equal to Cubic-bezier (0.25,0.1,0.25,1)
Ease-in: Starts at slow, equals Cubic-bezier (0.25,0.1,0.25,1)
Ease-out: End with slow, equal to Cubic-bezier (0,0,0.25,1)
Ease-in-out: At slow start and end, equals Cubic-bezier (0.42,0,0.58,1)
Cubiz-bezier (n,n,n,n): "Three times Belmont" defines its own value in the Cubiz-bezier function, 0~1.
Transition-delay: Specifies the start time. Default 0.
A comma separates the delay time for multiple attributes.
-moz-transition:color 0.3s ease-out 2s;
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> over </title>
<style type= "Text/css" >
/ * case * /
. t{
width:200px;
height:300px;
Background:blue;
transition:width 2s, height 2s;
-moz-transition:width 2s,height 2s;/* Firefox 4 * /
-webkit-transition:width 2s,height 2s; */Safari and Chrome * /
-o-transition:width 2s,height 2s;/* Opera * *
}
. t:hover{width:300px; height:200px;}
/ * Test transition-timing-function*/
. Bwh{width:100px;height:50px;background: #cccccc; border:1px solid red;}
. div1{transition:width 2s; transition-timing-function:linear;/* Specifies the transition effect at the same speed to the end (equals Cubic-bezier (0,0,1,1)) */}
. div2{transition:width 2s; transition-timing-function:ease-in;/* Specifies a transition effect that starts at a slow speed (equals Cubic-bezier (0.42,0,1,1)). */}
. div3{transition:width 2s; transition-timing-function:ease;/* Specifies slow start, then fast, and then slow end transition (cubic-bezier ( 0.25,0.1,0.25,1)) */}
. div4{transition:width 2s; transition-timing-function:ease-out;/* Specifies a transition effect at a slow end (equal to Cubic-bezier (0,0,0.58,1)). */}
. div5{transition:width 2s; transition-timing-function:ease-in-out;/* Specifies the transition effect at a slow start and end (equal to Cubic-bezier ( 0.42,0,0.58,1)) */}
. bwh:hover{width:400px;}
/ * Test transparency * /
. d{width:200px;
height:100px;
Background:black;
transition:opacity 3s;
-moz-transition:opacity 3s;/* Firefox 4 * /
-webkit-transition:opacity 3s; */Safari and Chrome * /
-o-transition:opacity 3s;/* Opera * *
}
. d:hover{opacity:0.1;}
</style>
<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>
CSS3 Transition Transition
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
