javascript - 更改 javascript 而不是将鼠标悬停在设定的时间

Question

我在互联网上发现了这个翻转动画，我想知道:如何更改 javascript，而不是将鼠标悬停在图像上会导致翻转，而是在设定的时间？例如 3 秒后，动画将开始。

我对 javascript 还不太擅长，我希望有人能帮助我

如果您知道解决方案，非常感谢!

$(document).ready(function() {
  $(".container").hover(function() {
    $(".card").toggleClass('flipped')
  }, function() {
    $(".card").toggleClass('flipped')
  });
})

h1 {
  text-align: center;
}

.container {
  width: 200px;
  height: 260px;
  position: relative;
  margin: 0 auto 40px;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  display: inline-block;
}

#main {
  border: 1px solid black;
}

button {
  width: 30%;
  height: 10%;
  margin-top: 100px;
  cursor: default;
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center;
}

.card.flipped {
  -webkit-transform: translateX( -100%) rotateY( -180deg);
  -moz-transform: translateX( -100%) rotateY( -180deg);
  -o-transform: translateX( -100%) rotateY( -180deg);
  transform: translateX( -100%) rotateY( -180deg);
}

.card div {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  font-weight: bold;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
}

.card .front {
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*
.card .front p {
  margin-top: 100px;
}
*/
.card .back p {
  margin: auto;
}

.card .back {
  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div id="main"><br>
    <section class="container">
      <div class="card">
        <div class="front">
          <p>Test</p>
        </div>
        <div class="back">
          <p>MyBack</p>
        </div>
      </div>
    </section>
  </div>
</div>

Answer 1

为什么不使用 CSS 来实现呢？

悬停伪类带有 transition :

h1 {
  text-align: center;
}

.container {
  --card-transition-duration: 1s;
  --card-transition-delay: 4s;
  width: 200px;
  height: 260px;
  position: relative;
  margin: 0 auto 40px;
  perspective: 800px;
  display: inline-block;
}

#main {
  border: 1px solid black;
}

button {
  width: 30%;
  height: 10%;
  margin-top: 100px;
  cursor: default;
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: transform var(--card-transition-duration) ease var(--card-transition-delay);
  transform-style: preserve-3d;
  transform-origin: right center;
}

.container:hover .card {
  transform: translateX( -100%) rotateY( -180deg);
}

.card div {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  font-weight: bold;
  position: absolute;
  backface-visibility: hidden;
  cursor: pointer;
}

.card .front {
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card .back p {
  margin: auto;
}

.card .back {
  background: blue;
  transform: rotateY( 180deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container-fluid">
  <div id="main"><br>
    <section class="container">
      <div class="card">
        <div class="front">
          <p>Test</p>
        </div>
        <div class="back">
          <p>MyBack</p>
        </div>
      </div>
    </section>
  </div>
</div>

或者单独使用@keyframes animation :

h1 {
  text-align: center;
}

.container {
  --card-transition-duration: 1s;
  --card-transition-delay: 4s;
  width: 200px;
  height: 260px;
  position: relative;
  margin: 0 auto 40px;
  perspective: 800px;
  display: inline-block;
}

#main {
  border: 1px solid black;
}

button {
  width: 30%;
  height: 10%;
  margin-top: 100px;
  cursor: default;
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: transform var(--card-transition-duration) ease var(--card-transition-delay);
  transform-style: preserve-3d;
  transform-origin: right center;
  animation-name: flip;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.card div {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  font-weight: bold;
  position: absolute;
  backface-visibility: hidden;
  cursor: pointer;
}

.card .front {
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card .back p {
  margin: auto;
}

.card .back {
  background: blue;
  transform: rotateY( 180deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes flip {
  0% {
    transform: translateX( 0%) rotateY( 0deg);
  }
  35% {
    transform: translateX( 0%) rotateY( 0deg);
  }
  65% {
    transform: translateX( -100%) rotateY( -180deg);
  }
  100% {
    transform: translateX( -100%) rotateY( -180deg);
  }
}

<div class="container-fluid">
  <div id="main"><br>
    <section class="container">
      <div class="card">
        <div class="front">
          <p>Test</p>
        </div>
        <div class="back">
          <p>MyBack</p>
        </div>
      </div>
    </section>
  </div>
</div>