|
css3過渡 transition 兼容性：IE10+
transition: none | all | property 默認(rèn)為none all 表示所有屬性過渡 property 指定屬性值，如color opacity <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin:0 auto; background:#abcdef; } .box{ width:700px; height:700px; margin:0 auto; background:url(source/pic.png) center no-repeat; cursor: pointer; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition-property:transform; -moz-transition-property:transform; -ms-transition-property:transform; -o-transition-property:transform; transition-property:transform; } .box:hover{ -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); } </style> </head> <body> <div class="box"></div> </body> </html>
transition-duration 動(dòng)畫持續(xù)時(shí)間 transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin:0 auto; background:#abcdef; } .box{ width:700px; height:700px; margin:0 auto; background:url(source/pic.png) center no-repeat; cursor: pointer; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition-property:transform; -moz-transition-property:transform; -ms-transition-property:transform; -o-transition-property:transform; transition-property:transform; -webkit-transition-duration:2s; -moz-transition-duration:2s; -ms-transition-duration:2s; -o-transition-duration:2s; transition-duration:2s; -webkit-transition-timing-function:linear;/*線性*/ -moz-transition-timing-function:linear; -ms-transition-timing-function:linear; -o-transition-timing-function:linear; transition-timing-function:linear; -webkit-transition-timing-function:ease;/*平滑*/ -moz-transition-timing-function:ease; -ms-transition-timing-function:ease; -o-transition-timing-function:ease; transition-timing-function:ease; -webkit-transition-timing-function:ease-in;/*緩入*/ -moz-transition-timing-function:ease-in; -ms-transition-timing-function:ease-in; -o-transition-timing-function:ease-in; transition-timing-function:ease-in; -webkit-transition-timing-function:ease-out;/*緩出*/ -moz-transition-timing-function:ease-out; -ms-transition-timing-function:ease-out; -o-transition-timing-function:ease-out; transition-timing-function:ease-out; -webkit-transition-timing-function:ease-in-out;/*緩入緩出*/ -moz-transition-timing-function:ease-in-out; -ms-transition-timing-function:ease-in-out; -o-transition-timing-function:ease-in-out; transition-timing-function:ease-in-out; } .box:hover{ -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); } </style> </head> <body> <div class="box"></div> </body> </html>
transition-delay 過渡延遲 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin:0 auto; background:#abcdef; } .box{ width:700px; height:700px; margin:0 auto; background:url(source/pic.png) center no-repeat; cursor: pointer; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition-property:transform; -moz-transition-property:transform; -ms-transition-property:transform; -o-transition-property:transform; transition-property:transform; -webkit-transition-duration:2s; -moz-transition-duration:2s; -ms-transition-duration:2s; -o-transition-duration:2s; transition-duration:2s; -webkit-transition-timing-function:ease-in-out;/*緩入緩出*/ -moz-transition-timing-function:ease-in-out; -ms-transition-timing-function:ease-in-out; -o-transition-timing-function:ease-in-out; transition-timing-function:ease-in-out; -webkit-transition-delay:1s; -moz-transition-delay:1s; -ms-transition-delay:1s; -o-transition-delay:1s; transition-delay:1s; } .box:hover{ -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); } </style> </head> <body> <div class="box"></div> </body> </html>
transtion簡寫 transition: property duration timing-function delay <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin:0 auto; background:#abcdef; } .box{ width:700px; height:700px; margin:0 auto; background:url(source/pic.png) center no-repeat; cursor: pointer; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:transform 2s ease-in-out 1s; -moz-transition:transform 2s ease-in-out 1s; -ms-transition:transform 2s ease-in-out 1s; -o-transition:transform 2s ease-in-out 1s; transition:transform 2s ease-in-out 1s; } .box:hover{ -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); -webkit-transition:transform 2s ease-in-out 1s; -moz-transition:transform 2s ease-in-out 1s; -ms-transition:transform 2s ease-in-out 1s; -o-transition:transform 2s ease-in-out 1s; transition:transform 2s ease-in-out 1s; } </style> </head> <body> <div class="box"></div> </body> </html>
|
|
|
