如何正确实现Flip Animation的Bootstrap卡？

Question

我正在使用CSS动画制作Bootstrap Card Flip概念，它在悬停时起作用，但我希望它应该按照我可以采用的逻辑自动发生。您可以看到我的代码here。

Answer 1

添加keyframes应该让它自动发生。请尝试以下代码。我已将animation添加到课程content中。

＆＃13;

＆＃13;

body {
  background: #eee;
  font-family: 'Lily Script One';
}

.card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  margin: -150px;
  float: left;
  perspective: 500px;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);

  transition: transform 1s;
  transform-style: preserve-3d;
  animation: mymove 5s infinite;
}

.card:hover .content {
  transform: rotateY( 180deg ) ;
  transition: transform 0.5s;
}

.front,
.back {
  position: absolute;
  height: 100%;
  width: 100%;
  background: white;
  line-height: 300px;
  color: #03446A;
  text-align: center;
  font-size: 60px;
  border-radius: 5px;
  backface-visibility: hidden;
}

.back {
  background: #D34f6A;
  color: white;
  transform: rotateY( 180deg );
}

@keyframes mymove {
    0%   {transform: rotateY( 180deg );}
    50%  {transform: rotateY( 0deg );}
    100% {transform: rotateY( 180deg );}


}

＆＃13;

<div class="card">
  <div class="content">
    <div class="front">
      Read More
    </div>
    <div class="back">
      Content 
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;