CODEWITHSUNDEEP
htmlcss
GetGalax
GetGalax

Reputation: 149

CSS Flip Animation on time?

Using David Walsh css flip effect for an image that suppose to change to another. But wondering If it can be triggered in say 3 seconds instead of mouseover? Sorry! Kind on a n00b to this. :(

Any response will be very appreciated :)

CSS Flip homepage: http://davidwalsh.name/css-flip

The Code:

<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>

The CSS:

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

Upvotes: 0

Views: 4641

Answers (1)

Alejalapeno
Alejalapeno

Reputation: 1008

You'll want to use CSS animations instead of transitions on hover. Using animation-fill-mode: forwards the animation will only play once. You'll have to alter it if you want it to flip back over. animation-delay is used to make it wait 3 seconds.

Here's a resource for using CSS animations: MDN docs

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


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


/* entire container, keeps perspective */
.flip-container {
  perspective: 1000;
}

.flip-container, .front, .back {
  width: 320px;
  height: 480px;
}

/* flip speed goes here */
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
  -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;
}

/* hide back of pane during swap */
.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

/* front pane, placed above back */
.front {
  background: blue;
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
  background: green;
}
<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>

Upvotes: 2

Related Questions