没有关键帧但有过渡的动画怎么做

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>

我不使用关键帧，因为我需要为每个动画设置唯一的 url。如果我这样做，那么需要创建更多 100 个关键帧。 我想这样做是因为使用转换可以设置不同的 url 方法 js。但这看起来不像我想要的。

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

我的解决方案，您可以在 card-container 元素内创建两个元素 front 和 back 并相应地制作动画：

$(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

将过渡移动到悬停状态并调整延迟，您将拥有完全相同的东西：

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>

Answer 3

为什么需要 100 个 URL 才能做到这一点？您只需要卡片的正面和卡片的背面。

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

您需要使用带有回文计时的transition-timing-function，因此卡片图像转换始终可以在中间进行。这方面的示例包括 linear 或 ease-in-out（合并在下面）。

请注意，尽管某些浏览器不支持 background-image 上的 transition，因此您可能需要以不同的方式处理此效果才能使其在 IE 中运行。

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>