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

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

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

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

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

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

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

Вот мой сайт CodePen до сих пор сайт CodePen.Ио/matttunney/ручка/dPMQZL

Спасибо

1 6
css css3 animation translate-animation

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) }
}

Демо

Как указывает 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>
4