“Flip Card” CSS Animation no working in IE Edge
Question
I have this animation working in Firefox, Chrome, and Safari. I want it to work in IE (IE11 and hopefully 10). Some of this code is IE/MS specific in an attempt to get this work, not all it may be supported by IE. It was an attempt. I would appreciate any pointers towards a solution. Even one that diverges from this or uses javascript (though hopefully doesn't require jquery).
http://jsfiddle.net/raueqe8q/1/
/*Animations*/ @-o-keyframes flipInnerContainer { 0% { -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -o-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -o-transform: rotateY(180deg); transform: rotateY(180deg); } } @-ms-keyframes flipInnerContainer { 0% { -ms-transform: perspective(1000px) rotateY(0deg); transform: rotateY(0deg); } 50% { -ms-transform: perspective(1000px) rotateY(180deg); transform: rotateY(180deg); } 100% { -ms-transform: perspective(1000px) rotateY(180deg); transform: rotateY(180deg); } } @-moz-keyframes flipInnerContainer { 0% { -moz-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -moz-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -moz-transform: rotateY(180deg); transform: rotateY(180deg); } } @-webkit-keyframes flipInnerContainer { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } } @keyframes flipInnerContainer { 0% { transform: perspective(1000px) rotateY(0deg); } 50% { transform: perspective(1000px) rotateY(180deg); } 100% { transform: perspective(1000px) rotateY(180deg); } } @-o-keyframes flipOuterContainer { 0% { -o-transform: rotateY(0deg); transform: rotateY(0deg); } 25% { -o-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -o-transform: rotateY(180deg); transform: rotateY(180deg); } } @-ms-keyframes flipOuterContainer { 0% { -ms-transform: perspective(1000px) rotateY(0deg); transform: rotateY(0deg); } 25% { -ms-transform: perspective(1000px) rotateY(180deg); transform: rotateY(180deg); } 100% { -ms-transform: perspective(1000px) rotateY(180deg); transform: rotateY(180deg); } } @-moz-keyframes flipOuterContainer { 0% { -moz-transform: rotateY(0deg); transform: rotateY(0deg); } 25% { -moz-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -moz-transform: rotateY(180deg); transform: rotateY(180deg); } } @-webkit-keyframes flipOuterContainer { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 25% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } } @keyframes flipOuterContainer { 0% { transform: perspective(1000px) rotateY(0deg); } 25% { transform: perspective(1000px) rotateY(180deg); } 100% { transform: perspective(1000px) rotateY(180deg); } } /* Safari was not keeping its end state so this fixes that and does not adversely effect other webkit browsers */ @-webkit-keyframes disapear { 0% { opacity: 1; } 1% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes disapear { 0% { opacity: 1; } 1% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes appear { 0% { opacity: 0; } 1% { opacity: 1; } 100% { opacity: 1; } } /*all*/ .adbox { margin: 20px; background: #000000; position: relative; z-index: 1; } #bg-exit { background-color: rgba(255, 255, 255, 0); cursor: pointer; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; } .container { -moz-perspective: 1000px; -webkit-perspective: 1000px; perspective: 1000px; } .container-one, .container-two, .container-three, .container-four, .threehundred-one, .threehundred-two, .threehundred-three, .threehundred-four, .seventwentyeight-one, .seventwentyeight-two, .seventwentyeight-three, .seventwentyeight-four { position: absolute; width: 100%; height: 100%; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .first { position: absolute; width: 100%; height: 100%; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: visible; backface-visibility: hidden; } .first.firstonly { -webkit-animation: disapear .5s linear 10s 1 forwards; } .first.back { position: absolute; -o-transform: rotateY(180deg); -ms-transform: perspective(1000px) rotateY(180deg); -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); box-sizing: border-box; } .back { -ms-animation: appear .5s linear 3.5s 1 forwards; } .third { position: absolute; width: 100%; height: 100%; top: 0; left: 0; box-sizing: border-box; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -o-transform: rotateY(180deg); -ms-transform: perspective(1000px) rotateY(180deg); -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .tile { width: 100%; height: 100%; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .tile.one { -moz-animation: flipInnerContainer 2s linear 2s 1 forwards; -o-animation: flipInnerContainer 2s linear 2s 1 forwards; -webkit-animation: flipInnerContainer 2s linear 2s 1 forwards; animation: flipInnerContainer 2s linear 2s 1 forwards; } .tile.two { -moz-animation: flipInnerContainer 2s linear 4s 1 forwards; -o-animation: flipInnerContainer 2s linear 4s 1 forwards; -webkit-animation: flipInnerContainer 2s linear 4s 1 forwards; animation: flipInnerContainer 2s linear 4s 1 forwards; } .tile.three { -moz-animation: flipInnerContainer 2s linear 6s 1 forwards; -o-animation: flipInnerContainer 2s linear 6s 1 forwards; -webkit-animation: flipInnerContainer 2s linear 6s 1 forwards; animation: flipInnerContainer 2s linear 6s 1 forwards; } .tile.four { -moz-animation: flipInnerContainer 2s linear 8s 1 forwards; -o-animation: flipInnerContainer 2s linear 8s 1 forwards; -webkit-animation: flipInnerContainer 2s linear 8s 1 forwards; animation: flipInnerContainer 2s linear 8s 1 forwards; } /*160x600*/ .onesixty { width: 160px; height: 600px; } .onesixty .container { width: 160px; height: 150px; } .container-one { -moz-animation: flipOuterContainer 2s linear 11.25s 1 forwards; -o-animation: flipOuterContainer 2s linear 11.25s 1 forwards; -webkit-animation: flipOuterContainer 2s linear 11.25s 1 forwards; animation: flipOuterContainer 2s linear 11.25s 1 forwards; } .container-two { -moz-animation: flipOuterContainer 2s linear 11.75s 1 forwards; -o-animation: flipOuterContainer 2s linear 11.75s 1 forwards; -webkit-animation: flipOuterContainer 2s linear 11.75s 1 forwards; animation: flipOuterContainer 2s linear 11.75s 1 forwards; } .container-three { -moz-animation: flipOuterContainer 2s linear 11s 1 forwards; -o-animation: flipOuterContainer 2s linear 11s 1 forwards; -webkit-animation: flipOuterContainer 2s linear 11s 1 forwards; animation: flipOuterContainer 2s linear 11s 1 forwards; } .container-four { -moz-animation: flipOuterContainer 2s linear 11.5s 1 forwards; -o-animation: flipOuterContainer 2s linear 11.5s 1 forwards; -webkit-animation: flipOuterContainer 2s linear 11.5s 1 forwards; animation: flipOuterContainer 2s linear 11.5s 1 forwards; }
<section class="onesixty adbox"> <div id="bg-exit"> </div> <div class="container"> <div class="container-three"> <div class="tile three"> <div class="first firstonly"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/A-1.jpg" height="150px" width="160px"> </div> <div class="first back"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/A-2.jpg" height="150px" width="160px"> </div> </div> <div class="third"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/A-3.jpg" height="150px" width="160px"> </div> </div> </div> <div class="container"> <div class="container-one"> <div class="tile one"> <div class="first firstonly"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/B-1.jpg" height="150px" width="160px"> </div> <div class="first back"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/B-2.jpg" height="150px" width="160px"> </div> </div> <div class="third"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/B-3.jpg" height="150px" width="160px"> </div> </div> </div> <div class="container"> <div class="container-four"> <div class="tile four"> <div class="first firstonly"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/C-1.jpg" height="150px" width="160px"> </div> <div class="first back"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/C-2.jpg" height="150px" width="160px"> </div> </div> <div class="third"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/C-3.jpg" height="150px" width="160px"> </div> </div> </div> <div class="container"> <div class="container-two"> <div class="tile two"> <div class="first firstonly"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/D-1.jpg" height="150px" width="160px"> </div> <div class="first back"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/D-2.jpg" height="150px" width="160px"> </div> </div> <div class="third"> <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/D-3.jpg" height="150px" width="160px"> </div> </div> </div> </section>
1 answers
solution1
0 2015-03-31 18:26:17
This is pretty different but a solution I got working in IE. This now works in everything by Safari.
The original question's example does work in Safari.
So with the two there is a solution in all modern browsers.
<script type="">
function flip1(){
var id='container1';
var myClassName=" flip"; //must keep a space before class name
var d;
d=document.getElementById(id);
d.className=d.className.replace(myClassName,""); // first remove the class name if that already exists
d.className = d.className + myClassName; // adding new class name
}
function flip2(){
var id='container2';
var myClassName=" flip"; //must keep a space before class name
var d;
d=document.getElementById(id);
d.className=d.className.replace(myClassName,""); // first remove the class name if that already exists
d.className = d.className + myClassName; // adding new class name
}
function flip3(){
var id='container3';
var myClassName=" flip"; //must keep a space before class name
var d;
d=document.getElementById(id);
d.className=d.className.replace(myClassName,""); // first remove the class name if that already exists
d.className = d.className + myClassName; // adding new class name
}
function flip4(){
var id='container4';
var myClassName=" flip"; //must keep a space before class name
var d;
d=document.getElementById(id);
d.className=d.className.replace(myClassName,""); // first remove the class name if that already exists
d.className = d.className + myClassName; // adding new class name
}
//My Attempt at the 3rd flip, not working
function finalFlip1(){
var imgElement = document.getElementById('A1'); //find the image
imgElement.src = "http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/B-3.jpg";
var id='container1';
var myClassName=" flip"; //must keep a space before class name
var d;
d=document.getElementById(id);
d.className=d.className.replace(myClassName,"");
}
function finalFlip2(){
var imgElement = document.getElementById('B1'); //find the image
imgElement.src = "http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/D-3.jpg";
var id='container2';
var myClassName=" flip"; //must keep a space before class name
var d;
d=document.getElementById(id);
d.className=d.className.replace(myClassName,"");
}
function finalFlip3(){
var imgElement = document.getElementById('C1'); //find the image
imgElement.src = "http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/A-3.jpg";
var id='container3';
var myClassName=" flip"; //must keep a space before class name
var d;
d=document.getElementById(id);
d.className=d.className.replace(myClassName,"");
}
function finalFlip4(){
var imgElement = document.getElementById('D1'); //find the image
imgElement.src = "http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/C-3.jpg";
var id='container4';
var myClassName=" flip"; //must keep a space before class name
var d;
d=document.getElementById(id);
d.className=d.className.replace(myClassName,"");
}
window.setTimeout(flip1,2000);
window.setTimeout(flip2,4000);
window.setTimeout(flip3,6000);
window.setTimeout(flip4,8000);
window.setTimeout(finalFlip1,11250);
window.setTimeout(finalFlip2,11750);
window.setTimeout(finalFlip3,11000);
window.setTimeout(finalFlip4,11500);
</script>
<style>
/* entire container, keeps perspective */
.container {
perspective: 1000;
transform-style: preserve-3d;
}
/* UPDATED! flip the pane when this class is added */
.container.flip .back {
transform: rotateY(0deg);
}
.container.flip .firstonly {
transform: rotateY(180deg);
}
.container, .firstonly, .back {
width: 160px;
height: 150px;
}
/* flip speed goes here */
.container-one,.container-two,.container-three,.container-four {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.firstonly, .back {
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
/* UPDATED! firstonly pane, placed above back */
.firstonly {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(-180deg);
}
.third{
display:none;
}
</style>
<section class="onesixty adbox">
<div id="bg-exit"></div>
<div class="container" id="container3">
<div class="container-three">
<div class="tile three">
<div class="first firstonly">
<img id="C1" src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/A-1.jpg" height="150px" width="160px" />
</div>
<div class="first back">
<img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/A-2.jpg" height="150px" width="160px">
</div>
</div>
</div>
</div>
<div class="container" id="container1">
<div class="container-one">
<div class="tile one">
<div class="first firstonly">
<img id="A1" src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/B-1.jpg" height="150px" width="160px">
</div>
<div class="first back">
<img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/B-2.jpg" height="150px" width="160px">
</div>
</div>
</div>
</div>
<div class="container" id="container4">
<div class="container-four">
<div class="tile four">
<div class="first firstonly">
<img ID ="D1" src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/C-1.jpg" height="150px" width="160px">
</div>
<div class="first back">
<img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/C-2.jpg" height="150px" width="160px">
</div>
</div>
</div>
</div>
<div class="container" id="container2">
<div class="container-two">
<div class="tile two">
<div class="first firstonly">
<img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/D-1.jpg" height="150px" width="160px" ID="B1">
</div>
<div class="first back">
<img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/D-2.jpg" height="150px" width="160px">
</div>
</div>
</div>
</div>
</section>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Card Flip animation in HTML CSS not working in IE
Flip card in IE and Edge
CSS Animation not working in IE/Edge
CSS card flip animation
Card Flip IE animation issue
CSS animation working everywhere but not in IE and edge?
CSS animation not working in IE11 and Edge
Svg rotation animation with css not working on ie or edge
No interaction posible after css card flip animation
How to add flip card animation with CSS keyframes?
Related Tags