Skip to content

Instantly share code, notes, and snippets.

@jabez007

jabez007/FlipAnimation.css

Last active January 30, 2018 22:28
Show Gist options
  • Save jabez007/1488e4ff37a5b2ad05478a338c9f69cb to your computer and use it in GitHub Desktop.
Save jabez007/1488e4ff37a5b2ad05478a338c9f69cb to your computer and use it in GitHub Desktop.
Download ZIP
CSS Flip Animation in Bootstrap Cards
Raw
FlipAnimation.css
@-ms-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-ms-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* https://davidwalsh.name/demo/css-flip.php */
/* entire container, keeps perspective */
.flip-container {
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-ms-perspective: 10000px;
-ms-transform: perspective(10000px);
-moz-transform: perspective(10000px);
perspective: 10000px;
}
/* flip speed goes here */
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
-webkit-animation-duration: 0.6s;
-moz-animation-duration: 0.6s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(0deg);
-moz-transition: 0.6s;
-moz-transform: rotateY(0deg);
-o-transition: 0.6s;
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
animation-duration: 0.6s;
animation-fill-mode: both;
transition: 0.6s;
transform-style: preserve-3d;
position: relative; /*Aboslute does not play well with bootstrap cards*/
margin-top: 0px;
margin-left: 0px;
float: left;
}
/* UPDATED! front pane, placed above back */
.front {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
animation-name: fadeIn;
}
/* back, initially hidden pane */
.back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-animation-name: fadeOut;
-moz-animation-name: fadeOut;
animation-name: fadeOut;
position: absolute;
}
/*Flip on JavaScript*/
.flip-container.flip .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container.flip .front {
-webkit-animation-name: fadeOut;
-moz-animation-name: fadeOut;
animation-name: fadeOut;
position: absolute;
}
.flip-container.flip .back {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
animation-name: fadeIn;
position: relative;
}
Raw
index.html
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="FlipAnimation.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
</head>
<body>
<div class="container-fluid body-content">
<div class="card-group">
<div class="flip-container">
<div class="flipper">
<div class="front">
<div class="card">
<div class="card-header">
<h3 onclick="$('div.flip-container').toggleClass('flip');" title="Click to Flip">Card Front</h3>
</div>
<div class="card-body">
</div>
</div>
</div>
<div class="back">
<div class="card">
<div class="card-header">
<h3 onclick="$('div.flip-container').toggleClass('flip');" title="Click to Flip">Card Back</h3>
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment