<!DOCTYPE html>
<html>
<head>
<title>transition-timing-function</title>
<meta charset="utf-8">
<style type="text/css">
div{
width:300px;
height: 300px;
background: green;
margin:200px;
-moz-transform-transition:-webkit-border-radius 1s ease-in-out 0.2s;
-webkit-transform-transition:-webkit-border-radius 1s ease-in-out 0.2s;
-ms-transform-transition:-webkit-border-radius 1s ease-in-out 0.2s;
-o-transform-transition:-webkit-border-radius 1s ease-in-out 0.2s;
transform-transition:border-radius 1s ease-in-out 0.2s;
}
div:hover{
border-radius:150px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
transform和transition是两个控制不同效果的属性,transform不包含transition,不能写成transform-transition
transform-transition:border-radius 1s ease-in-out 0.2s; 修改为: transition:border-radius 1s ease-in-out 0.2s;