html - CSS 翻转动画准时？

Question

使用 David Walsh 的 css 翻转效果来处理一张图片，该图片会变成另一张图片。但是想知道是否可以在 3 秒内触发而不是鼠标悬停？对不起!喜欢这个。 :(

任何回复将不胜感激:)

CSS Flip 主页:http://davidwalsh.name/css-flip

代码:

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
        <!-- front content -->
        </div>
        <div class="back">
        <!-- back content -->
        </div>
    </div>
</div>

CSS:

/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
width: 320px;
height: 480px;
}

/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;

position: relative;
}

/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;

position: absolute;
top: 0;
left: 0;
}

/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}

Answer 1

您需要使用 CSS 动画而不是悬停时的过渡。使用 animation-fill-mode: forwards 动画只会播放一次。如果你想让它翻过来，你就必须改变它。 animation-delay 用于让它等待 3 秒。

这是使用 CSS 动画的资源:MDN docs

@-webkit-keyframes flip {
  from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
  to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}

@keyframes flip {
  from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
  to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}

.flipper {
  -webkit-animation-name: flip;
          animation-name: flip;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}

@-webkit-keyframes flip {
  from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
  to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}

@keyframes flip {
  from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
  to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}


/* entire container, keeps perspective */
.flip-container {
  perspective: 1000;
}

.flip-container, .front, .back {
  width: 320px;
  height: 480px;
}

/* flip speed goes here */
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
  -webkit-animation-name: flip;
  animation-name: flip;
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

/* hide back of pane during swap */
.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

/* front pane, placed above back */
.front {
  background: blue;
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
  background: green;
}

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
        <!-- front content -->
        </div>
        <div class="back">
        <!-- back content -->
        </div>
    </div>
</div>