CSS Flip Animation是否准时？

Question

使用大卫·沃尔什（David Walsh）的css翻转效果处理可能会更改为另一幅的图像。 但是想知道是否可以在3秒钟内触发而不是将鼠标悬停吗？ 抱歉! 对此n00b。 :(

任何回应将不胜感激:)

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>