直接上代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@-webkit-keyframes 'expand' {
0% {border-width: 4px;}
50% {border-width: 12px;}
100% {
border-width: 4px;
height: 130px;
width: 150px;
}
}
.donghua {
border: 4px solid green;
height: 100px;
width: 100px;
box-sizing: border-box;
-webkit-animation: 'expand' 6s ease 1s 10 alternate;
}
.donghua:hover {
-webkit-animation-play-state: paused;
}
</style>
</head>
<body>
<div style="width: 800px;height: 600px;border: 1px solid;">
<div class="donghua">
</div>
</div>
</body>
</html>最后的效果：
