我可以使用CSS过渡为绝对定位的元素设置动画吗？ [英] Can I animate absolute positioned element with CSS transition?

问题描述

我想通过CSS过渡为元素的位置变化设置动画，但是即使我在 all 属性上使用过渡也无法正常工作，如以下示例所示：< a href = http://jsfiddle.net/yFy5n/3/> http://jsfiddle.net/yFy5n/3/

I want to animate an element's position change with CSS transition, but it is not working even when I use the transition on all properties, as in the example here: http://jsfiddle.net/yFy5n/3/

但是，我不希望我的最终解决方案将过渡应用于所有属性，而是仅对位置更改进行应用。因此，颜色变化应该是即时的，只有从左到右的位置变化应该是动态的（与现在发生的情况相反）。

However, I don't want my final solution to apply transition to all properties, but instead only on the position change. So the color change should be instant, only the position change from left to right should be animated (the opposite of what is happening now).

推荐答案

您忘记为 left 定义默认值，所以它没有

You forgot to define the default value for left so it doesn't know how to animate.

.test {
    left: 0;
    transition:left 1s linear;
}

请参见此处： http://jsfiddle.net/shomz/yFy5n/5/

这篇关于我可以使用CSS过渡为绝对定位的元素设置动画吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！