如果滑块元素没有绝对定位，如何为它们设置动画？答案

【问题标题】：How to animate slider elements if they are not positioned absolutely?如果滑块元素没有绝对定位，如何为它们设置动画？
【发布时间】：2015-06-04 04:16:31
【问题描述】：

我正在尝试为我的网站创建一个动画滑块，并且我正在使用浮动和边距来定位滑块的元素，我正在寻找可以集成到我的滑块中的任何东西来为元素设置动画，我发现我需要使用 CSS3 过渡，并且这些元素需要绝对定位在它们的父级内部，这就是问题所在。我不想绝对定位元素，因为我现在定位它们的方式以及元素的大小可变。

那么如何在不使用绝对位置的情况下为这些元素设置动画或过渡？我想用不同的持续时间和方向为每个元素设置不同的动画。

谢谢。

UPADTE：我正在使用 WooThemes 的 Flexslider

【问题讨论】：

【解决方案1】：

你可以通过javascript向CSS做广告

'+=10px' or '-=10px'

因此，您可以添加或减少要设置动画的元素的值，而无需说明结果的确切数量。希望对你有帮助

编辑

你也可以在你的 @keyframes 中使用它而不需要任何 javascript

【讨论】：

【解决方案2】：

使用transform: translate(x,y)。 Transform 独立于周围的标记/样式（例如position: absolute），甚至在移动设备上也有硬件加速。

【讨论】：

【解决方案3】：

如果您使用 jQuery，您可以使用 .animate() 修改 DOM 元素的任何属性，这意味着您可以为元素的边距和填充设置动画，保持它们的相对位置。

【讨论】：