Влево-вправо анимация 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% продолжительности анимации). Изменение opacity от 1 до 0 между 50% и 50.1% заставит элемент спрятаться и не появится, поскольку он идет слева направо. Аналогичным образом изменение opacity назад на 1 на 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>