Html CSS翻转动画是否准时？

使用David Walsh css翻转效果处理假定要更改为另一个的图像。但是想知道它是否可以在3秒钟内触发而不是鼠标悬停？很抱歉这是n00b上的一种：（

任何回复都将不胜感激：）

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动画，而不是悬停时的过渡。使用

动画填充模式：向前

动画将只播放一次。如果你想让它翻过来，你就得把它改一下<代码>动画延迟用于使其等待3秒

以下是使用CSS动画的资源：

@-webkit关键帧翻转{
来自{webkit transform:rotateY（0deg）；transform:rotateY（0deg）；}
到{webkit transform:rotateY（180度）；transform:rotateY（180度）；}
}
@关键帧翻转{
来自{webkit transform:rotateY（0deg）；transform:rotateY（0deg）；}
到{webkit transform:rotateY（180度）；transform:rotateY（180度）；}
}
/*整个容器，保持透视*/
.翻转容器{
前景：1 000；
}
.翻转容器，.正面，.背面{
宽度：320px；
高度：480px；
}
/*翻转速度在这里*/
.鳍状肢{
过渡：0.6s；
变换样式：保留-3d；
位置：相对位置；
-webkit动画名称：flip；
动画名称：翻转；
-webkit动画持续时间：0.6s；
动画持续时间：0.6s；
-webkit动画填充模式：正向；
动画填充模式：正向；
-webkit动画延迟：3s；
动画延迟：3s；
}
/*交换期间隐藏窗格的背面*/
.前面，.后面{
背面可见性：隐藏；
位置：绝对位置；
排名：0；
左：0；
}
/*前窗格，置于后上方*/
.前线{
背景：蓝色；
z指数：2；
/*对于Firefox31*/
变换：旋转（0度）；
}
/*背面，最初隐藏的窗格*/
.回来{
变换：旋转（180度）；
背景：绿色；
}

鼠标悬停三秒钟后还是页面加载三秒钟后？您可能只需添加

转换延迟：3s到您想要延迟的选择器。类似于TylerH所问的问题。如果您希望翻转自动触发，则需要将整个过程更改为
动画
，而不是
过渡
。另外，你是在寻找每3秒翻转一次（或者只在页面加载3秒后翻转一次）？嗨，谢谢你的回复！我希望它在页面加载三秒钟后翻转一次。我可以用这个替换我的CSS吗？不，它被简化以显示你需要什么。您需要添加
@关键帧
，并将这些属性添加到已有的
.flipper
目标中。然后删除以hover为目标的代码。我放了一个片段给你看，但你真的应该自己尝试去学习。尝试但无法让它发挥作用：（我认为这远远超出了我的技能范围完美！非常感谢！你是最好的Alejalapeno！
/* 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);
}

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