Css tranistions allows a smooth transition of element attributes per unit time. After reading CSS Transitions Module Level 3, I have been attracted to it. Although only chrome and safari currently support this attribute (but we still need to use the-webkit kernel keyword as the prefix), we believe that in the near future, mainstream browsers will fully support this attribute.
Normally, when the css attribute changes, the element changes immediately. Css transtions provides a way for elements to smoothly transition from the original state to the new State. You only need to define the elements to use the transition effect attributes (transition-property), the transition effect transition time (transition-duration), and the transition effect transition mode (transition-timing-function) and when the transition effect starts (transition-delay ). After learning about these attributes in detail, I made a simple test (as shown below). Although simple, it is always encouraging.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = GBK "/> <title> transitions www.bkjia.com </title> <style>. transition {opacity: 0.2; position: absolute; left:-65px; top:-65px; left: 50%; top: 50%; border: 1px solid #000; background-color: # f00; padding: 30px; width: 100px; height: 100px;-webkit-transition-property: opacity, width, height, margin-left, margin-top, padding, border-width;-webkit-transition-duration: 1 s;-webkit-transition-timing-function: callback-in-out ;}. transition: hover {width: 300px; height: 300px; border-width: 3px; margin-top:-196px; margin-left:-196px; opacity: 1; padding: 90px ;}</style>
Tip: the code can be modified before running!
I just defined an absolute center box and zoomed it out when the mouse slides. We will see a smooth transition in chrome. The Css rules are as follows:
Copy to ClipboardReference: [www.bkjia.com]. transition {
Opacity: 0.2;
Position: absolute;
Left:-65px;
Top:-65px;
Left: 50%;
Top: 50%;
Border: 1px solid #000;
Background-color: # f00;
Padding: 30px;
Width: 100px;
Height: 100px;
-Webkit-transition-property: opacity, width, height, margin-left, margin-top, padding, border-width;
-Webkit-transition-duration: 1 s;
-Webkit-transition-timing-function: callback-in-out;
}
. Transition: hover {
Width: 300px; height: 300px; border-width: 3px; margin-top:-195px; margin-left:-195px; opacity: 1; padding: 90px;
}
The-webkit-transition-property defines the attributes for using the transition effect, and the-webkit-transition-duration defines the duration of the transition. Here I define 1 s. W3c rules indicate that when the attribute value of-webkit-transition-duration is defined as 0, no smooth transition will occur. -Webkit-transition-timing-function defines the transition mode. Here we use transition-in-out. For other methods, see the documentation. With this attribute, users can enjoy a good experience, and we do not need to write a large number of js files to achieve this smooth effect. Next I will build an Image gallery to see the user experience brought about by this attribute.
I will not go into details on how to arrange images. People familiar with css know how to do it. I will only introduce the core css code for implementing the transition effect.
Copy to ClipboardReference: [www.bkjia.com]. imageGallery li {display: block; width: 200px; height: 136px; margin: 15px; float: left; _ overflow: hidden ;}
. ImageGallery li img {
Width: 200px;
Height: 136px;
Border: 1px solid #000;
Position: relative;
Z-index: 1000;
-Webkit-transition-property: width, height, margin-left, margin-top, border, left, top, z-index;
-Webkit-transition-duration: 1 s;
-Webkit-transition-timing-function: callback-in-out;
.}
. ImageGallery li a: hover {_background-color: # fff; _ z-index: 5000; _ position: relative ;}
. ImageGallery li a: hover img {
Border: 2px solid #000;
Width: 600px;
Height: 408px;
Margin-left:-301px;
Margin-top:-255px;
Left: 50%;
Top: 50%;
Z-index: 5000;
}
The-webkit-transition-property defines the attributes for using the transition effect, and the-webkit-transition-duration defines the duration of the transition. Here I define 1 s. W3c rules indicate that when the attribute value of-webkit-transition-duration is defined as 0, no smooth transition will occur. -Webkit-transition-timing-function defines the transition mode. Here we use transition-in-out. For other methods, see the documentation. With this attribute, users can enjoy a good experience, and we do not need to write a large number of js files to achieve this smooth effect. Next I will build an Image gallery to see the user experience brought about by this attribute.
I will not go into details on how to arrange images. People familiar with css know how to do it. I will only introduce the core css code for implementing the transition effect.
Copy to ClipboardReference: [www.bkjia.com]. imageGallery li {display: block; width: 200px; height: 136px; margin: 15px; float: left; _ overflow: hidden ;}
. ImageGallery li img {
Width: 200px;
Height: 136px;
Border: 1px solid #000;
Position: relative;
Z-index: 1000;
-Webkit-transition-property: width, height, margin-left, margin-top, border, left, top, z-index;
-Webkit-transition-duration: 1 s;
-Webkit-transition-timing-function: callback-in-out;
}
. ImageGallery li a: hover {_background-color: # fff; _ z-index: 5000; _ position: relative ;}
. ImageGallery li a: hover img {
Border: 2px solid #000;
Width: 600px;
Height: 408px;
Margin-left:-301px;
Margin-top:-255px;
Left: 50%;
Top: 50%;
Z-index: 5000;
}
The above. imageGallery li a: The hover line of code and the overflow attribute of. imageGallery li mainly fixes bugs under ie6. Define overflow: hidden for imageGallery li to see interesting results.
Looking at the final results, we can see that we no longer have to write a lot of js for such a smooth transition effect, and expect css transition to be quickly supported by mainstream browsers.
Final result:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = GBK "/> <title> transitions-image gallery-Liehuo.net </title> <style> body {text-align: center ;}. container {margin: 0 auto; width: 960px; text-align: left ;}. imageGallery {list-style: none; padding: 0; margin: 0; float: left ;}. imageGallery li {display: block; width: 200px; height: 136px; margin: 15px; float: left; _ overflow: hidden ;}. imageGallery li img {width: 200px; height: 136px; border: 1px solid #000; position: relative; z-index: 1000;-webkit-transition-property: width, height, margin-left, margin-top, border, left, top, z-index;-webkit-transition-duration: 1 s;-webkit-transition-timing-function: callback-in-out ;}. hidden li {overflow: hidden ;}. imageGallery li a: hover {_ background-color: # fff; _ z-index: 5000; _ position: relative ;}. imageGallery li a: hover img {border: 2px solid #000; width: 600px; height: 408px; margin-left:-301px; margin-top:-255px; left: 50%; top: 50%; z-index: 5000 ;} </style>
Tip: the code can be modified before running!
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
