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>