Create realistic car motion animations with pure CSS3

Brief Tutorial

This is a realistic car motion animation special effect produced using pure CSS3. In this special effect, all elements are rendered through CSS and no images are used. It creates the visual effect of car movement by shaking the road zebra crossing left and right.

How to use

HTML structure

The HTML structure of the entire car motion animation is as follows:

<div class="car">
  <div class="body">
    <div class="mirror-wrap">
      <div class="mirror-inner">
        <div class="mirror">
          <div class="shine"></div>
        </div>
      </div>
    </div>
    <div class="middle">
      <div class="top">
        <div class="line"></div>
      </div>
      <div class="bottom">
        <div class="lights">
          <div class="line"></div>
        </div>
      </div>
    </div>
    <div class="bumper">
      <div class="top"></div>
      <div class="middle" data-numb="..."></div>
      <div class="bottom"></div>
    </div>
  </div>
  <div class="tyres">
    <div class="tyre back"></div>
    <div class="tyre front"></div>
  </div>
</div>
<div class="road-wrap">
  <div class="road">
    <div class="lane-wrap">
      <div class="lane">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
</div>

##CSS style

The CSS style mainly constructs the car through the :before and :after pseudo-elements of each car component. The entire special effect uses 4 animations, namely: shine animation of the front windshield, suspension animation of the body shaking left and right, lane animation of moving left and right on the highway, and animation of the steer lane zebra crossing.

@keyframes shine{
  0%,80%,100%{
    -webkit-transform:translateX(-55px) rotate(24deg);
            transform:translateX(-55px) rotate(24deg);
  }
  5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{background-color:#2d2d2d}
  0%,10%,20%,30%,40%,50%,60%,70%,80%,90%,100%{background-color:#4d4d4d}
  33%,44%{
    -webkit-transform:translateX(30px) rotate(-14deg);
            transform:translateX(30px) rotate(-14deg);
  }
  66%{
    -webkit-transform:translateX(0px) rotate(-10deg);
            transform:translateX(0px) rotate(-10deg);
  }
}
@keyframes lane{
  0%{
    -webkit-transform:translateY(320px);
            transform:translateY(320px);
  }
  100%{
    -webkit-transform:translateY(-160px);
            transform:translateY(-160px);
  }
}
@keyframes steer{
  0%,100%{
    -webkit-transform:translateX(-15px) rotate(5deg);
            transform:translateX(-15px) rotate(5deg);
  }
  50%{
    -webkit-transform:translateX(15px) rotate(-5deg);
            transform:translateX(15px) rotate(-5deg)
  }
}
@keyframes suspension{
  0%,75%,100%{
    -webkit-transform:rotate(3deg);
            transform:rotate(3deg)
  }
  10%,30%,50%,70%,90%{top:0}
  20%,40%,60%,80%,100%{top:-1px}
  25%,50%{
    -webkit-transform:rotate(-3deg);
            transform:rotate(-3deg)
  }
  20%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
  90%{-webkit-transform:rotate(-1deg);transform:rotate(-1deg)}
}

The above is the content of producing realistic car motion animation using pure CSS3. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!