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).
<style>
/*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;
}
</style>
<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://ift.tt/1NC390W" height="150px" width="160px">
</div>
<div class="first back">
<img src="http://ift.tt/1Djea4b" height="150px" width="160px">
</div>
</div>
<div class="third">
<img src="http://ift.tt/1NC3als" 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://ift.tt/1Djea4d" height="150px" width="160px">
</div>
<div class="first back">
<img src="http://ift.tt/1NC3alu" height="150px" width="160px">
</div>
</div>
<div class="third">
<img src="http://ift.tt/1Djea4h" 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://ift.tt/1NC39ha" height="150px" width="160px">
</div>
<div class="first back">
<img src="http://ift.tt/1Dje7Fz" height="150px" width="160px">
</div>
</div>
<div class="third">
<img src="http://ift.tt/1NC39hc" 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://ift.tt/1Djeakz" height="150px" width="160px">
</div>
<div class="first back">
<img src="http://ift.tt/1NC3alw" height="150px" width="160px">
</div>
</div>
<div class="third">
<img src="http://ift.tt/1DjeakB" height="150px" width="160px">
</div>
</div>
</div>
</section>
Aucun commentaire:
Enregistrer un commentaire