Hello, I've an issue with an animation in CSS, I'm trying to make a "3d" flip card animation in CSS. I already have a working version, but on this version the card just rotates one time, but I want to make an animation, with rotations/zooms/ect...
Here is the function I use to rotate the card :
function test() {
var sheet = window.document.styleSheets[0]
/* Working */
//sheet.insertRule('.flip-container .flipper{-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);-o-transform: rotateY(-180deg);transform: rotateY(-180deg);-webkit-transform: rotateY(-180deg);}', sheet.cssRules.length);
/* Isn't working */
sheet.insertRule('.flip-container .flipper{animation-name: test; animation-duration: 1.5s; animation-delay: 0.1s;}', sheet.cssRules.length);
}
The first version who works add css -webkit-transform: rotation rules in the css file when the button is pressed, that make the card flip and everything is alright. https://jsfiddle.net/3Lnt4fe3/4/
The second version who doesn't work add css animation-name rule in the css file, in the css file, the @keyframe is already declared. The animation is running well but when it ends, the rotation is canceled... https://jsfiddle.net/3Lnt4fe3/5/
Can someone help me to prevent the cancellation of the animation? Thanks
You need to add the animation-fill-mode: forwards
for this to work the way you are looking for:
.container {
width: 500px;
height: 260px;
position: relative;
perspective: 800px;
}
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
height: 100px;
}
.flip-container, .front, .back {
margin: 0 auto;
width: 500px;
height: 427px;
}
.flipper{
margin-top: 50px;
height: 325px;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
transition: 1.5s;
transform-style: preserve-3d;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
}
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
@keyframes test {
0{
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform: rotateY(0);
}
100%
{
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}
}
/*
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
*/
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<title>School Calendar</title>
<body>
<div class="flip-container">
<div class="flipper blurred-bg tinted">
<div class="front">
<div class="jumbotron" id="card">
<h1>FRONT</h1>
<div class="text-center">
<a onclick="test()" id="validate" href="#" class="btn btn-lg btn-info btn-block" role="button" aria-disabled="true">FLIP</a>
</div>
<script>
function test() {
var sheet = window.document.styleSheets[0]
sheet.insertRule('.flip-container .flipper{animation-name: test; animation-duration: 1.5s; animation-delay: 0.1s; animation-fill-mode: forwards}', sheet.cssRules.length);
//sheet.insertRule('.flip-container .flipper{-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);-o-transform: rotateY(-180deg);transform: rotateY(-180deg);-webkit-transform: rotateY(-180deg);}', sheet.cssRules.length);
}
</script>
</div>
</div>
<div class="back">
<div class="jumbotron" id="card">
<h1>BACK</h1>
</div>
</div>
</div>
</div>
</body>