CODEWITHSUNDEEP
jquerytwitter-bootstrapcss
Sowmya S
Sowmya S

Reputation: 73

How to implement Bootstrap Card With Flip Animation correctly?

I am working on Bootstrap Card Flip concept using CSS animation it works on hover but I want that it should happen automatically following a logic I can adopt for it. You can see my code here.

Upvotes: 1

Views: 2391

Answers (1)

Gowtham Shiva
Gowtham Shiva

Reputation: 3875

Adding keyframes should make it happen automatic. Try the below code. I have added animation to the class content as well.

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>

Upvotes: 4

Related Questions