How to complete the whole animated png even after the hover effect ends?

I have animated png as the background image in div.

I need to play the whole animation, even after the mouse hover is finished. Now my animation is restarted/canceled, but not completed.

This is my WIP code.

body {
  background-color: #9e7d3a;
}

.body {
  padding-top: 5%;
}

.logo {
  background-image: url("https://i.sstatic.net/Uv7z3.png");
  height: 50px;
  background-repeat: no-repeat;
  background-size: 200px;
  background-position: center;
}

.logo:hover {
  background-image: url("https://i.sstatic.net/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>

Solution

try using transition delay like this

body {
  background-color: #9e7d3a;
}

.body {
  padding-top: 5%;
}

.logo {
  background-image: url("https://i.sstatic.net/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.sstatic.net/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>