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

川长思鸟来 2022-12-30 13:38 143阅读 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 条评论，143人围观）

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

相关阅读

相关 css3 @keyframes 动画

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

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

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

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

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

相关 IE11的变化

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

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

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

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

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

相关 CSS@keyframes做一个简单动画

1. 动画描述：点击动画图片会有两幅图片分别从左边右边缓缓移出来，鼠标离开动画，图片随之消失，伴随着不断切换的背景图片。 2. <!DOCTYPE html>

古城微笑少年丶/ 2022年05月17日 00:37/ 0 赞/ 205 阅读

相关解决IE不支持placeholder

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

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

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

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

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

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

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

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

相关 IE不支持remove()方法

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

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

相关 Animations动画和Keyframes关键帧

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

一时失言乱红尘/ 2021年10月01日 02:56/ 0 赞/ 437 阅读