트래킹 샷

<div class="road">
  <div class="layer far"></div>
  <div class="layer mid"></div>
  <div class="subject">
    <div class="leg l1"></div>
    <div class="leg l2"></div>
    <div class="body"></div>
  </div>
  <div class="near"></div>
  <div class="rail"><i class="camicon"></i></div>
</div>

.road{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#bcd7ea,#e9e6d8 60%)}
.layer{position:absolute;left:0;bottom:22%;width:200%;height:30%;background-repeat:repeat-x}
.far{background-image:repeating-linear-gradient(110deg,#9fb5a3 0 40px,transparent 40px 90px);opacity:.6;
  animation:scrollX 6s linear infinite}
.mid{bottom:20%;height:20%;background-image:repeating-linear-gradient(100deg,#7a9484 0 26px,transparent 26px 60px);
  animation:scrollX 3.2s linear infinite}
@keyframes scrollX{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.near{position:absolute;left:0;right:0;bottom:0;height:22%;background:#565049}
.near::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,#e8e2c8 0 22px,transparent 22px 60px);
  opacity:.5;animation:scrollX 1s linear infinite}
.subject{position:absolute;left:50%;bottom:22%;width:9%;height:38%;transform:translateX(-50%)}
.subject .body{position:absolute;left:20%;top:0;width:60%;height:70%;border-radius:40% 40% 20% 20%;background:#2b2f45}
.subject .leg{position:absolute;bottom:0;left:30%;width:16%;height:34%;background:#2b2f45;transform-origin:top center}
.subject .l2{left:54%}
.subject .l1{animation:swing .5s ease-in-out infinite alternate}
.subject .l2{animation:swing .5s ease-in-out infinite alternate-reverse}
@keyframes swing{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
.rail{position:absolute;left:8%;right:8%;bottom:5%;height:2px;background:rgba(0,0,0,.35)}
.camicon{position:absolute;top:50%;width:5%;aspect-ratio:1.4;background:#111;border-radius:2px;
  transform:translate(-50%,-50%);animation:dolly 3s ease-in-out infinite alternate}
@keyframes dolly{from{left:0%}to{left:100%}}