0

我正在使用 CSS Animations 创建一个简单的幻灯片，但我已经陷入了这一点。我有：

#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%;——无论我尝试哪种方式，都不会发生任何事情。

如何设置边距：0 自动元素向左移动？

4

1 回答 1

0

放：

position: relative

在您要移动的元素上。

编辑：

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

更好的是，在 GitHub 上搜索“仅 CSS 轮播”之类的内容，并了解现有项目如何解决此问题。

于 2013-08-26T19:27:07.340 回答