html - 向左移动元素 - CSS 动画

Question

我正在使用 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 */

设置为 margin: 0 auto;最初，因为它需要水平居中。但是在关键帧中，我需要将它移动 from margin: 0 auto; to left: 0%; - 无论我尝试哪种方式都没有任何反应。

如何使 margin: 0 auto'd 元素向左移动？

Answer 1

设置:

position: relative

在您要移动的元素上。

编辑:

实际上，解决方案更复杂。我建议将图像置于容器元素的中心并将动画应用于容器。

更好的是，在 GitHub 上搜索“css-only carousels”之类的东西，了解现有元素如何解决这个问题。