<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
.wrapper5 {
width: 200px;
height: 200px;
background: red;
margin: 20px auto;
transition:width .5s ease-in .18s;
-webkit-transition-property: width;
transition-property: width;
-webkit-transition-duration:.5s;
transition-duration:.5s;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-webkit-transition-delay: .18s;
transition-delay:.18s;
}
.wrapper5 div:hover {
width: 400px;
}
/* .wrapper5 删除了之后就可以实现动画过度了。*/
</style>
</head>
<body>
<div class="wrapper5">
<div>动画过度属性</div>
</div>
</body>
</html>
这个是不可以的，要匹配的.wrapper5 div与.wrapper5 div:hover匹配
.wrapper5与.wrapper5:hover匹配
.wrapper5:hover {
width: 400px;
}
把其中的css
.wrapper5 div:hover {
width: 400px;
}改成
.wrapper5:hover {
width: 400px;
}