堆棧內存溢出
  簡體   English   中英

“翻頁卡” CSS動畫無法在IE Edge中運行

[英]“Flip Card” CSS Animation no working in IE Edge

 原文  2015-03-31 06:18:34  4   1    css/ html5/ css3/ internet-explorer/ css-animations

問題描述

我有這個動畫在Firefox，Chrome和Safari中工作。 我希望它能在IE（IE11，希望是10）中工作。 某些代碼是特定於IE / MS的，以嘗試完成此工作，但IE可能不支持所有代碼。 這是一個嘗試。 我將不勝感激任何指向解決方案的指示。 即使是與此不同或使用javascript的人（盡管希望它不需要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 個解決方案

解決方案1
 0  2015-03-31 18:26:17

這是完全不同的，但是我在IE中使用了一個解決方案。 現在，它可以在Safari中運行。

原始問題的示例在Safari中有效。

因此，對於這兩者，所有現代瀏覽器都提供了一種解決方案。

http://jsfiddle.net/0tggmkbf/ 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 HTML CSS中的卡片翻轉動畫在IE中無法正常工作 IE和Edge中的翻頁卡 CSS動畫無法在IE / Edge中使用 CSS卡翻轉動畫 Card Flip IE 動畫問題 CSS動畫無處不在，但不能在IE和Edge中使用？ CSS動畫在IE11和Edge中不起作用 svg旋轉動畫，css不在ie或edge上工作 CSS卡翻轉動畫后無互動可能 如何使用 CSS 關鍵幀添加翻轉卡 animation？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM