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>

Answer 2

You'll need to use a transition-timing-function with palindromic timing, so the card image changeover can always be in the middle. Examples of this include linear or ease-in-out (incorporated below).

Note that some browsers don't support transition on background-image though, so you may need to approach this effect differently for it to work in IE, for example.

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: transform 1s ease-in-out, background 0s .5s;
}

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

<div></div>

Answer 3

Why do you need 100 URL's to do this? You only need the front of the card image and the back of the card image.

img {
      width:100%;
      border:1px solid #e0e0e0;
      border-radius:1vw;
    }

    .container {
      /* Position and Size the Container */
      position: absolute;
      top: 17%;
      bottom:0; /* Needed to keep the overall height larger than the card. */
      left: 20%;
      width: 25%;
 
      /* Will inherit to children only (not all descendants) */
      perspective: 900px; 
    }

    #card .front {
      /* Flip the front side of the card by rotating it around the y-axis. */
      transform: rotateY(180deg);
    }

    #card:hover {
      /* Rotate the card as a whole:  */
      transform: rotateY(180deg);
    }

    #card div {
      /* Forces both elements to come out of the normal flow and occupy the same space on the page. */
      position: absolute;

      /*
        The backface-visibility CSS property determines whether or not the back
        face of the element is visible when facing the user. The back face of 
        an element is always a transparent background, letting, when visible, 
        a mirror image of the front face be displayed. If your foreground element
        is opaque, this property may not need to be set.
      */
      backface-visibility: hidden;
    }

    #card {
      /*
        Indicates that the children of the element should be positioned in the 3D-space.
        And, pass any inherited perspective along to children.
      */
      transform-style: preserve-3d;

      /* 
        Changes to the transform property should take 1 second to
        change from their current value to their new value. 
      */
      transition: transform 1s cubic-bezier(.75,1.25,.5,1.25);
    }

<!-- The "container" will be the 3D space for us to work in.   -->
  <div class="container">

    <!-- The "card" is the single entity that we will manipulate. -->
    <div id="card">   

      <!-- The child elements make up pieces of the overall object.--> 
      <div class="front"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Ace_of_spades.svg/2000px-Ace_of_spades.svg.png"></div>
      <div class="back"><img src="https://thumb1.shutterstock.com/display_pic_with_logo/3172829/620603528/stock-vector-ace-of-spades-with-eyel-vintage-design-t-shirts-620603528.jpg"></div>
    </div>

  </div>

Answer 4

Move the transition to the hover state and adjust the delay and you will have exactly the same thing:

div.card {
  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;
}

div.card:hover {
  transform: rotateY(160deg);
  background-image: url("https://sun9-8.userapi.com/c840530/v840530203/6092c/fR8eCsT009k.jpg");
  transition:   transform 1s linear, background 0s 0.5s linear;
}

<div class="card"></div>