css - 图像缩放 -webkit-transform

标签 css animation

我体内有一个img。

$(function() {
    var body = $("body"),
    scaled;
    $("img").click(function() {
        if(scaled) {
            body.css("-webkit-transform", "scale3d(1, 1, 1)");     
        } else {
            body.css("-webkit-transition", "-webkit-transform 0.2s ease");     
            body.css("-webkit-transform", "scale3d(8, 8, 1)");     
        }
        scaled = !scaled;
    });
});

我正在点击图片。

缩放到 8 倍是平滑的。 从 8x 到 1x 的第一个比例是不好的( 从 8 倍到 1 倍的第二个比例是平滑的。

点击图片...

Chrome fiddle :example

我只能使用-webkit-transform,

我怎么可能是缓存动画...

怎么办?

在 IE11 中 - 一切正常。 我无法在 Chrome 中解决问题。

最佳答案

这就是您要找的:

* {
    -webkit-transform: translate3d(0,0,0);
}

The fiddle

关于css - 图像缩放 -webkit-transform,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21697061/

相关文章:

javascript - 我怎样才能修复动画速度?

html - 即使我们没有使用任何新的 css 3 属性/选择器,firefox 3 和 3.5 以及 IE 7 和 8 之间是否存在渲染差异的可能性?

css hover 嵌套类传播

javascript - Jquery 使用单独的闪烁文本计数器

html - 将卡片上的垂直文本与图像对齐

android - 从xml样式项中取出状态栏

javascript - 什么样的CSS3动画是异步的?

javascript - 如何使用 Jquery 让只有 1 个输入框在焦点上做动画

html - 使css动画流畅地永远循环

android - 如何从停止的值开始 Android 动画?