CSS 动画在 IE 中不起作用（所有版本）

【问题标题】：CSS Animation not working in IE (All versions)CSS 动画在 IE 中不起作用（所有版本）
【发布时间】：2015-04-13 17:07:33
【问题描述】：

我有 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 无法处理的问题吗？

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

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

【问题讨论】：

  • 对我来说在 IE 11 中看起来不错。
  • 现在我明白了，我以为你在说照片。
  • 我仍然看不到任何区别，但我不得不禁用我在 IE 上安装的跟踪保护列表 (TPL)。 TPL 阻止从“flashtalking.com”下载脚本。

标签： html css internet-explorer animation


【解决方案1】：

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

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

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

【讨论】：

  • 这不是解决方案，因为 IE 10+（这是唯一支持 CSS 动画的版本）支持无前缀的关键帧动画。
  • @JosiahKeller 你有什么建议？
猜你喜欢
  • 1970-01-01
  • 2018-04-06
  • 2014-12-23
  • 1970-01-01
  • 1970-01-01
  • 2012-10-27
  • 1970-01-01
  • 2014-02-28
  • 2015-06-04
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode