Animate a object across the width of its parent using css transforms

You can use a wrapper around your element, set the width of the wrapper to 100%. and animate it.

This way, the translate is applied to the element width, as you state, but the element width matches the container width

.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

As Simon_Weaver points out, it's confusing to have 2 elements with a 100% width; it's not clear which one is the one proposed as a solution.

A better demo

.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>