how do animation without keyframes but with transition

Question

div {
    height: 41.4vmin;
    width: 30vmin;
    margin: 0.7vmin;
    border-radius: 1.3vmin;
    background-image: url("https://sun9-8.userapi.com/c840530/v840530203/60933/tkZK7aYQUjM.jpg");
    background-size: contain;
}


@keyframes example {
  0% {}
  35% {background-image: url("https://sun9-8.userapi.com/c840530/v840530203/60933/tkZK7aYQUjM.jpg");}
  36% {background-image: url("https://sun9-8.userapi.com/c840530/v840530203/6092c/fR8eCsT009k.jpg");}
  100% {background-image: url("https://sun9-8.userapi.com/c840530/v840530203/6092c/fR8eCsT009k.jpg");transform: rotateY(160deg);}
}

div:hover {
  
  animation-fill-mode: forwards;
  animation-name: example;
  animation-duration: 1s;

}

<div></div>

I don't use keyframes because i need set unique url for every animation. If i do this then need creator more 100 keyframes. And i want to do this because with transition can set different url method js. But this not look how i want.

div {
    height: 41.4vmin;
    width: 30vmin;
    margin: 0.7vmin;
    border-radius: 1.3vmin;
    background-image: url("https://sun9-8.userapi.com/c840530/v840530203/60933/tkZK7aYQUjM.jpg");
    background-size: contain;
    transition: 
    /* step 1 */
    transform      1s,
    /* step 2 */
    background  0.0s 0.5s;
}



div:hover {
  transform: rotateY(160deg);
  background-image: url("https://sun9-8.userapi.com/c840530/v840530203/6092c/fR8eCsT009k.jpg");
}

  <div></div>

Answer 1

My solution, you can create two elements front and back that lies inside card-container element and animate accordingly:

$(document).ready(function () {
  $('.card-container').click(function () {
    $(this).toggleClass('clicked');
  });
});

.card-container {
  position: relative;
  overflow: hidden;
  height: 41.4vmin;
  width: 30vmin;
  margin: 0.7vmin;
}

.card-container > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 1.3vmin;
  transition: transform 1s, background  0.0s 0.5s;
  transform-style: preserve-3d;
}

.card-container .front {
    background-image: url("https://sun9-8.userapi.com/c840530/v840530203/60933/tkZK7aYQUjM.jpg");
    background-size: contain;
    background-color: black;
    transform: rotateY(0deg);
}

.card-container .back {
  background-image: url("https://sun9-8.userapi.com/c840530/v840530203/6092c/fR8eCsT009k.jpg");
  background-size: contain;
  transform: rotateY(180deg);
}

.card-container.clicked .front {
  transform: rotateY(180deg);
}

.card-container.clicked .back {
  transform: rotateY(0deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card-container">
  <div class="front"></div>
  <div class="back"></div>
</div>

<div class="card-container">
  <div class="front"></div>
  <div class="back"></div>
</div>