个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
非常令人惊讶的是，一个简单的翻译动画(在一个小矩形上)在 Android 2.2 浏览器上跳帧。它甚至不是每秒 10 帧。手机是三星 Galaxy Ace (S5830)。图像上没有其他动画。下面附上代码。我是不是做错了什么，因为我从没想过这么简单的翻译动画会这么糟糕。请提出一些可以接受的平滑度的解决方法
<html>
<head>
<style type="text/css">
#di1, #ci1 {position: absolute;left:0px;top:0px;-webkit-transform-origin: 0% 0%;}
.anim1{
-webkit-animation-duration: 5s;
-webkit-animation-name: animation1;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count:1 ;
}
@-webkit-keyframes animation1
{
0%{ -webkit-transform: translate(25px, 25px) }
50%{ -webkit-transform: translate(200px, 00px) }
100%{ -webkit-transform: translate(0px, 200px) }
}
</style>
<script type="text/javascript">
window.addEventListener("load",win_load,false);
function win_load()
{
var c=document.getElementById("ci1");var ctx=c.getContext("2d");
ctx.fillStyle="#ff0000";
ctx.fillRect(25,25,30,30);
}
</script>
最佳答案
这是 hacky 解决方法。
在转换规则中添加
rotateZ(0deg);
这样就变成了
-webkit-transform:rotateZ(0deg) translate(30,40);
这会强制 webkit 使用可用的硬件加速，并逐位提高性能。
尽管没有任何保证可以使它起作用。
在 android 3.x 之后动画变得流畅，试试吧。
关于android - CSS3 KeyFrame Translate Animation - Android 严重跳帧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11505201/
24
4
0
这是在 Chrome 中不是由 orbit 动画的圆圈。 http://jsfiddle.net/ztkav838/ //CSS @-webkit-keyframes orbit { from
我一直在查看示例，但我在这里遗漏了一些东西。我无法启动这个简单的 css 动画，改变某些文本的颜色。当我运行下面的示例时，文本保持黑色。 我有一个名为“changeColor”的动画，应用于 h1 元
我一直在浏览示例，但我会在这里遗漏一些东西。我无法触发这个简单的 css 动画，改变一些文本的颜色。当我运行下面的示例时，文本保持黑色。 我有一个名为“changeColor”的动画，应用于 h1 元
我想在第二次点击按钮时重复@keyframne 动画，但它只生效一次。 $(document).ready(function(){ $('#btn_c
我在@keyframes 动画中缩放文本，当文本增加时，它变得模糊，我该如何防止？ JS Bin Example 谢谢! 最佳答案 解决问题的最简单方法是将最大状态比例设置为 1，将较小状态比例设置为
我正在尝试创建一个关键帧，它会在查看几秒钟后更改 div 容器的内容，但它不起作用。 这是我的代码: @-webkit-keyframes k_home_projectSlider { 0%
当我创建 @keyframes 动画并将其分配给悬停时的图像时，它会随机闪烁。正如您在 GIF 中看到的那样，它只能随机地正常工作几次。 我已经尝试了以下所有方法并为每个供应商添加了前缀: 背面可见性
我有一个 css3 @keyframe 动画，我在控制时遇到了一些麻烦。 这是一个分为两部分的动画，有一个平放的高矩形，在第一部分中它假设旋转 90 度并将 z 轴向上平移向您同时也向左平移，然后完成
是否可以减少代码以生成一组可以处理各种浏览器前缀的混合宏？ 尝试减少代码长度以使用更多mixin 所以代替 @-moz-keyframes orbit { 0% { opaci
我正在尝试使用 @keyframes 制作动画。但是，该示例不起作用。 .main{ width:100%; height:500px; border: 1px solid black; } @
所以我正在制作一个简单的元素，它会显示一个计时器并仅使用 HTML 和 CSS 计数到 99。 但是有人能告诉我为什么我需要延迟我的 100 秒动画以使其与 10 秒动画同步吗？ .second::b
我有四个动画 div 元素，它们在 section 元素内旋转。 div 元素需要放在文本下方(假设它有背景)，这样就不会出现冲突线，所以我尝试做的是添加 background-color: #aea
不确定我在这里面对的是什么，但我正在尝试应用 CSS 动画。 经过一些研究，我认为添加 webkit 前缀将有助于解决问题，但看起来我仍然面临读取无效属性值的问题。 这是我当前的代码: .progre
我试图让动画在悬停后缓和到元素的原始值。动画本身工作正常，但是当我将鼠标悬停在该元素上时，它会立即恢复到原始状态，而我希望有 0.2 秒的缓和。有什么帮助吗？ 这是我的代码: img.footer {
.car1 仅在使用 @keyframes 的 from 和 to 时移动，但在使用时不移动%。谁能解释为什么会这样？ .car1 { animation: car1 2s 2 forwards;
似乎无法让我的图像 slider 工作，我打算将其用作我的页面的标题，但图像不会滑动。我已经尝试过 chrome 的前缀，但它们没有任何区别。 这是C
我正在尝试做的事情:我在黑盒子里有链接。我试图在悬停时使框的背景从黑色变为蓝色。我不知道该怎么做。这是我的 CSS(我将它设置为 5s 但我真的希望它在悬停时生效) @keyframes navBox
我试图用 CSS3 使我的 div 上下移动，但它没有 @-webkit-keyframes mover { 0%, 100% { top: 0%;} 50% { top: 5%;
我正在尝试编写此文本动画效果 ( please see video )，但我离解决方案还很远!! 你能帮帮我吗？也许使用 js 更好？ h1.fadeinone { animation: fadein
这个问题在这里已经有了答案: Using percentage values with background-position on a linear-gradient (2 个答案) 关闭 3
我是一名优秀的程序员,十分优秀！