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;
    }
    

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

     

      

  • 相关阅读:
    事务隔离级别
    手机摄影之生活拍照技巧
    html.unescape(s)
    正则表达式编译和DOTALL小结
    重试模块==>retrying
    js逆向==>js2py
    mysql索引设计原则
    Django请求与响应
    Linux常用命令
    C++11 auto_ptr 的问题
  • 原文地址:https://www.cnblogs.com/mayiaction/p/10718020.html
Copyright © 2011-2022 走看看