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

Question

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

3

我正在开发一个与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/

- Gavin

你觉得这个链接可以吗？ - Harry

请问您需要什么样的输出，例如这个 http://jsfiddle.net/0esr1abL/1/。 - Karthick Kumar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Harry · Accepted Answer

您可以使用问题中的第一个代码片段，但是立即更改不透明度（在动画持续时间内的 .1％ 内）。在 50％ 和 50.1％ 之间将不透明度从 1 更改为 0 会使元素突然隐藏，并且不会在从左到右移动时显示出来。同样，在 75.1％ 处将不透明度更改回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>