我在div中设置了动画png作为背景图像。
我需要播放整个动画，即使在鼠标悬停完成后。现在我的动画被重新启动/取消，但没有完成。
这是我的WIP代码。
body {
background-color: #9e7d3a;
}
.body {
padding-top: 5%;
}
.logo {
background-image: url("https://i.stack.imgur.com/Uv7z3.png");
height: 50px;
background-repeat: no-repeat;
background-size: 200px;
background-position: center;
}
.logo:hover {
background-image: url("https://i.stack.imgur.com/kPFr9.png");
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="logo.css" />
<title>Logo-test</title>
</head>
<body>
<div class="body">
<div class="logo"></div>
</div>
</body>
</html>尝试使用这样的转换延迟
body {
background-color: #9e7d3a;
}
.body {
padding-top: 5%;
}
.logo {
background-image: url("https://i.stack.imgur.com/Uv7z3.png");
height: 50px;
background-repeat: no-repeat;
background-size: 200px;
background-position: center;
transition-delay: 3s; /* change this based on animation duration */
}
.logo:hover {
background-image: url("https://i.stack.imgur.com/kPFr9.png");
transition-delay: 0s;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="logo.css" />
<title>Logo-test</title>
</head>
<body>
<div class="body">
<div class="logo"></div>
</div>
</body>
</html>