Анимация объекта по ширине его родителя с использованием css-преобразований

Question

Я пытаюсь улучшить производительность своей анимации с помощью css-преобразований, чтобы перевести позицию элемента внутри обертки ширины 100%. Таким образом, он входит в экран с левой стороны и выходит справа, прежде чем повторять анимацию.

Я понял, что могу использовать проценты для этой анимации. то, что я нахожу, заключается в том, что перевод относится к объекту, который вы анимируете.

Итак, если у вас есть объект, который 100px в ширину и установить анимацию следующим образом:

@keyframes moveme { 
    0% { transform: translate(-100px, 150px) } 
    100% { transform: translate(100%, 100px) } 
} 

Объект переместится на 200% объектов ширины, так 200px.

Есть ли какое-либо исправление для перемещения объекта по ширине контейнера с использованием преобразования css в анимации ключевого кадра?

Вот мой codepen до сих пор codepen.io/matttunney/pen/dPMQZL

Благодаря

Answer 1

Вы можете использовать обертку вокруг элемента, установите ширину обертки на 100%. и оживить его.

Таким образом, перевод применяется к ширине элемента, как Вы заявляете, но ширина элемента соответствует ширине контейнера

.banner { 
    display:block; 
    width:100%; 
    height:300px; 
    background:#0069aa; 
    position:relative; 
} 
.moveme, .movewidth { 
    position:absolute; 
} 
.movewidth { 
    width:100px; 
    height:100%; 
    background: #edaf02; 
    transform: translate3D(0,0,10px) 
} 
.wrapper { 
    width: 100%; 
    animation: moveme 10s linear infinite; 
} 
.moveme { 
    background:#003356; 
    width:100px; 
    height:100px; 
    transform: translate3D(0,150px,20px) 
} 
@keyframes moveme { 
    0% { transform: translate(0%, 150px) } 
    100% { transform: translate(100%, 100px) } 
} 

demo

Как Simon_Weaver указывает, что это сбивает с толку, чтобы иметь 2 элементы со 100% шириной; неясно, какой из них предлагается в качестве решения.

Лучше демо

.banner { 
 
    display:block; 
 
    width:400px; 
 
    height:300px; 
 
    background:#0069aa; 
 
    position:relative; 
 
} 
 
.moveme, .movewidth { 
 
    position:absolute; 
 
} 
 
.movewidth { 
 
    width:100px; 
 
    height:100%; 
 
    background: #edaf02; 
 
    transform: translate3D(0,0,10px) 
 
} 
 
.wrapper { 
 
    width: 100%; 
 
    -webkit-animation: moveme 1s linear infinite; 
 
    animation: moveme 1s linear infinite; 
 
} 
 
.moveme { 
 
    background:#003356; 
 
    width:100px; 
 
    height:100px; 
 
    transform: translate3D(0,150px,20px) 
 
} 
 
@keyframes moveme { 
 
    0% { transform: translate(0%, 150px) } 
 
    100% { transform: translate(100%, 100px) } 
 
} 
 
@-webkit-keyframes moveme { 
 
    0% { transform: translate(0%, 150px) } 
 
    100% { transform: translate(100%, 100px) } 
 
}

<div class="banner"> 
 
     <div class="movewidth"> 
 
     </div> 
 
     <div class="wrapper"> 
 
     <div class="moveme"> 
 
     </div> 
 
     </div> 
 
    </div>