css3过渡
transition
兼容性:IE10+
transition: none | all | property
默认为none
all 表示所有属性过渡
property 指定属性值,如color opacity
<!DOCTYPE html> <html lang="en"headmeta charset="UTF-8"title>Document</style> body{ margin:0 auto; background#abcdef; } .box width700px heighturl(source/pic.png) center no-repeat cursor pointer -webkit-transformrotate(0deg) -moz-transform -ms-transform -o-transform transform -webkit-transition-propertytransform -moz-transition-property -ms-transition-property -o-transition-property transition-property; .box:hover -webkit-transformrotate(180deg)} body> div class="box"></divhtml>
transition-duration 动画持续时间
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out
-webkit-transition-duration2s -moz-transition-duration -ms-transition-duration -o-transition-duration transition-duration -webkit-transition-timing-functionlinear/*线性*/ -moz-transition-timing-function -ms-transition-timing-function -o-transition-timing-function transition-timing-function -webkit-transition-timing-functionease平滑 -webkit-transition-timing-functionease-in缓入ease-out缓出ease-in-out缓入缓出; >
transition-delay 过渡延迟
-webkit-transition-delay1s -moz-transition-delay -ms-transition-delay -o-transition-delay transition-delay; >
transtion简写
transition: property duration timing-function delay
-webkit-transitiontransform 2s ease-in-out 1s -moz-transition -ms-transition -o-transition transition; >