css3过渡
transition
兼容性：IE10+
transition: none | all | property
默认为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 动画持续时间
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>