css3 animation 在某些浏览器中特别快 bugfix

今天在一款三星 4.2.2 的 webview 里,出现 animation 特别快的问题,把:

.xxx{
    -webkit-animation: xxx 24s linear infinite;
}

@-webkit-keyframes xxx {
    0% {
        -webkit-transform: translate(0, 0);
    }
    100% {
        -webkit-transform: translate(-800%, 0);
    }
}

修改为:

@-webkit-keyframes xxx {
    0% {
        -webkit-transform: translate(0, 0);
    }
    100% {
        -webkit-transform: translate(-5760px, 0);
    }
}

  

就好了

.xxx 也定义 width 了,但百分比还是出错了,不靠谱

时间: 2024-11-14 12:14:40

css3 animation 在某些浏览器中特别快 bugfix的相关文章

翻译:让网络更快一些——最小化浏览器中的回流(reflow)

关于reflowreflow(英音:[ri:’fl?u] 美音:[ri’flo])在词典中的解释是回流,逆流.而在web应用中,翻译为回流有些牵强.我个人觉得,理解为回炉(重新塑形),似乎更加形象一点.举个例子,页面上节点是以树的形式展现的.假如我使用JavaScript砍掉一个节点,这棵树为了不脱节,肯定要重新梳理一遍,将砍掉的那个断点重新结合起来又形成一颗完整的树,而这个结合梳理过程就是这里的reflow,所谓回流,就是由于某些原因(如修改),要将元素回过头来重新“流”一遍.而本译文的重点就

css3 animation 属性众妙

转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需要了解的同学可先移步 MDN),而是结合实际的开发经验,介绍 css3 animation 属性的一些使用场景及技巧. 1. animation-delay MDN 中的介绍: animation-delay CSS 属性定义动画于何时开始,即从动画应用在元素上到动画开始的这段时间的长度. 该属性值

css3 animation动画对应属性解释

animation Value:     [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode>] [, [<animatio

实现了一个百度首页的彩蛋——CSS3 Animation简介

在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩蛋 简单来说可以分三步: 1.实现一些css动画类,等待调用: 2.设立关键字与动画匹配方法: 3.每当页面加载完成,根据关键字为body添加指定动画类. 查看DEMO:百度搜索彩蛋 CSS3 Animation animation: name duration timing-function de

HTML5+CSS3 animation/keyframe/transform/transition/2D translate/3D translate 学习总结

<h1>HTML5+CSS3 animation/keyframe/transform/transition/2D translate/3D translate 学习总结</h1> <h1>HTML5,animation,keyframe,transform,transition,2D translate,3D translate,CSS3</h1> CSS3 教程 CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. 本教程向您讲解 CS

css3 animation动画技巧

一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更顺畅,css3动画如何做弧线动画,css3动画是否有动画库,css3帧动画如何快速简单……   为了解决这些折磨人的问题,我们今天来分析一下: 首先介绍css3 Animation动画库: http://daneden.github.io/animate.css/ 基本涵盖了我们常见的基础css3动

让你的HTML5&amp;CSS3网站在老IE中也能正常显示的3种方法

起初,IE其实也是一款非常有进取心的浏览器.但经过一段时间的蛰伏后,它已经成为了我们生活中的一道障碍.微软现在又重新开始向其它浏览器发起挑战,但事实情况是,新版的现代IE浏览器一直滞后于谷歌浏览器和火狐浏览器.我们还不得不想办法兼容早期的IE浏览器.下面提到的三种方法能快捷轻松的让你的HTML5&CSS3网站在微软的主要浏览器中也能神奇的运行! htmlshiv.js Remy开发的HTML5shiv工具能利用JavaScript在老式IE里创建main,header,footer等HTML5元

CSS3(animation, trasfrom)总结

CSS3(animation, trasfrom)总结 1. Animation 样式写法: 格式: @-浏览器内核-keyframes 样式名 {} 标准写法(chrome safari不支持 @keyframes  [样式名] { 0% {left: 10px ; top : 20px;} 50% {left: 20px ; top : 30px;} 100% {left: 10px ; top : 20px;} }; Firefox @-mz-keyframes  [样式名] { 0% {

css在各浏览器中的兼容问题

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容