console
<!DOCTYPE html>
<html lang="en">
<head>
<title>animation</title>
<style>
.box {
height: 100px;
width: 100px;
border: 15px solid black;
animation: changebox 1s ease-in-out 1s infinite alternate running forwards;
}
.box:hover {
animation-play-state: paused;
}
@keyframes changebox {
10% {
background: red;
}
50% {
width: 80px;
}
70% {
border: 15px solid yellow;
}
100% {
width: 180px;
height: 180px;
}
}
.box1 {
height: 100px;
width: 100px;
border: 15px solid black;
transition-property:width background-color;
transition-duration:2s; // 过渡执行时间
transition-timing-function:linear;
transition-delay:2s; // 延迟执行时间
}
.box1:hover{
width:300px;
background-color:green;
}
</style>
</head>
<body>
<div class="box1">
</body>
</html>