向左移动元素 - CSS动画

我正在使用CSS动画创建一个简单的幻灯片，并且我陷入了这一点。我有：向左移动元素 - CSS动画

#Content #PresentationSlideOne { 
    display: block; 
    width: 25%; 
    margin: 0 auto; 
    background-color: Blue; 

    -moz-animation: PresentationSlideOne 4s ease 1 normal; 
    -o-animation: PresentationSlideOne 4s ease 1 normal; 
    -webkit-animation: PresentationSlideOne 4s ease 1 normal; 
    animation: PresentationSlideOne 4s ease 1 normal; 

    -o-animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
    -moz-animation-delay: 20s; 
    -o-animation-delay: 20s; 
    -webkit-animation-delay: 20s; 
    animation-delay: 20s; 
}

关键帧：

/* #region PresentationSlideOne */ 
@keyframes PresentationSlideOne { 
    from { 
     margin: 0 auto; 

    } 

    to { 
     margin: initial; 
     float: left; 
     left: 0%; 
    } 
} 
/* #endregion */

被设置为保证金：0汽车;最初，因为它需要以水平为中心。但在关键帧中，我需要将其移动到from margin: 0 auto;to left: 0%; - 无论我如何尝试这种方式，都不会发生任何事情。

如何制作页边距：0 auto'd元素向左移动？

来源

2013-08-26 jAsOn

集：

position: relative

你想移动的元素。

编辑：

其实，解决的办法是比较复杂的。我建议将图像置于容器元素中并将动画应用于容器。

更好的是，在GitHub上搜索“css-only carousels”之类的东西，并了解现有项目如何解决此问题。

来源

2013-08-26 19:27:07

哦，该死的，我是如此的迟缓。我应该捡起来的。这就是其他移动元素的不同之处。谢谢@Tim！ – jAsOn

啊，它仍然不会移动。 – jAsOn

左侧属性相对于元素的原始位置移动。所以，0％根本不会移动它。负数将其移动到左侧，向右移动。但是，我认为你的方法还有更多的根本问题。 –

向左移动元素 - CSS动画

回答

相关问题