Recently, I felt that I had a smattering of css3 animations, and I didn't really speculate on the meaning of the parameters. Today, the use of free time, first from the common transition to start.
Transition the corresponding CSS properties list:
1, Transition-property
* Specifies that when an element has an attribute change, the transition effect is performed, and the property can have the following properties: None, all, and other properties that can trigger the browser reflow or repaint.
* When none is specified, the animation stops immediately, and when all is specified, the conversion effect, such as size change, is performed when the element produces any property value changes.
* The initial default value is all.
2, Transition-duration
* Specify the time of the conversion process, such as 1s, none.
* The initial default value is 0.
3, Transition-timing-function
* Specify the effects that are available in the conversion process, which are preset: ease, linear, ease-in, Ease-out, Ease-in-out, Cubic-bezier (x1, y1, x2, y2), easy when default values.
* Cubic-bezier to compute the value of the property in the process of "conversion" through Bezier curves, as shown in the following curve, the output P2 of the whole process can be changed by changing the coordinates of the P1 (x1, y1) and X2 (y2).
* The initial default value is defaults.
4, Transition-delay
* Specify the time at which an animation begins to execute, that is, how long it will take to start the transition effect when the element property value is changed
* The initial default value is 0.
Interested can see me using transition to implement slide slide demo.
<! DOCTYPE html> <ptml> <pead> <meta charset= "UTF-8" > <title>css3 slide</title> <sty Le> *{margin:0; padding:0} #page-wrap{text-align:center;} #page-wrap h1{line-height:50px;} #slideshow {margin : 100px auto; height:195px; width:269px; position:relative; Overflow:hidden; #slideshow > ul {height:195px; width:1076px; position:absolute; top:0; left:0; height:100%; -moz-transition:opacity 0.5s ease-out; -webkit-transition:opacity 0.5s ease-out; /* Slow * *-webkit-animation:moveslideshow 8s linear infinite; -moz-animation:moveslideshow 8s Linear infinite; -webkit-transform:translate3d (0,0,0); /* Performance/} #slideshow > Ul li{float:left;} @-webkit-keyframes Moveslideshow {0% {-webkit-transform:translatex (0); -moz-transform:translatex (0); Transform:translatex (0); } 100% {-webkit-transform:translatex ( -807px); -moz-transform:translatex ( -807PX); Transform:translatex ( -807px); }} @-moz-keyframes moveslideshow {0% {-webkit-transform:translatex (0); -moz-transform:translatex (0); Transform:translatex (0); } 100% {-webkit-transform:translatex ( -807px); -moz-transform:translatex ( -807PX); Transform:translatex ( -807PX); } </style> </pead> <body> <div id= "Page-wrap" > <p>css3 slide</p> <div id= "Slideshow" > <ul> <li></li> <li></li> <li> </li> <li></li> </ul> </div> </div > </body> </ptml>
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
