IE中的文字过渡动画效果问题

【问题标题】：Text transition animation effect issue in IEIE中的文字过渡动画效果问题
【发布时间】：2015-02-06 10:08:55
【问题描述】：

以下代码在大多数浏览器中显示动画文本，除了运行它但您看不到它的 IE。我可以就如何解决这个问题提供一些指导吗？

请参考此链接查看示例> http://jsfiddle.net/pherrera/posvken7/

这里是代码：

<div class="container">
    <div id="background" class="card">
        <div class="sp-container">
            <div class="sp-content">
                <div class="sp-globe"></div>
                <h3 class="frame-1">message 1</h3>
                <h3 class="frame-2">message 2</h3>
                <h3 class="frame-3">message 3</h3>
                <h3 class="frame-4">Now!</h2>
                <h3 class="frame-5">
                    <span>this</span> <span>is</span> <span>a message</span>
                </h3>
                <a class="sp-circle-link" href="#">again!</a>
            </div>
        </div>
    </div>
</div>

body, html {
    background-color: #282828;
    display: table;
    height: 100%;
    width: 100%;
}

.container {
    display: table-cell;
    vertical-align: middle;
}

.card {
    border-radius: 2px 2px 2px 2px;
    -moz-border-radius: 2px 2px 2px 2px;
    -webkit-border-radius: 2px 2px 2px 2px;
    border: 0px none;
    -webkit-box-shadow: 0px 0px 75px 0px rgba(255, 255, 255, 0.1);
    -moz-box-shadow: 0px 0px 75px 0px rgba(255, 255, 255, 0.1);
    box-shadow: 0px 0px 75px 0px rgba(255, 255, 255, 0.1);
}

#background {
    width: 600px;
    height: 500px;
    margin: 0 auto;
    background: rgba(92, 92, 92, 1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(92, 92, 92, 1)), color-stop(100%, rgba(59, 59, 59, 1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
    background: radial-gradient(ellipse at center, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5c5c5c', endColorstr='#3b3b3b', GradientType=1);
}

a {
    text-decoration: none;
}

h1.main, p.demos {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}

.sp-container {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
    background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
    background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
    background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
}

.sp-content {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    z-index: 1000;
}

.sp-container h3 {
    position: absolute;
    top: 50%;
    line-height: 100px;
    height: 90px;
    margin-top: -50px;
    font-size: 60px;
    width: 100%;
    text-align: center;
    color: transparent;
    -webkit-animation: blurFadeInOut 3s ease-in backwards;
    -moz-animation: blurFadeInOut 3s ease-in backwards;
    -ms-animation: blurFadeInOut 3s ease-in backwards;
    animation: blurFadeInOut 3s ease-in backwards;
}

.sp-container h3.frame-1 {
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -ms-animation-delay: 0s;
    animation-delay: 0s;
}

.sp-container h3.frame-2 {
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
}

.sp-container h3.frame-3 {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}

.sp-container h3.frame-4 {
    font-size: 200px;
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s;
    -ms-animation-delay: 9s;
    animation-delay: 9s;
}

.sp-container h3.frame-5 {
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    animation: none;
    color: transparent;
    text-shadow: 0px 0px 1px #fff;
}

.sp-container h3.frame-5 span {
    -webkit-animation: blurFadeIn 3s ease-in 12s backwards;
    -moz-animation: blurFadeIn 1s ease-in 12s backwards;
    -ms-animation: blurFadeIn 3s ease-in 12s backwards;
    animation: blurFadeIn 3s ease-in 12s backwards;
    color: transparent;
    text-shadow: 0px 0px 1px #fff;
}

.sp-container h3.frame-5 span:nth-child(2) {
    -webkit-animation-delay: 13s;
    -moz-animation-delay: 13s;
    -ms-animation-delay: 13s;
    animation-delay: 13s;
}

.sp-container h3.frame-5 span:nth-child(3) {
    -webkit-animation-delay: 14s;
    -moz-animation-delay: 14s;
    -ms-animation-delay: 14s;
    animation-delay: 14s;
}

.sp-globe {
    position: absolute;
    width: 282px;
    height: 273px;
    left: 50%;
    top: 50%;
    margin: -137px 0 0 -141px;
    -webkit-animation: fadeInBack 3.6s linear 14s backwards;
    -moz-animation: fadeInBack 3.6s linear 14s backwards;
    -ms-animation: fadeInBack 3.6s linear 14s backwards;
    animation: fadeInBack 3.6s linear 14s backwards;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.3;
    -webkit-transform: scale(5);
    -moz-transform: scale(5);
    -o-transform: scale(5);
    -ms-transform: scale(5);
    transform: scale(5);
}

.sp-circle-link {
    position: absolute;
    left: 50%;
    bottom: 100px;
    margin-left: -50px;
    text-align: center;
    line-height: 100px;
    width: 100px;
    height: 100px;
    background: #fff;
    color: #3f1616;
    font-size: 25px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: fadeInRotate 1s linear 16s backwards;
    -moz-animation: fadeInRotate 1s linear 16s backwards;
    -ms-animation: fadeInRotate 1s linear 16s backwards;
    animation: fadeInRotate 1s linear 16s backwards;
    -webkit-transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
}

.sp-circle-link:hover {
    background: #85373b;
    color: #fff;
}
/**/
@-webkit-keyframes blurFadeInOut {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        -webkit-transform: scale(1.3);
    }

    20%, 75% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        -webkit-transform: scale(1);
    }

    100% {
        opacity: 0;
        text-shadow: 0px 0px 50px #fff;
        -webkit-transform: scale(0);
    }
}

@-webkit-keyframes blurFadeIn {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        -webkit-transform: scale(1.3);
    }

    50% {
        opacity: 0.5;
        text-shadow: 0px 0px 10px #fff;
        -webkit-transform: scale(1.1);
    }

    100% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        -webkit-transform: scale(1);
    }
}

@-webkit-keyframes fadeInBack {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
    }

    50% {
        opacity: 0.4;
        -webkit-transform: scale(2);
    }

    100% {
        opacity: 0.2;
        -webkit-transform: scale(5);
    }
}

@-webkit-keyframes fadeInRotate {
    0% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(360deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1) rotate(0deg);
    }
}
/**/
@-moz-keyframes blurFadeInOut {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        -moz-transform: scale(1.3);
    }

    20%, 75% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        -moz-transform: scale(1);
    }

    100% {
        opacity: 0;
        text-shadow: 0px 0px 50px #fff;
        -moz-transform: scale(0);
    }
}

@-moz-keyframes blurFadeIn {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        -moz-transform: scale(1.3);
    }

    100% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        -moz-transform: scale(1);
    }
}

@-moz-keyframes fadeInBack {
    0% {
        opacity: 0;
        -moz-transform: scale(0);
    }

    50% {
        opacity: 0.4;
        -moz-transform: scale(2);
    }

    100% {
        opacity: 0.2;
        -moz-transform: scale(5);
    }
}

@-moz-keyframes fadeInRotate {
    0% {
        opacity: 0;
        -moz-transform: scale(0) rotate(360deg);
    }

    100% {
        opacity: 1;
        -moz-transform: scale(1) rotate(0deg);
    }
}
/**/
@keyframes blurFadeInOut {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        transform: scale(1.3);
    }

    20%, 75% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        text-shadow: 0px 0px 50px #fff;
        transform: scale(0);
    }
}

@keyframes blurFadeIn {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 40px #fff;
        transform: scale(1.3);
    }

    50% {
        opacity: 0.5;
        text-shadow: 0px 0px 10px #fff;
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        text-shadow: 0px 0px 1px #fff;
        transform: scale(1);
    }
}

@keyframes fadeInBack {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 0.4;
        transform: scale(2);
    }

    100% {
        opacity: 0.2;
        transform: scale(5);
    }
}

@keyframes fadeInRotate {
    0% {
        opacity: 0;
        transform: scale(0) rotate(360deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

【问题讨论】：

  • 似乎是这个答案的副本：stackoverflow.com/questions/25850100/css-blur-in-ie-11
  • 好吧，IE 8/9 不支持关键帧，所以你可以忘记它们！ IE 8 不支持转换，但 IE 9+ 支持。 IE 8/9 也不支持文本阴影。 IE 的悲伤时光（就像曾经有过快乐的时光......）
  • 绝对不是那个问题的重复，因为这没有使用模糊过滤器。
  • 我正在 IE-11 中进行测试。我想知道是否有办法在 IE 上显示一些东西。即使没有动画，我也想在 IE 上展示一些东西。非常感谢

标签： css internet-explorer css-animations


【解决方案1】：

IE7 支持 CSS 动画、子选择器和渐变，请查看 caniuse.com 了解每个浏览器/版本支持的 CSS。

另外，IE 根本不支持滤镜和动画。

哦，它在 IE 9 中崩溃了，它可以帮助任何人。

【讨论】：

  • Internet Explorer 多年来一直支持动画。事实上，它支持它们不带前缀，并且早在 Chrome 之前就支持伪元素。您可能会将现代版本的 IE 与旧版本的 IE 混淆；）
【解决方案2】：

基本上，现代版本的 IE 会遇到的唯一问题是在透明元素上渲染阴影。这是一个已知的限制，有几个怪癖。如果模糊半径为0，则文本将可见。否则，要投射阴影，文本的颜色需要有点不透明。

在玩了一段时间后，我想出了一个潜在的解决方法，在您的演示中应该足够了。由于文本阴影已经起作用，并且能够从偏移量定位，您可以将元素本身定位在相反的方向：

.blur {
    top: -100vh;
    position: relative;
    text-shadow: 0 100vh 1em #000;
}

为了只显示模糊文本，我们将阴影向下推100vh。这会将其设置为离屏，因此我们还将投射阴影的元素推 up 100vh，这会将模糊文本恢复到其宿主元素的原始位置。

在这种情况下，我使用的是垂直偏移，但您可能会发现这对于某些情况并不理想。例如，您的文档更高，而您的模糊区域更向下，您可能会发现横向偏移更好。在这种情况下，您可以通过隐藏横向溢出来避免不必要的滚动条：

body {
    overflow-x: hidden;
}

我编写了一个演示小提琴，显示结果online here。在构建它时，我确实注意到 Chrome 目前有一个布局问题，这在调整大小时很明显 - 似乎vm（可能是vh）不与当前视口尺寸保持同步.如果这会给您的项目带来问题，您可能需要使用另一个单元。

也可以将此效果应用于延迟出现的作品。我冒昧地创建了a second fiddle 来展示这种效果。标记非常直接，类似于您已有的标记：

<h1>
    <span>Hello</span> 
    <span>World</span>
</h1>
<h2>
    <span>Additional</span>
    <span>Information</span>
    <span>Provided</span>
    <span>Eventually</span>
</h2>

CSS 完成了几件事：

  1. 将&lt;body&gt; 中的文本居中（可能仅限于标题）
  2. 在屏幕外定位元素，在屏幕上放置文本阴影
  3. 以各种延迟为 text-shadow 属性设置动画以显示嵌套的 &lt;span&gt; 元素
body {
    text-align: center;
    font-family: "Segoe UI";
}

span {
    opacity: 0;
    vertical-align: middle;
    text-shadow: 100vw 0 3em #000;
    position: relative; left: -100vw;
    animation: fadein 2s ease-in-out forwards;
}

/* Controls 'Hello' and 'World' */
h1 span:nth-child(1) { animation-delay: 1s; }
h1 span:nth-child(2) { animation-delay: 2s; }

/* Controls 'Stack Overflow is Awesome */
h2 span { animation-delay: 3s; }

@keyframes fadein {
    to { 
        opacity: 1;
        text-shadow: 100vw 0 0 #000;
    }
}

最终结果是平滑、跨浏览器、模糊效果：

【讨论】：

  • 感谢您，这似乎是一个好方法。但是，我不知道如何处理它或将它放在哪里，这是由于我缺乏 CSS 知识。我要在所有浏览器中实现以下目标：此处有一些文本 A --> 转换（如果可能） --> 此处有一些文本 B（替换文本 A） --> 停止。
  • @phg 您可以在原始答案中使用 animation-delay 方法。是否编写了原始 CSS？
  • 非常感谢乔纳森的意见，非常感谢。不幸的是，我不知道如何将它整合到我已经拥有的东西中。我似乎没有在任何地方找到我需要的东西，我相信这对于了解 CSS 甚至 JS 的人来说相对容易。 我想显示一些文本几秒钟，然后将其淡出或任何其他效果（如果有），然后显示另一个文本替换以前的文本并将其停在那里。 这对于所有浏览器来说都很难实现吗?
【解决方案3】：

完成：

在网络上进行了一些挖掘之后，我设法添加了一些代码，使其可以在 IE（至少 IE 11）上运行。

我几乎不得不添加和修改这些行：

-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=0)”;
filter: alpha(opacity=0);
zoom: 1; filter: alpha(opacity=0);

请看这里：http://jsfiddle.net/posvken7/8/

【讨论】：

    猜你喜欢
    • 2017-06-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-11-12
    • 1970-01-01
    • 1970-01-01
    • 2011-12-17
    • 2020-10-14
    相关资源
    最近更新 更多
    热门标签
    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