html - 从左到右的 CSS3 动画从中心开始

Question

我正在开发一个 HTML5 游戏，它有一个对象需要居中开始，移到左侧看不见，然后从右侧出现以完成并重复。

@-webkit-keyframes marquee {
    0% { transform: translate3d(-50%, 0, 0); }
    50% { transform: translate3d(-100vw, 0, 0); }
    75% { transform: translate3d(100vw, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}
@-moz-keyframes marquee {
    0% { transform: translate3d(-50%, 0, 0); }
    50% { transform: translate3d(-100vw, 0, 0); }
    75% { transform: translate3d(100vw, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}
@-ms-keyframes marquee {
    0% { transform: translate3d(-50%, 0, 0); }
    50% { transform: translate3d(-100vw, 0, 0); }
    75% { transform: translate3d(100vw, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}
@keyframes marquee {
    0% { transform: translate3d(-50%, 0, 0); }
    50% { transform: translate3d(-100vw, 0, 0); }
    75% { transform: translate3d(100vw, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}
div {
    width: 200px;
    height: 50px;
    background: red;
    position: absolute;
    left: 50%;
    top: 15px;
    transform: translate3d(-50%, 0, 0);
    animation: marquee 5s linear infinite;
}

http://jsfiddle.net/gRoberts/0esr1abL/

我创建了一个简单的 fiddle ，它显示了我正在尝试做什么，但是您会注意到，一旦它到达左侧，它就会向右拉动，然后继续前进。我已经尝试通过使用不透明度来解决这个问题，但这会导致不良影响(对象淡入/淡出。)

我现在有以下工作，但是对象从屏幕开始，这并不理想:

@-webkit-keyframes marquee {
  0% { transform: translate3d(calc(100vw + 100%), 0, 0); }
  100% { transform: translate3d(calc(0vw - 100%), 0, 0); }
}
@-moz-keyframes marquee {
  0% { transform: translate3d(calc(100vw + 100%), 0, 0); }
  100% { transform: translate3d(calc(0vw - 100%), 0, 0); }
}
@-ms-keyframes marquee {
  0% { transform: translate3d(calc(100vw + 100%), 0, 0); }
  100% { transform: translate3d(calc(0vw - 100%), 0, 0); }
}
@keyframes marquee {
  0% { transform: translate3d(calc(100vw + 100%), 0, 0); }
  100% { transform: translate3d(calc(0vw - 100%), 0, 0); }
}
div {
    width: 200px;
    height: 50px;
    background: red;
    position: absolute;
    top: 15px;
    animation: marquee 5s linear infinite;
}

http://jsfiddle.net/gRoberts/rr969j09/

关于让上述 fiddle 工作但从中心开始的任何建议？

Answer 1

您可以使用问题中的第一个片段，但立即更改不透明度(在动画持续时间的 .1% 内)。在 50% 和 50.1% 之间将 opacity 从 1 更改为 0 将使元素突然隐藏起来，从左到右不显示。同样，在 75.1% 处将 opacity 更改回 1 将使它在从右侧重新进入视野时可见。

最初当您尝试时，我认为您可能以更高的间隔更改了不透明度，从而使它呈现出类似淡入/淡出的外观。

动画在加速和减速，因为在第一个 50% 中它是从中心向左移动 (-100vw) 但它只需要 25% 的时间从右边回到中间。我修改了它以分配相等的拆分(即从中心到左从 0-45% 和从右到中心在 55-100% 之间)，这使它看起来更平滑。它可以进一步调整，但我想你明白了。

@keyframes marquee {
    0% {
        transform: translate3d(-50%, 0, 0);
    }
    45% {
        transform: translate3d(-100vw, 0, 0);
        opacity: 1;
    }
    45.1% {
        opacity: 0; /* at this point in time the element is fully on the left and hidden */
    }
    55% {
        transform: translate3d(100vw, 0, 0);
        opacity: 0; /* at this point in time the element is fully on the right but still hidden */
    }
    55.1% {
        opacity: 1; /* now we make it visible again so that it can come back into view */
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}
div {
    width: 200px;
    height: 50px;
    background: red;
    position: absolute;
    left: 50%;
    top: 15px;
    animation: marquee 5s linear infinite;
}
body {
    overflow: hidden;
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>