今天在一款三星 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 了,但百分比还是出错了,不靠谱

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

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

    关于reflowreflow(英音:[ri:’fləu] 美音:[ri’flo])在词典中的解释是回流,逆流.而在web应用中,翻译为回流有些牵强.我个人觉得,理解为回炉(重新塑形),似乎更加形象一点 ...

  2. CSS3 animation属性中的steps实现GIF动图(逐帧动画)

    相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...

  3. css3 animation 属性众妙

    转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...

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

    在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩 ...

  5. css3 animation实现风车转动

    项目中经常有用到动画效果,比如Loading.风车转动等等.最简单的办法是使用gif,但是gif在半透明背景下有白边,体验不友好,好在现在可以使用css3的anmiation来实现动画效果,极大的提升 ...

  6. CSS3 Animation Cheat Sheet:实用的 CSS3 动画库

    CSS3 Animation Cheat Sheet 是一组预设的动画库,为您的 Web 项目添加各种很炫的动画.所有你需要做的是添加样式表到你的网站,为你想要添加动画效果的元素应用预制的 CSS 类 ...

  7. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  8. 第四十一课:CSS3 animation详解

    animation是css3的另一个重要的模块,它成型比transition晚,吸取了Flash的关键帧的理念,实用性高. animation是一个复合样式,它可以细分为8个更细的样式. (1)ani ...

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

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml ...

随机推荐

  1. Compiling U-Boot

    To configure and build U-Boot for a target board "cd" to, or copy the source tree to somew ...

  2. [P3613]睡觉困难综合征

    Description: 给定一个n个点的树,每个点有一个操作符号 "&" "|" "^" ,以及一个权值 要求支持以下操作: 1. ...

  3. World Finals 2017爆OJ记

    Day-Inf: 去年China-Final一道数据结构题的FB送我进WF. 今年课表意外地满,好几天都是早上8点一直上课上到晚上9点,作业也相对较多.敝队大约每个星期只能训练一个下午,有时候甚至一整 ...

  4. [P4994]终于结束的起点 (递推)

    终于结束的起点 终于写下句点 终于我们告别 终于我们又回到原点 …… 一个个 OIer 的竞赛生涯总是从一场 NOIp 开始,大多也在一场 NOIp 中结束,好似一次次轮回在不断上演. 如果这次 NO ...

  5. 如何绘制UML图?

    首先推荐在线绘制UML的网址:https://www.processon.com/,很好用. 在软件开发过程中,开发人员往往需要通过绘制类图来理清业务的实现思路,从而方便代码实现,也便于后期的代码维护 ...

  6. bzoj1051: [HAOI2006]受欢迎的牛(tarjan板子)

    1051: [HAOI2006]受欢迎的牛 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 6064  Solved: 3179[Submit][Sta ...

  7. php file()函数

    file() — 把整个文件读入一个数组中 使用使用方法: file(filename,[$flags]); 可选参数 flags 可以是以下一个或多个常量: FILE_USE_INCLUDE_PAT ...

  8. click()和onclick()的区别

    click()和onclick()的区别: 1.onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么 click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,就会触 ...

  9. 卷积cnn总结

    阅读了很多篇文章后,还是觉得有两篇文章很好,所以基本上就吸收搬过来了. 从神经网络到卷积神经网络(CNN) 我们知道神经网络的结构是这样的: 那卷积神经网络跟它是什么关系呢? 其实卷积神经网络依旧是层 ...

  10. java 多样输入框

    1.不一样的输入框 输入框只能输入字母和下划线的正则表达式 <input type="text" onkeyup="this.value=this.value.re ...