左到右從中心開始的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/

我創建了一個簡單的擺弄這說明什麼，我試圖做的，但你會發現，一旦它到達左眼，它拉鍊的權利，然後進行。我試圖得到解決此使用不透明，但是這會導致不想要的效果（對象/出變淡。）

我有以下的現在的工作，但是對象開始關閉屏幕，這是不理想的：

@-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%）。改變從1的opacity到050%和50.1%之間將使元素得到隱藏的突然和不露面，因爲它從左邊到右邊去。同樣，將opacity更改回75.1%將使其顯示在從右側返回到視圖中。

最初，當你嘗試過，我認爲你可能已經改變了更高的間隔opacity，從而使它呈現淡入/淡出般的外觀。

動畫是加快和放緩，因爲第一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>