Flip Animationでブートストラップカードを正しく実装する方法は？

Question

私はCSSアニメーションを使用してブートストラップカードフリップのコンセプトに取り組んでいますが、それはホバー上で動作しますが、私はそれを採用することができるロジックに従って自動的に起こりたいと思います。あなたは私のコードhereを見ることができます。

Answer 1

keyframesを追加すると、自動的に行われるはずです。以下のコードを試してみてください。私はanimationをクラスcontentに加えました。

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

 

 
}

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