CodePen Embed - Loving Car - Pure CSS with animation

.stage
  .ground-line
    %div
      %span.line1
      %span.line2
      %span.line3
      %span.line1
      %span.line2
      %span.line3
  .tree-wrap
    .tree
      .stem
        .branch.branch1
        .branch.branch2
        .branch.branch3
      .leef.leef1    
      .leef.leef2
  .love-front
    - (1..12).each do |i|
      .love-wrap
        .love
          %span.circle.circle1
          %span.circle.circle2
          %span.square
  .love-back
    - (1..8).each do |i|
      .love-wrap
        .love
          %span.circle.circle1
          %span.circle.circle2
          %span.square
  .vehicle-body
    .wrap-body
      .rooftop.back
      .rooftop.front
      .body-cover
        .top-roof
        .indi.back-top-indicator
        .indi.back-bottom-indicator
        .back-window
          .window-base.top
          .window-base.bottom
          .sun-shade
          .curtain
            - (1..8).each do |i|
              %span
          .windows-glass-wrap
            .glass
              .light
                %span.light1
                %span.light2
                %span.light3
            .glass
              .light
                %span.light1
                %span.light2
                %span.light3
        .front-window
          .window-base
          .sun-shade
          .curtain
            - (1..3).each do |i|
              %span
          .windows-glass-wrap
            .light
              %span.light1
              %span.light2
              %span.light3
          .air-hole
            - (1..5).each do |i|
              %span
      .main-door
        .glass
          .light
            %span.light1
            %span.light2
        .door-handle
      .side-guard
        .shade
        .bumper.back
        .bumper.front
        .front-indicator
    .wheel-wrap.back
      .wheel-shadow
      .wheel
        .wheel-outer
          .wheel-cup
            - (1..4).each do |i|
              %span
    .wheel-wrap.front
      .wheel-shadow
      .wheel
        .wheel-outer
          .wheel-cup
            - (1..4).each do |i|
              %span
.footer
  Made With 
  %span ♥ 
  by 
  %a{ :href => "http://www.uxdots.com/", :target => "_blank"}UXDots
  | Inspired Dribble Shot
  %a.dribble{ :href => "https://dribbble.com/shots/2869958-Loving-car", :target => "_blank"}
    %img{ :src => "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2YWQ3MDE1Zi0yMjAwLTRiMDYtYWExOC1jNTlhOWFhYmI2ZTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTg2MTZEMDA2NjZBMTFFM0IzQ0VENjdGQ0VEQ0YzREIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUM1QzJFRUE2NjY5MTFFM0IzQ0VENjdGQ0VEQ0YzREIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTM3NTA4NzQtNDBhNy00NGNjLWEwMWUtZjc2YzdiYTNlOWEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjZhZDcwMTVmLTIyMDAtNGIwNi1hYTE4LWM1OWE5YWFiYjZlMiIvPiA8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"}

View Compiled

//custom mixins
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}
@mixin opacity($opacity) {
  -webkit-opacity: $opacity;
  -moz-opacity: $opacity;
  opacity: $opacity;
}
@mixin animation($animation) {
  -webkit-animation: $animation;
  -moz-animation: $animation;
  animation: $animation;
}
@mixin box-shadow($box-shadow) {
  -webkit-box-shadow: $box-shadow;
  -moz-box-shadow: $box-shadow;
  box-shadow: $box-shadow;
}
@mixin box-sizing($boxSizing) {
  -webkit-box-sizing: $boxSizing;
  -moz-box-sizing: $boxSizing;
  box-sizing: $boxSizing;
}
@mixin transform($transform) {
  -webkit-transform: $transform;
  -moz-transform: $transform;
  transform: $transform;
}
@mixin keyframes($name, $name1) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

//colors settings
$body-primary: #fa7775;
$body-secondary: #c6edff;
$base: #4b1a61;
$love: #fe1239;
$bg: #f5f4f1;
//Let's start
* {
  margin: 0;
  padding: 0;
  @include box-sizing(border-box);
}

body {
  background-color: $bg;
  text-align: center;
  overflow: hidden;
}

.stage {
  $container-width: 800px;
  position: relative;
  min-height: 80vh;
  width: $container-width;
  margin: auto;
}

//ground base
.ground-line {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
  height: 6px;
  div {
    width: 1600px;
    font-size: 0;
    @include animation(roadLine 3s infinite linear);
  }
  span {
    height: 6px;
    display: inline-block;
    background-color: $base;
    @include border-radius(6px);
    vertical-align: bottom;
    margin-right: 20px;
  }
  .line1 {
    width: 80px;
  }
  .line2 {
    width: 580px;
  }
  .line3 {
    width: 80px;
  }
}

//tree
.tree-wrap {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
}
.tree {
  position: absolute;
  right: 0;
  margin-left: -30px;
  bottom: 6px;
  z-index: 8;
  @include animation(tree 6.2s infinite linear);
  .stem {
    width: 6px;
    @include border-radius(6px 6px 0 0);
    height: 100px;
    background-color: lighten($base, 5%);
    .branch {
      width: 4px;
      @include border-radius(4px);
      background-color: lighten($base, 5%);
      position: absolute;
      z-index: 10;
    }
    .branch1 {
      bottom: 25px;
      height: 30px;
      left: 10px;
      @include transform(rotate(45deg));
    }
    .branch2 {
      bottom: 40px;
      height: 20px;
      right: 8px;
      @include transform(rotate(-45deg));
    }
    .branch3 {
      bottom: 60px;
      height: 15px;
      left: 5px;
      @include transform(rotate(45deg));
    }
  }
  .leef {
    z-index: -1;
    @include border-radius(50%);
    position: absolute;
    background-color: #abec39;
    border: solid 4px lighten($base, 5%);
  }
  .leef1 {
    width: 48px;
    height: 48px;
    top: -15px;
    left: -22px;
  }
  .leef2 {
    width: 68px;
    height: 68px;
    top: 18px;
    left: -32px;
    &::after {
      content: "";
      width: 50%;
      height: 50%;
      position: absolute;
      background-color: #abec39;
      z-index: 9;
      left: 25%;
      @include border-radius(50%);
      top: -18px;
    }
  }
}

.vehicle-body {
  width: 500px;
  height: 220px;
  position: absolute;
  right: 20%;
  bottom: 33px;
  z-index: 9;
  //opacity: 0.8;
  @include border-radius(15px 60px 0 15px);
  .wrap-body {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    @include animation(body 3s infinite ease);
  }
  .body-cover {
    position: absolute;
    border: solid 5px $base;
    width: 100%;
    background-color: $body-secondary;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    @include border-radius(15px 60px 0 15px);
  }
}

.top-roof {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #ffe400;
  border-bottom: solid 4px $base;
  width: 100%;
  height: 14px;
}
.rooftop {
  background-color: $body-primary;
  border: solid 4px $base;
  border-bottom: none;
  bottom: 100%;
  overflow: hidden;
  position: absolute;
  &::after {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    background-color: darken($body-primary, 4%);
    height: 50%;
  }
  &.back {
    width: 60px;
    left: 20%;
    height: 15px;
    @include border-radius(4px 4px 0 0);
  }
  &.front {
    width: 80px;
    left: 40%;
    height: 25px;
    @include border-radius(4px 20px 0 0);
  }
}

.side-guard {
  background-color: $body-primary;
  border-top: solid 4px $base;
  bottom: 4px;
  position: absolute;
  left: 4px;
  width: calc(100% - 8px);
  height: 50px;
  @include border-radius(0 0 0 10px);
  .shade {
    position: absolute;
    left: 0px;
    @include border-radius(0 0 0 15px);
    bottom: 0px;
    width: 100%;
    background-color: darken($body-primary, 4%);
    height: 40%;
  }
  .bumper {
    position: absolute;
    border: solid 4px $base;
    height: 18px;
    position: absolute;
    background-color: #a6a6a6;
    @include border-radius(4px);
    &.front {
      right: -12px;
      width: 22px;
      height: 22px;
      bottom: -10px;
    }
    &.back {
      width: 29px;
      top: 11px;
      @include box-shadow(0 3px 0 rgba(black, 0.15));
      left: -15px;
    }
  }
  .front-indicator {
    width: 26px;
    height: 11px;
    @include box-shadow(0 3px 0 darken($body-primary, 4%));
    position: absolute;
    border: solid 3px $base;
    right: 10px;
    background-color: #ffe400;
    top: 5px;
  }
}

.indi {
  width: 24px;
  height: 10px;
  @include box-shadow(0 3px 0 darken($body-secondary, 6%));
  position: absolute;
  border: solid 3px $base;
  left: 10px;
  background-color: #ffa700;
  &.back-top-indicator {
    top: 24px;
  }
  &.back-bottom-indicator {
    bottom: 60px;
  }
}

.back-window {
  height: 53%;
  top: 14%;
  left: 50px;
  width: 190px;
  position: absolute;
  .window-base {
    width: 100%;
    height: 12px;
    background-color: #abec39;
    @include border-radius(10px);
    border: solid 3px $base;
    @include box-shadow(0 3px 0 rgba(black, 0.15));
    position: relative;
    z-index: 1;
    &.top {
      top: 0;
    }
    &.bottom {
      bottom: 0;
      position: absolute;
      left: 0;
    }
  }
  .sun-shade {
    background-color: $body-primary;
    border: solid 4px $base;
    border-top: none;
    width: 90%;
    margin-left: 4.5%;
    height: 23px;
    position: relative;
    z-index: 0;
  }
  .curtain {
    position: relative;
    width: 90%;
    margin-left: 5%;
    font-size: 0;
    z-index: 2;
    span {
      width: calc(100% / 8);
      height: 15px;
      @include border-radius(0 0 15px 15px);
      display: inline-block;
      background-color: $body-primary;
      border: solid 4px $base;
      border-top: none;
      @include box-shadow(0 3px 0 rgba(black, 0.15));
      margin-left: -4px;
      @include animation(curtain 0.5s infinite linear);
      &:nth-child(even) {
        background-color: #fff;
      }
      + span {
        width: calc((100% / 8) + 2px);
      }
    }
  }
  .windows-glass-wrap {
    background-color: #f5f4f1;
    border-left: solid 4px $base;
    height: 60px;
    width: 80%;
    margin-left: 9%;
    margin-top: -10px;
    border-right: solid 4px $base;
    padding: 2px 5px;
    font-size: 0;
    .glass {
      background-color: darken($body-secondary, 15%);
      overflow: hidden;
      border: solid 3px $base;
      @include border-radius(6px);
      width: 46%;
      height: 100%;
      margin-top: -3px;
      display: inline-block;
      position: relative;
      z-index: 0;
      &::after {
        $dark-s-body: darken($body-secondary, 25%);
        content: "";
        position: absolute;
        background-color: rgba($dark-s-body, 0.5);
        width: 100%;
        @include border-radius(0 0 10px 10px);
        height: 60%;
        top: 0;
        left: 0;
      }
      + .glass {
        margin-left: 4%;
      }
    }
    .light {
      width: 130%;
      height: 100%;
      position: absolute;
      top: -7px;
      left: -45%;
      @include opacity(0.5);
      z-index: 0;
      @include transform(rotate(115deg));
      @include animation(glare 2s infinite linear);
      span {
        width: 100%;
        display: block;
        margin-bottom: 2px;
        background-color: #fff;
      }
      .light1 {
        height: 10px;
      }
      .light2 {
        height: 3px;
      }
      .light3 {
        height: 6px;
      }
    }
  }
}

.main-door {
  position: absolute;
  right: 120px;
  bottom: 0;
  border: solid 4px $base;
  @include border-radius(10px 10px 0 0);
  width: 80px;
  height: 80%;
  z-index: 9;
  background-color: #f5f4f1;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 11%;
    background-color: darken(#f5f4f1, 5%);
  }
  .glass {
    background-color: darken($body-secondary, 20%);
    border: solid 3px $base;
    @include border-radius(10px);
    width: 85%;
    height: 60px;
    margin-top: 5px;
    display: inline-block;
    overflow: hidden;
    position: relative;
    z-index: 0;
    &::after {
      content: "";
      position: absolute;
      background-color: rgba(white, 0.3);
      width: 100%;
      @include border-radius(12px 12px 10px 10px);
      height: 60%;
      bottom: 0;
      left: 0;
    }
    .light {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      @include opacity(0.5);
      z-index: 0;
      span {
        height: 70%;
        margin-top: 15%;
        display: inline-block;
        background-color: darken($body-secondary, 35%);
      }
      .light1 {
        width: 15px;
        @include border-radius(10px 0 0 10px);
      }
      .light2 {
        width: 10px;
        @include border-radius(0 10px 10px 0);
      }
    }
  }
  .door-handle {
    background-color: $body-primary;
    border: solid 0.2em $base;
    width: 10px;
    margin-left: 4.5%;
    height: 22px;
    position: absolute;
    z-index: 0;
    right: 5px;
    bottom: 40%;
    @include border-radius(20px);
    &::before {
      content: "";
      position: absolute;
      width: 50%;
      @include border-radius(20px);
      background-color: rgba(#fff, 0.3);
      height: 100%;
      display: block;
    }
  }
}

.front-window {
  top: 14%;
  right: 20px;
  width: 70px;
  height: 60%;
  position: absolute;
  .window-base {
    width: 100%;
    height: 10px;
    background-color: #abec39;
    @include border-radius(10px);
    border: solid 3px $base;
    @include box-shadow(0 3px 0 rgba(black, 0.15));
    position: relative;
    z-index: 1;
    top: 0;
  }
  .sun-shade {
    background-color: $body-primary;
    border: solid 4px $base;
    border-top: none;
    width: 90%;
    margin-left: 4.5%;
    height: 23px;
    position: relative;
    z-index: 0;
  }
  .curtain {
    position: relative;
    width: 90%;
    margin-left: 6%;
    font-size: 0;
    z-index: 2;
    span {
      width: calc(100% / 3);
      height: 15px;
      @include border-radius(0 0 15px 15px);
      display: inline-block;
      background-color: $body-primary;
      border: solid 4px $base;
      border-top: none;
      @include box-shadow(0 3px 0 rgba(black, 0.15));
      margin-left: -4px;
      &:nth-child(even) {
        background-color: #fff;
      }
      + span {
        width: calc((100% / 3) + 2px);
      }
    }
  }
  .windows-glass-wrap {
    height: 40px;
    width: 80%;
    margin-left: 9%;
    margin-top: -10px;
    border: solid 4px $base;
    border-top: none;
    background-color: darken($body-secondary, 15%);
    @include border-radius(0 0 10px 10px);
    padding: 2px 5px;
    font-size: 0;
    overflow: hidden;
    position: relative;
    .light {
      width: 120%;
      height: 100%;
      position: absolute;
      top: -7px;
      left: -15%;
      @include opacity(0.4);
      z-index: 0;
      @include transform(rotate(115deg));
      @include animation(glare 1.5s infinite linear);
      span {
        width: 100%;
        display: block;
        margin-bottom: 2px;
        background-color: #fff;
      }
      .light1 {
        height: 10px;
      }
      .light2 {
        height: 3px;
      }
      .light3 {
        height: 6px;
      }
    }
  }
  .air-hole {
    position: absolute;
    width: 100%;
    bottom: 5px;
    padding-top: 5px;
    span {
      width: 30px;
      height: 5px;
      background-color: #f5f4f1;
      display: block;
      margin: auto;
      @include border-radius(20px);
      border: solid 0.15em $base;
      + span {
        margin-top: 1px;
      }
    }
  }
}
.wheel-wrap {
  $wheel-size: 80px;
  width: $wheel-size;
  height: $wheel-size;
  position: absolute;
  z-index: 9;
  bottom: -($wheel-size/2);
  .wheel-shadow {
    width: 100%;
    height: 100%;
    display: block;
    border-top: solid ($wheel-size/2) $base;
    @include border-radius(50%);
    position: relative;
    @include animation(wheelShadow 3s infinite ease);
  }
  &.back {
    left: 80px;
  }
  &.front {
    right: 70px;
  }
  .wheel {
    width: 76%;
    height: 76%;
    left: 12%;
    top: 12%;
    position: absolute;
    text-align: center;
    font-size: 0;
    @include border-radius(50%);
    &::after {
      content: "";
      top: 1px;
      left: 2px;
      height: 100%;
      position: absolute;
      width: calc(100% - 4px);
      @include box-shadow(inset 0 7px 0 #747474);
      @include border-radius(50%);
      z-index: 9;
    }
    .wheel-outer {
      position: absolute;
      width: 100%;
      background-color: #a6a6a6;
      border: solid 3px $base;
      @include border-radius(50%);
      top: 0;
      left: 0;
      height: 100%;
      @include animation(wheel 0.4s infinite linear);
    }
    .wheel-outer::after {
      content: "";
      position: absolute;
      width: 10px;
      height: 5px;
      background-color: #b8b8b8;
      top: 5px;
      left: 16px;
      z-index: 8;
      @include border-radius(50%);
    }
    .wheel-cup {
      width: 60%;
      height: 60%;
      margin-top: 20%;
      display: inline-block;
      position: relative;
      background-color: darken($body-secondary, 20%);
      border: solid 3px darken($base, 5%);
      @include border-radius(50%);
      @include transform(rotate(45deg));
      padding: 5px 4px;
      &::after {
        content: "";
        width: 8px;
        position: absolute;
        left: 41%;
        top: 40%;
        height: 3px;
        background-color: darken($body-secondary, 40%);
        display: inline-block;
      }
      span {
        display: inline-block;
        width: 6px;
        height: 6px;
        margin: 1px;
        background-color: #a6a6a6;
        @include border-radius(50%);
        border: solid 1px darken($base, 5%);
      }
    }
  }
}
.love-wrap {
  position: absolute;
  left: 0;
  margin-top: 0;
  top: 0;
  .love {
    width: 34px;
    height: 34px;
    position: relative;
    display: inline-block;
    font-size: 0;
    @include transform(rotate(30deg));
    .circle {
      background-color: #fe1239;
      width: 24px;
      height: 24px;
      position: absolute;
      @include border-radius(50%);
      display: inline-block;
    }
    .circle1 {
      left: 0;
      bottom: 0;
    }
    .circle2 {
      right: 0;
      top: 0;
    }
    .square {
      background-color: #fe1239;
      width: 24px;
      height: 24px;
      position: absolute;
      display: inline-block;
      right: 0;
      bottom: 0;
    }
  }
}

.love-front {
  position: absolute;
  right: 24%;
  bottom: 30%;
  z-index: 8;
  @include transform(rotate(50deg));
  .love-wrap {
    @include opacity(0);
    @for $i from 1 through 4 {
      &:nth-child(#{$i}) {
        @include animation(love1 5s infinite ease-in #{$i * 0.5}s);
      }
    }
    @for $i from 5 through 8 {
      &:nth-child(#{$i}) {
        @include animation(love2 6s infinite ease-in #{$i * 0.5}s);
      }
    }
    @for $i from 9 through 12 {
      &:nth-child(#{$i}) {
        @include animation(love3 4s infinite ease-in #{$i * 0.5}s);
      }
    }
  }
}

.love-back {
  position: absolute;
  left: 18%;
  bottom: 20%;
  z-index: 5;
  @include transform(rotate(-90deg));
  .love {
    @include transform(rotate(100deg));
  }
  .love-wrap {
    right: 0;
    @for $i from 1 through 4 {
      &:nth-child(#{$i}) {
        @include animation(love4 4s infinite ease-in #{$i * 0.5}s);
      }
    }
    &:nth-child(1) {
      @include animation(love4 4s infinite ease-in 0s);
    }
    @for $i from 5 through 8 {
      &:nth-child(#{$i}) {
        @include animation(love5 3s infinite ease-in #{$i * 0.5}s);
      }
    }
  }
}

//animation keyframes
@include keyframes(love1, love1 animation) {
  0% {
    @include opacity(0);
    @include transform(scale(0.2) rotate(0deg) translate3d(100px, 0, 0));
  }
  50% {
    @include opacity(1);
  }
  100% {
    @include opacity(0);
    @include transform(scale(0.8) rotate(-40deg) translate3d(-50px, -400px, 0));
  }
}
@include keyframes(love2, love2 animation) {
  0% {
    @include opacity(0);
    @include transform(scale(0.3) rotate(0deg) translate3d(100px, 0, 0));
  }
  50% {
    @include opacity(1);
  }
  100% {
    @include opacity(0);
    @include transform(scale(0.7) rotate(-50deg) translate3d(-80px, -450px, 0));
  }
}
@include keyframes(love3, love3 animation) {
  0% {
    @include opacity(0);
    @include transform(scale(0.3) rotate(0deg) translate3d(100px, 0, 0));
  }
  50% {
    @include opacity(1);
  }
  100% {
    @include opacity(0);
    @include transform(
      scale(0.65) rotate(-60deg) translate3d(-40px, -400px, 0)
    );
  }
}
@include keyframes(love4, love4 animation) {
  0% {
    @include opacity(0);
    @include transform(scale(0.2) rotate(0) translate3d(0, 0, 0));
  }
  50% {
    @include opacity(1);
  }
  100% {
    @include opacity(0);
    @include transform(scale(0.6) rotate(-25deg) translate3d(100px, -200px, 0));
  }
}
@include keyframes(love5, love5 animation) {
  0% {
    @include opacity(0);
    @include transform(scale(0.2) rotate(0) translate3d(0, 0, 0));
  }
  50% {
    @include opacity(1);
  }
  100% {
    @include opacity(0);
    @include transform(scale(0.5) rotate(-20deg) translate3d(200px, -250px, 0));
  }
}

@include keyframes(wheel, wheel animation) {
  0% {
    @include transform(rotate(0deg));
  }
  100% {
    @include transform(rotate(360deg));
  }
}
@include keyframes(wheelShadow, wheelShadow animation) {
  0%,
  20%,
  40%,
  45%,
  60%,
  80%,
  100% {
    top: 0;
  }
  70% {
    top: 3px;
  }
  30%,
  90% {
    top: 6px;
  }
}
@include keyframes(body, body animation) {
  0%,
  20%,
  40%,
  45%,
  60%,
  80%,
  100% {
    top: 0;
  }
  70% {
    top: 3px;
  }
  30%,
  90% {
    top: 6px;
  }
}
@include keyframes(glare, glare animation) {
  from {
    left: 100%;
  }
  to {
    left: -100%;
  }
}
@include keyframes(roadLine, roadLine animation) {
  from {
    @include transform(translate(0, 0));
  }
  to {
    @include transform(translate(-800px, 0));
  }
}
@include keyframes(tree, tree animation) {
  from {
    @include transform(translate(50px, 0));
  }
  to {
    @include transform(translate(-1600px, 0));
  }
}

//demo purpose
@import url("https://fonts.googleapis.com/css?family=Muli");
body {
  font-family: "Muli", sans-serif;
}
.footer {
  position: fixed;
  right: 10px;
  bottom: 10px;
  color: #ea4c89;
  text-decoration: none;
  text-align: left;
  font-weight: bold;
  font-size: 10px;
  span {
    font-size: 12px;
  }
  a {
    font-weight: bold;
    font-size: 10px;
    color: #ea4c89;
    text-decoration: underline;
    &:hover {
      text-decoration: none;
    }
  }
  .dribble {
    img {
      max-width: 100%;
      width: 26px;
      position: relative;
      top: -2px;
      vertical-align: middle;
    }
  }
}

View Compiled

///Hooray No JS :)

/*

========================================================
A Loving Car with pure CSS,  Inspired Dribbble shot for UXDots.

https://dribbble.com/shots/2869958-Loving-car
========================================================

*/

This Pen is owned by Nikhil Krishnan on CodePen.

See more by @nikhil8krishnan on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.