CSS3 动画，转换为位置答案

【问题标题】：CSS3 animation, translate to positionCSS3 动画，转换为位置
【发布时间】：2012-06-17 00:50:13
【问题描述】：

我有一个 div，我可以点击它来拖动它。一旦它在一个区域上，它就会通过以下方式动画到它的位置：

$("#wheel1").animate({left: "200px", top: "100px"});

我也可以让它动画化：

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

区别在于；使用 jQuery，它会从文档左侧动画到 200px。使用 CSS3，它会在你放置它的地方设置 200px 的动画（这很糟糕）

有没有办法像 jQuery 一样让 CSS3 从文档的左上角生成动画？我尝试更改 transform-origin 和其他一些设置，但没有成功。

【问题讨论】：

我不知道边距会有什么帮助，jQuery的方式已经很完美了，用CSS3，你如何翻译边距？
我不确定您是否正确阅读了该问题。 jQ 可以使用左/右。 jQ 解决方案是可靠的并且有效。不过，我正在尝试通过 CSS 动画实现与 CSS3 完全相同的事情。边距和位置不能用，必须是 translateX/Y
这可能是关于上/左/右/下转换（即使在 CSS 中不仅仅是 jQuery）与使用 translate 的不同之处的相关链接：http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

标签： jquery css jquery-animate css-transforms

【解决方案1】：

我不是 CSS3 转换方面的专家，但我认为 translate 是相对于元素的原始位置的。

我可以看到使用 CSS 实现您想要的一种方法是绝对定位元素，并使用 CSS3 transition 更改其 left 和 top 属性。

这是一个小提琴：http://jsfiddle.net/nSa9s/2/

HTML：

<div class="box"></div>

CSS：

.box {
    position: absolute;
    background: #ff0000;
    left: 400px;
    top: 200px;
    width: 100px;
    height: 100px;
    -webkit-transition: all 1.0s linear;
    -moz-transition: all 1.0s linear;
    -o-transition: all 1.0s linear;
    -ms-transition: all 1.0s linear;    
    transition: all 1.0s linear;
}
.box.move {
    left: 200px;
    top: 100px;
}

jQuery:

$(document).ready(function() {
    $('.box').on('click', function() {
        $(this).addClass('move');
    });
});

JS的目的是在元素被点击的时候给元素添加move类。

【讨论】：

【解决方案2】：

如果我错了，请纠正我，但是你要使用 CSS3 动画的原因是因为 jQuery 动画没有做 CSS3 动画可以做的事情？

如果我是正确的，那么看看这个名为 .transit 的 jQuery 插件，它允许你将所有 CSS3 动画应用到任何选择器，就像它在 CSS3 格式中应用的方式一样，但它是通过程序化的 jQuery 方法完成的。

该插件处理大量的 CSS3 滑动和移动要求以及您可以使用的任何其他 CSS3 动画。上面的链接在整个页面都有示例。

如果这不是你想要的，请意识到当一个对象被“拖放”到另一个元素中时，CSS 无法“检测”到。有:hover 伪触发器，但每次无论如何都会触发。

【讨论】：

我试试看，谢谢。我试图在 jQuery 上使用 CSS3 的原因是因为它更有效。我读到它还传递了 GPU 而不是 CPU 所需的工作量。我不怀疑这一点，因为当我将 7000 像素的背景从屏幕的一侧转换到另一侧时，它与 jQ 一起跳动，但与 CSS 完美流畅地移动。
请对此表示怀疑...请参阅我的SO Answer 以获得纯 CSS 动画声纳波 FX。 Firefox 在 Chrome 唱歌时窒息。也就是说，查看您谈论的特定代码是分析所需的，以了解它在 jQuery 中运行缓慢的原因。
对不起，可能应该提到'for the iPad'
啊，那肯定是游戏规则的改变者。我建议您在 SO Question 中提及目标浏览器/设备。此外，如果您使用的是 jQuery-mobile，那么这也是与您现在显示的不同的标签。

【解决方案3】：

仅供参考，要使用 CSS 动画（不是所选答案显示的过渡），您只需在关键帧中使用 left 而不是翻译。

@-webkit-keyframes wheel1 {
    0% {}
    100% {
        left:200px; top: 100px;
    }
}

【讨论】：