Question

对于想要改变为另一个的图像使用David Walsh css翻转效果。但想知道是否可以在3秒内触发而不是鼠标悬停？抱歉!在这个n00b上的种类。 :(

任何回复都将非常感谢：）

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

守则：

overflow:auto;

CSS：

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

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;
}

＆＃13;

@-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;
}

＆＃13;

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

＆＃13;

CSS Flip动画准时？

1 个答案: