zoukankan      html  css  js  c++  java
  • 解决不同浏览器兼容性不一致导致css的animation不起效

    最近项目中,需要把APP的纯html5的项目显示在一个移动的广告屏上边,广告屏是基于安卓系统的,浏览器不清楚什么版本,直接使用css的animation是不支持的。

    有一个页面是通过animation实现页面的图片的跳动,结果浏览器不支持,刚开始使用js解决(结果js解决由于水平不够导致效果不好,而且还会弹出白色的块,电脑浏览器都不会出现这个,就这个广告屏出现,真的恶心)

    无奈之下,只能让浏览器去兼容css的animation。

    一开始页面的css代码是这样的

    @keyframes rotate {
        0%{
            transform: translateY(0);
        }
        25%{
            transform: translateY(-10px);
        }
        50%{
            transform: translateY(-20px);
        }
        75%{
            transform: translateY(-10px);
        }
        100%{
            transform: translateY(0);
        }
    }
    .active{
        animation:rotate 1s linear infinite;
    }
    

     这段代码就是让图片不停地上下跳动跳动,有兴趣的可以复制下来找张图片玩玩,不能兼容项目需要的浏览器,需要修改为

    @-webkit-keyframes  rotate {
    	0%{
            -webkit-transform: translateY(0);
        }
        25%{
            -webkit-transform: translateY(-2vmin);
        }
        50%{
            -webkit-transform: translateY(-4vmin);
        }
        75%{
            -webkit-transform: translateY(-2vmin);
        }
        100%{
            -webkit-transform: translateY(0);
        }
    }
    @-o-keyframes rotate {
    	0%{
            -webkit-transform: translateY(0);
        }
        25%{
            -webkit-transform: translateY(-2vmin);
        }
        50%{
            -webkit-transform: translateY(-4vmin);
        }
        75%{
            -webkit-transform: translateY(-2vmin);
        }
        100%{
            -webkit-transform: translateY(0);
        }
    }
    @-moz-keyframes rotate {
    	0%{
            -webkit-transform: translateY(0);
        }
        25%{
            -webkit-transform: translateY(-2vmin);
        }
        50%{
            -webkit-transform: translateY(-4vmin);
        }
        75%{
            -webkit-transform: translateY(-2vmin);
        }
        100%{
            -webkit-transform: translateY(0);
        }
    }
    @keyframes rotate {
    	0%{
            -webkit-transform: translateY(0);
        }
        25%{
            -webkit-transform: translateY(-2vmin);
        }
        50%{ 
            -webkit-transform: translateY(-4vmin);
        }
        75%{
            -webkit-transform: translateY(-2vmin);
        }
        100%{
            -webkit-transform: translateY(0);
        }
    }
     
    .active{
        -webkit-animation:rotate 1s linear infinite;
        -o-animation:rotate 1s linear infinite;
        -moz-animation:rotate 1s linear infinite;
        animation:rotate 1s linear infinite;
    }
    

      代码有点长(动画的代码多),就是为了处理兼容性问题。

     

      

  • 相关阅读:
    bzoj千题计划174:bzoj1800: [Ahoi2009]fly 飞行棋
    bzoj千题计划173:bzoj1257: [CQOI2007]余数之和sum
    bzoj千题计划172:bzoj1192: [HNOI2006]鬼谷子的钱袋
    bzoj千题计划171:bzoj2456: mode
    bzoj千题计划170:bzoj1968: [Ahoi2005]COMMON 约数研究
    bzoj千题计划169:bzoj2463: [中山市选2009]谁能赢呢?
    bzoj千题计划168:bzoj3513: [MUTC2013]idiots
    oracle 11g RAC 的一些基本概念(四)
    fdisk用法(转载)
    Oracle 11g 新特性 -- Oracle Restart 说明(转载)
  • 原文地址:https://www.cnblogs.com/mayiaction/p/10718020.html
Copyright © 2011-2022 走看看