ie下keyframes动画不支持background-image的变化

川长思鸟来 2022-12-30 13:38 161阅读 0赞

> 如题，ie下keyframes动画不支持background-image改变的动画，用background-position会有感觉衔接不顺的问题

就先用opacity 和 position来实现(如要兼容低版本ie,就加上filter:alpha写法)。

<div class="wt-posrel wt-inlineblock ht-t26">
    	   <button type="button" class="waver-red-white">
    	       1
    	   </button>
    	   <button type="button" class="waver-red-white waver-red-white-sec">
    	       2
    	   </button>
    </div>

@keyframes waverAnimation{
        50%{opacity: 0;}
        100%{opacity:1;}
    }
    .wt-posrel{
        position:relative;
    }
    .waver-red-white{
        padding: 0 15px 0 29px;
        height: 26px;
        line-height: 24px;
        background-color: #fff;
        background-image:url(../images/cg-icog/suo_sp_03.png);
        background-repeat: no-repeat;
        background-position: 9px 0;
        color: #e01116;
        border: 1px solid #e01116;
        border-radius: 13px;
        font-size: 15px;
        text-align: center;
    }
    .waver-red-white-sec{
        background-color:#e01116;
        background-position: 9px -25px;
        color: #fff;
        opacity: 1;
        animation: waverAnimation 1.3s infinite;
        position: absolute;
        left: 0;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，161人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3 动画@keyframes

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。 ![Center][] animatio

青旅半醒/ 2024年02月17日 20:59/ 0 赞/ 34 阅读

相关 CSS3-@keyframes动画

在 CSS3 中可以通过 `@keyframes` 来创建动画，由当前样式逐渐变为新样式的动画效果。创建动画的语法就像创建 JS 函数函数一样，动画需要指定动画的名称，使用

左手的ㄟ右手/ 2023年07月12日 11:51/ 0 赞/ 7 阅读

相关 css3 @keyframes 动画

使一个元素逐渐向下移动 @keyframes mymove { from { top:0px;} to { top:200px;}

我会带着你远行/ 2023年01月03日 04:26/ 0 赞/ 171 阅读

相关 ie下keyframes动画不支持background-image的变化

> 如题，ie下keyframes动画不支持background-image改变的动画，用background-position会有感觉衔接不顺的问题就先用opacity

川长思鸟来/ 2022年12月30日 13:38/ 0 赞/ 162 阅读

相关 IE11的变化

1.navigator.userAgent中不再包含“MSIE”关键字 2.用javascript的判断是否是IE11的方法是： var isIE11 = (sUserAge

左手的ㄟ右手/ 2022年09月18日 09:57/ 0 赞/ 213 阅读

相关 javascirpt函数在IE下不支持的小结

// ============ isArray ===============// // isArray function isArray(

系统管理员/ 2022年08月07日 03:45/ 0 赞/ 288 阅读

相关解决IE不支持placeholder

一.解决方法 / jQuery placeholder, fix for IE6,7,8,9 / var JPlaceHolder =

待我称王封你为后i/ 2022年05月14日 01:37/ 0 赞/ 661 阅读

相关解决IE8下不支持border-radius的问题

最近做了一个项目，是让兼容IE8浏览器的，遇到了IE8不支持border-radius和box-shadow的问题，在网上找了解决方案，主要是借助于PIE.htc，具体的过程，

蔚落/ 2022年05月10日 00:26/ 0 赞/ 389 阅读

相关 vue过渡动画transition、关键帧（keyframes）动画的实现

> 要想让动画发生，还得要有元素状态的改变。如何改变元素状态呢，当然就是在css中给这个元素定义一个类（:hover等伪类也可以），或者控制元素的显示隐藏，也可改变元素的状态，

拼搏现实的明天。/ 2022年04月04日 13:39/ 0 赞/ 944 阅读

相关 IE不支持remove()方法

前言今天在做项目的过程中遇到remove在IE浏览器不支持，通过查看其它博文，发现IE只支持removeNode方法。因此得到解决，将其整理成博文，希望可以帮到更多人。

叁歲伎倆/ 2022年03月29日 17:19/ 0 赞/ 692 阅读