Pure CSS Animation

car



  • Category: Web design
  • Project: Animation using only CSS
  • Project date: February, 2021
  • Title: After Last Run

Interested after seeing a few CSS animations I wanted try but with my own artwork.
I recently returned from a ski trip to Breckenridge, CO and decided to use that as inspiration. Breckenridge has the highest ski lift in North America at 12,840ft that drops riders at the top of Peak 8. But, the natural beauty of the lancscape is breathtaking and I wanted to showcase that more. Therefore, I chose to draw a scene after a long day of skiing.

CSS CODE ↓

The Trees which give the driving illusion:
@keyframes endlessTrees{100%{transform: translateX(-2250px)};}
The Suspension effect:
@keyframes carSuspension{ 100%{ transform: translateY(-1px); } 50%{ transform: translateY(2px); } 0%{ transform: translateY(-1px);}}