滑块元素如果没有绝对定位,如何设置动画?

时间:2012-12-06 13:09:12

标签: jquery css css3 animation jquery-animate

我正在尝试为我的网站创建一个动画滑块,我正在使用浮动和边距来定位滑块的元素,我正在搜索任何可以集成到我的滑块中的任何动画元素的动画,我发现我需要使用CSS3过渡,并且这些元素需要绝对定位在其父元素内,这就是问题所在。 我不想绝对定位元素,因为我现在将它们定位并且元素的大小可变。

那么如何在不使用绝对位置的情况下动画或转换这些元素? 我希望以不同的持续时间和方向为每个元素设置不同的动画。

并谢谢。

UPADTE:我正在使用WooThemes的Flexslider

3 个答案:

答案 0 :(得分:1)

你可以通过javascript广告到CSS

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

所以增加或减少想要动画的元素的值,而不必说明确切的结果量。希望它有所帮助

修改

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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