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/

我已经创建了一个简单的小提琴，显示了我想要做的事情，但是你会注意到，一旦它到达左边，它会向右拉，然后继续。我试过通过使用不透明度来解决这个问题，但这会导致不良影响（对象淡入/淡出。）

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

@-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/

有关让上述小提琴工作但从中心开始的任何建议吗？

Answer 1

您可以使用问题中的第一个片段，但会立即更改不透明度（在动画持续时间的.1%内）。在opacity和1之间将0从50%更改为50.1%会使元素突然隐藏，并且不会显示为从左边移到对。同样地，将opacity更改回75.1%处的opacity会使其在从右侧返回视图时可见。

最初，当你尝试过时，我认为你可能已经在更高的时间间隔内更改50%，从而使其呈现淡入/淡出外观。

动画正在加速并放慢速度，因为第一个-100vw它从中心向左移动（25%）但是只有@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; } }的时间回来从右到中。我修改了这个以分配相等的分割（即，从0到45％的中心到左边，从右到中心在55到100％之间），这使它看起来更平滑。它可以进一步调整，但我认为你明白了。

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

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

1 个答案: