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%; - 无论我尝试哪种方式都没有发生。

如何设置边距：0 auto'd元素向左移动？

Answer 1

集：

position: relative

关于你想要移动的元素。

编辑：

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

更好的是，在GitHub上搜索类似“仅限css的旋转木马”，并了解现有项目如何解决这个问题。

向左移动元素 - CSS动画

1 个答案: