Question

我有4帧副本淡入淡出。它们在除IE之外的所有浏览器上都能正常工作。

HTML

    <body>
    <div class="background">
        <!--[if lt IE 11]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <div id="banner">
            <div class="elements">
                <div class="logo"></div>

                        <div class="frame" id="frame-1"></div>
                        <div class="frame" id="frame-2"></div>
                        <div class="frame" id="tick-1"></div>
                        <div class="frame" id="tick-2"></div>
                        <div class="frame" id="frame-3"></div>                      
                        <div class="frame" id="frame-4"></div>
                        <div class="frame" id="medium"></div>
                        <div class="frame" id="small"></div>
                        <div class="frame" id="frame-5">
                            <img src="styles/card.png" class="card"/>
                        </div>
                        <div class="frame" id="frame-6">
                            <img src="styles/cta.png" class="cta"/>
                        </div>




                    <div class="faces">
                            <div class="front-1">
                                <img src="images/face-01.jpg">
                            </div>
                            <div class="back-1">
                                <img src="images/face-02.jpg">
                            </div> 
                            <div class="front-2">
                                <img src="images/face-03.jpg">
                            </div>
                            <div class="back-2">
                                <img src="images/face-04.jpg">
                            </div> 

                            <div class="front-3">
                                <img src="images/face-17.jpg">
                            </div>
                            <div class="back-3">
                                <img src="images/face-06.jpg">
                            </div> 
                            <div class="front-4">
                                <img src="images/face-07.jpg">
                            </div>
                            <div class="front-5">
                               <img src="images/face-09.jpg">
                            </div>


                            <div class="front-6">
                                <img src="images/face-11.jpg">
                            </div>


                            <div class="front-7">
                                <img src="images/face-13.jpg">
                            </div>

                      </div>

              </div>
          </div>

</div>
</body>
</html>

@-moz-keyframes spin2 { 100% {opacity:1; -moz-transform: rotateY(180deg); } }
@-webkit-keyframes spin2 { 100% {opacity:1; -webkit-transform:rotateY(-180deg); -webkit-transform-origin:100% 0 0; transform-origin:100% 0 0; } }
@keyframes spin2 { 100% {opacity:1; transform:rotateY(-180deg); -webkit-transform-origin:100% 0 0; transform-origin:100% 0 0; } }

@-moz-keyframes spin3 { 100% { opacity:1; transform:rotateX(-180deg); -webkit-transform-origin:0 100% 0; transform-origin:0 100% 0; } }
@-webkit-keyframes spin3 { 100% { opacity:1; -webkit-transform:rotateX(-180deg); -webkit-transform-origin:0 100% 0; transform-origin:0 100% 0; } }
@keyframes spin3 { 100% { opacity:1; transform:rotateX(-180deg); -webkit-transform-origin:0 100% 0; transform-origin: 0 100% 0; } }

@-moz-keyframes spin5 { 100% { opacity:1; transform:rotateX(180deg); -webkit-transform-origin: 0 0 100% 0; transform-origin:100% 0 0 } }
@-webkit-keyframes spin5 { 100% { opacity:1; -webkit-transform:rotateX(180deg); -webkit-transform-origin:0 0 100% 0; transform-origin:0 0 100% 0; } }
@keyframes spin5 { 100% { opacity:1; transform:rotateX(180deg); -webkit-transform-origin: 0 0 100% 0  ; transform-origin: 0 0 100% 0; } } 


@-moz-keyframes spin4 { 100% {opacity:1; -moz-transform: rotateY(180deg); } }
@-webkit-keyframes spin4 { 100% {opacity:1; -webkit-transform:rotateY(180deg); -webkit-transform-origin: 0 100% 0; transform-origin:0 100% 0; } }
@keyframes spin4 { 100% {opacity:1; transform:rotateY(180deg); -webkit-transform-origin:100% 0 0; transform-origin:0 100% 0; } }



.faces {
  -webkit-animation:faces-end 0.5s 16s linear forwards;
  -moz-animation:faces-end 0.5s 16s linear forwards;
  animation:faces-end 0.5s 16s linear forwards; 
}


.frame#frame-1 {
  opacity: 1 \9; /*just in case ie*/

  -webkit-animation: fadein 0.5s 0.1s 1 linear forwards, fadeout 0.5s 5s 1 linear forwards;
  -moz-animation: fadein 0.5s 0.1s 1 linear forwards, fadeout 0.5s 5s 1 linear forwards;
  -o-animation: fadein 0.5s 0.1s 1 linear forwards, fadeout 0.5s 5s 1 linear forwards;
  animation: fadein 0.5s 0.1s 1 linear forwards, fadeout 0.5s 5s 1 linear forwards;

  font-family:'barclaycard_co_ltregular',verdana,sans-serif;
}

.frame#frame-2 {
  opacity: 1 \9; /*just in case ie*/

  -webkit-animation: fadein 0.5s 5.5s 1 linear forwards, fadeout 0.5s 10.5s 1 linear forwards;
  -moz-animation: fadein 0.5s 5.5s 1 linear forwards, fadeout 0.5s 10.5s 1 linear forwards;
  -o-animation: fadein 0.5s 5.5s 1 linear forwards, fadeout 0.5s 10.5s 1 linear forwards;
  animation: fadein 0.5s 5.5s 1 linear forwards, fadeout 0.5s 10.5s 1 linear forwards;

  font-family:'barclaycard_co_ltregular',verdana,sans-serif;
}

.frame#tick-1 {
  opacity: 1 \9; /*just in case ie*/

  -webkit-animation: fadein 0.5s 5.5s 1 linear forwards, fadeout 0.5s 10.5s 1 linear forwards;
  -moz-animation: fadein 0.5s 5.5s 1 linear forwards, fadeout 0.5s 10.5s 1 linear forwards;
  -o-animation: fadein 0.5s 5.5s 1 linear forwards, fadeout 0.5s 10.5s 1 linear forwards;
  animation: fadein 0.5s 5.5s 1 linear forwards, fadeout 0.5s 10.5s 1 linear forwards;

  font-family:'barclaycard_co_ltregular',verdana,sans-serif;
}

.frame#tick-2 {
  opacity: 1 \9; /*just in case ie*/

  -webkit-animation: fadein 0.5s 11s 1 linear forwards, fadeout 1s 16s 1 linear forwards;
  -moz-animation: fadein 0.5s 11s 1 linear forwards, fadeout 0.5s 16s 1 linear forwards;
  -o-animation: fadein 0.5s 11s 1 linear forwards, fadeout 0.5s 16s 1 linear forwards;
  animation: fadein 0.5s 11s 1 linear forwards, fadeout 0.5s 16s 1 linear forwards;

  font-family:'barclaycard_co_ltregular',verdana,sans-serif;

}

.frame#frame-3 {
  opacity: 1 \9; /*just in case ie*/

  -webkit-animation: fadein 0.5s 11s 1 linear forwards, fadeout 1s 16s 1 linear forwards;
  -moz-animation: fadein 0.5s 11s 1 linear forwards, fadeout 0.5s 16s 1 linear forwards;
  -o-animation: fadein 0.5s 11s 1 linear forwards, fadeout 0.5s 16s 1 linear forwards;
  animation: fadein 0.5s 11s 1 linear forwards, fadeout 0.5s 16s 1 linear forwards;

  font-family:'barclaycard_co_ltregular',verdana,sans-serif;
}

看不出CSS有什么问题，这只是IE无法处理的事情吗？

Answer 1

您需要为动画添加-ms-前缀。

-ms-animation:spin2 0.5s 1.9s linear forwards;

此外，请考虑使用过渡属性而不是关键帧动画，因为它们得到更广泛的支持。

CSS动画无法在IE中运行（所有版本）

1 个答案: