Tuesday 7 February 2017

simple step to create back to future car

Using CSS3 key frame property, you can create cool animation Back to future car without using any JavaScript frameworks, CSS3 & HTML  is helping to solve many web problems in a simple way. In this article I want to discuss how to implement CSS3 animations in a better way, use these and enrich your web projects. Take a quick look at these demos and try all these with modern browsers like Chrome, Firefox and Safari, sure you will love these effects.



video of simple step to create back to future car
download


CSS3  Syntax

.background {
  background-color: #ffac24;
  background: linear-gradient(top, #ffac24, #8a5600);
  background: -o-linear-gradient(top, #ffac24, #8a5600);
  background: -moz-linear-gradient(top, #ffac24, #8a5600);
  background: -webkit-linear-gradient(top, #ffac24, #8a5600);
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;
}

.car {
  animation: car-animation infinite 6s ease-in-out;
  position: relative;
  top: 50vh;
}
.car .part-1 {
  background-color: #B2B4B4;
  width: 500px;
  height: 40px;
  position: absolute;
  border-left: solid 10px #333333;
  border-radius: 10px 0 0 0;
  left: calc(50% - 250px - 10px);
  top: calc(50% - 20px);
}
.car .part-2 {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  border-width: 0 0 48px 200px;
  border-color: transparent transparent #B2B4B4 transparent;
  left: calc(50% - 250px );
  top: calc(50% - 20px - 48px );
}
.car .part-3 {
  background-color: #B2B4B4;
  width: 150px;
  height: 48px;
  position: absolute;
  left: calc(50% - 250px + 200px);
  top: calc(50% - 20px - 48px );
}
.car .part-4 {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  border-width: 48px 0 0 150px;
  border-color: transparent transparent transparent #B2B4B4;
  left: calc(50% + 250px - 150px);
  top: calc(50% - 20px - 48px);
}
.car .part-5 {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  border-width: 18px 0 0 225px;
  border-color: transparent transparent transparent #B2B4B4;
  left: calc(50% + 250px);
  top: calc(50% - 20px);
}
.car .part-6 {
  background-color: #B2B4B4;
  width: 225px;
  height: 22px;
  position: absolute;
  left: calc(50% + 250px);
  top: calc(50% + 20px - 22px);
}
.car .part-7 {
  z-index: -1000;
  background-color: #B2B4B4;
  width: 600px;
  height: 48px;
  position: absolute;
  border-bottom: solid 16px #333333;
  right: calc(50% - 250px - 225px);
  top: calc(50% + 20px);
}
.car .part-8 {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  border-width: 0 125px 33.6px 0;
  border-color: transparent #B2B4B4 transparent transparent;
  left: calc(50% - 250px);
  top: calc(50% + 20px + 14.4px );
}
.car .part-9 {
  background-color: #B2B4B4;
  width: 125px;
  height: 14.4px;
  position: absolute;
  border-left: solid 10px #333333;
  border-radius: 0 0 0 10px;
  left: calc(50% - 250px - 10px);
  top: calc(50% + 20px);
}
.car .part-10 {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  border-width: 22px 0 0 13.5px;
  border-color: transparent transparent transparent #333333;
  left: calc(50% + 250px + 225px);
  top: calc(50% + 20px - 22px);
}
.car .part-11 {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  border-width: 57.6px 18px 0 0;
  border-color: #333333 transparent transparent transparent;
  left: calc(50% + 250px + 225px);
  bottom: calc(50% - 20px - 48px - 16px);
}
.car .part-12 {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  border-width: 9.6px 0 0 12.8px;
  border-color: transparent transparent transparent #333333;
  left: calc(50% + 250px + 225px);
  bottom: calc(50% - 20px - 48px - 16px);
}
.car .part-13 {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  border-width: 0 0 44.8px 112.5px;
  border-color: transparent transparent #333333 transparent;
  right: calc(50% - 250px - 225px);
  bottom: calc(50% - 20px - 48px - 16px);
}
.car .part-20 {
  background-color: #333333;
  width: 725px;
  height: 4px;
  position: absolute;
  left: calc(50% - 250px);
  top: calc(50% + 20px);
}
.car .part-21 {
  animation: color-animation infinite 0.8s linear;
  background-color: #80878D;
  width: 46.2px;
  height: 15.4px;
  position: absolute;
  border-top: solid 4.62px #111111;
  border-bottom: solid 4.62px #111111;
  border-radius: 0 4.62px 4.62px 0;
  left: calc(50% + 250px + 225px - 23.1px);
  top: calc(50% + 20px);
}
.car .part-22 {
  background-color: #80878D;
  width: 13.86px;
  height: 20.64px;
  position: absolute;
  border: solid 1px black;
  left: calc(50% + 250px + 225px - 23.1px - 13.86px - 1px);
  top: calc(50% + 20px);
}
.car .part-23 {
  background-color: #80878D;
  width: 20.64px;
  height: 15.48px;
  position: absolute;
  border: solid 1px black;
  border-bottom: solid 11.32px black;
  left: calc(50% + 250px + 225px - 23.1px - 13.86px - 1px - 20.64px - 1px);
  bottom: calc(50% - 20px - 20.64px - 2px);
}
.car .part-24 {
  background-color: #00C9B4;
  width: 7.224px;
  height: 5.16px;
  position: absolute;
  border-radius: 3.096px 3.096px 0 0;
  border-top: solid 2.064px #111111;
  border-bottom: solid 3.096px #111111;
  left: calc(50% + 250px + 225px - 23.1px - 13.86px - 1px - 20.64px - 1px + 3.096px);
  bottom: calc(50% - 20px - 20.64px - 2px + 15.48px + 1px + 11.32px);
}
.car .part-25 {
  background-color: #00C9B4;
  width: 5.16px;
  height: 4.128px;
  position: absolute;
  border-radius: 2.064px 2.064px 0 0;
  border-top: solid 1.032px #111111;
  border-bottom: solid 2.064px #111111;
  left: calc(50% + 250px + 225px - 23.1px - 13.86px - 1px - 20.64px - 1px + 13.416px);
  bottom: calc(50% - 20px - 20.64px - 2px + 15.48px + 1px + 11.32px);
}
.car .part-30 {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  border-width: 91.2px 0 0 180px;
  border-color: transparent transparent transparent #111111;
  border-radius: 45.6px 0 0 0;
  left: calc(50% - 250px - 10px - 7.2px);
  bottom: calc(50% + 20px - 22.8px);
}
.car .part-30a {
  background-color: #111111;
  width: 18px;
  height: 3px;
  position: absolute;
  right: calc(50% + 250px + 10px );
  bottom: calc(50% + 20px - 22.8px + 13.68px);
}
.car .part-30b {
  background-color: #111111;
  width: 18px;
  height: 3px;
  position: absolute;
  right: calc(50% + 250px + 10px );
  bottom: calc(50% + 20px - 22.8px + 31.92px);
}
.car .part-30c {
  background-color: #111111;
  width: 18px;
  height: 3px;
  position: absolute;
  right: calc(50% + 250px + 10px );
  bottom: calc(50% + 20px - 22.8px + 50.16px);
}
.car .part-40 {
  background-color: #80878D;
  width: 70px;
  height: 33.6px;
  position: absolute;
  left: calc(50% - 250px + 100px - 35px );
  bottom: calc(50% + 20px);
}
.car .part-41a {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  border-width: 0 0 28.8px 28px;
  border-color: transparent transparent white transparent;
  right: calc(50% + 250px - 100px );
  bottom: calc(50% + 20px + 33.6px);
}
.car .part-41b {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  border-width: 28.8px 0 0 28px;
  border-color: transparent transparent transparent white;
  left: calc(50% - 250px + 100px );
  bottom: calc(50% + 20px + 33.6px);
}
.car .part-42 {
  background-color: white;
  width: 20px;
  height: 40px;
  position: absolute;
  border-bottom: solid 2px #111111;
  left: calc(50% - 250px + 100px - 10px );
  bottom: calc(50% + 20px + 33.6px + 17.28px);
}
.car .part-43 {
  width: 10px;
  height: 20px;
  border-radius: 0 10px 10px 0;
  background-color: #111111;
  position: absolute;
  left: calc(50% - 250px + 100px - 10px );
  bottom: calc(50% + 20px + 33.6px + 28.8px);
}
.car .part-50 {
  background-color: #333333;
  width: 40px;
  height: 14.4px;
  position: absolute;
  left: calc(50% - 250px + 200px  );
  bottom: calc(50% + 20px + 48px );
}
.car .part-51 {
  background-color: #111111;
  width: 8px;
  height: 3.6px;
  position: absolute;
  left: calc(50% - 250px + 200px + 24px );
  bottom: calc(50% + 20px + 48px + 14.4px );
}
.car .part-52 {
  background-color: #80878D;
  width: 32px;
  height: 8.64px;
  position: absolute;
  left: calc(50% - 250px + 200px + 24px - 3.2px );
  bottom: calc(50% + 20px + 48px + 14.4px + 3.6px );
}
.car .part-52a {
  background-color: #111111;
  width: 12.8px;
  height: 6.912px;
  position: absolute;
  left: calc(50% - 250px + 200px + 24px - 3.2px - 12.8px );
  bottom: calc(50% + 20px + 48px + 14.4px + 3.6px + 4.32px - 3.456px );
}
.car .part-52b {
  background-color: #111111;
  width: 3.2px;
  height: 4.32px;
  position: absolute;
  left: calc(50% - 250px + 200px + 24px + 28.8px );
  bottom: calc(50% + 20px + 48px + 14.4px + 3.6px + 4.32px - 2.16px );
}
.car .part-60a {
  background-color: #111111;
  width: 12px;
  height: 6px;
  position: absolute;
  right: calc(50% + 250px - 200px + 12px - 6px );
  bottom: calc(50% + 20px);
}
.car .part-61a {
  background-color: #111111;
  width: 12px;
  height: 6px;
  position: absolute;
  right: calc(50% + 250px - 200px + 30px - 6px );
  bottom: calc(50% + 20px);
}
.car .part-62a {
  background-color: #111111;
  width: 12px;
  height: 6px;
  position: absolute;
  right: calc(50% + 250px - 200px + 48px - 6px );
  bottom: calc(50% + 20px);
}
.car .part-60b {
  background-color: #111111;
  width: 5.4px;
  height: 36px;
  position: absolute;
  border-bottom: solid 6px #00C9B4;
  right: calc(50% + 250px - 200px + 12px - 2.7px );
  bottom: calc(50% + 20px + 6px);
}
.car .part-61b {
  background-color: #111111;
  width: 5.4px;
  height: 28.8px;
  position: absolute;
  border-bottom: solid 6px #00C9B4;
  right: calc(50% + 250px - 200px + 30px - 2.7px );
  bottom: calc(50% + 20px + 6px);
}
.car .part-62b {
  background-color: #111111;
  width: 5.4px;
  height: 21.6px;
  position: absolute;
  border-bottom: solid 6px #00C9B4;
  right: calc(50% + 250px - 200px + 48px - 2.7px );
  bottom: calc(50% + 20px + 6px);
}
.car .part-70 {
  animation: color-animation infinite 0.8s linear;
  background-color: #80878D;
  width: 20px;
  height: 61.6px;
  position: absolute;
  border-radius: 20px 0 0 0;
  left: calc(50% - 250px + 31.25px );
  top: calc(50% - 20px + 3px );
}
.car .part-71 {
  animation: color-animation infinite 0.8s linear;
  background-color: #80878D;
  width: 193.75px;
  height: 20px;
  position: absolute;
  border-radius: 20px 0 20px 0;
  left: calc(50% - 250px + 31.25px );
  top: calc(50% - 20px + 3px );
}
.car .part-72 {
  animation: color-animation infinite 0.8s linear;
  background-color: #80878D;
  width: 20px;
  height: 77px;
  position: absolute;
  border-radius: 0 0 20px 0;
  right: calc(50% + 25px );
  bottom: calc(50% + 20px - 20px - 3px );
}
.car .door-1 {
  background-color: #333333;
  width: 2px;
  height: 69px;
  position: absolute;
  left: calc(50% + 250px - 150px - 115.5px );
  bottom: calc(50% - 1px);
}
.car .door-2 {
  background-color: #333333;
  width: 23.09401px;
  height: 2px;
  position: absolute;
  transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  left: calc(50% + 250px - 150px - 115.5px - 11.54701px + 5.7735px + 1px );
  top: calc(50% + 10px );
}
.car .door-3 {
  background-color: #333333;
  width: 67.88225px;
  height: 2px;
  position: absolute;
  transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  left: calc(50% + 250px - 150px - 115.5px - 33.94113px + 24px + 11.54701px + 1px );
  top: calc(50% + 20px + 24px );
}
.car .door-4 {
  background-color: #333333;
  width: 46.18802px;
  height: 2px;
  position: absolute;
  transform: rotate(300deg);
  -o-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  -moz-transform: rotate(300deg);
  -webkit-transform: rotate(300deg);
  right: calc(50% - 250px - 23.09401px + 11.54701px + 1px );
  top: calc(50%);
}
.car .door-5 {
  background-color: #333333;
  width: 67.88225px;
  height: 2px;
  position: absolute;
  transform: rotate(315deg);
  -o-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
  right: calc(50% - 250px - 33.94113px + 24px + 23.09401px + 1px );
  top: calc(50% + 20px + 24px );
}
.car .curtain {
  background-color: #80878D;
  width: 25px;
  height: 4px;
  position: absolute;
  border: solid 2.4px #111111;
  border-top: none;
  border-radius: 0 0 4.8px 4.8px;
  left: calc(50% + 50px );
  top: calc(50% + 20px + 4px );
}
.car .window-1 {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  border-width: 0 0 28.8px 120px;
  border-color: transparent transparent #333333 transparent;
  right: calc(50% + 250px - 200px );
  bottom: calc(50% + 20px + 14.4px );
}
.car .window-2 {
  background-color: #333333;
  width: 120px;
  height: 14.4px;
  position: absolute;
  border-radius: 0 0 0 28.8px;
  right: calc(50% + 250px - 200px );
  bottom: calc(50% + 20px);
}
.car .window-3 {
  background-color: #00C9B4;
  width: 105px;
  height: 42.24px;
  position: absolute;
  right: calc(50% - 250px + 150px );
  bottom: calc(50% + 20px);
}
.car .window-4 {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  border-width: 42.24px 0 0 132px;
  border-color: transparent transparent transparent #00C9B4;
  left: calc(50% + 250px - 150px );
  bottom: calc(50% + 20px);
}
.car .window-5 {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  border-width: 12.672px 0 0 39.6px;
  border-color: transparent transparent transparent #111111;
  right: calc(50% - 250px + 150px - 132px );
  bottom: calc(50% + 20px);
}
.car .windowl-0 {
  background-color: #B2B4B4;
  width: 52.5px;
  height: 2px;
  position: absolute;
  right: calc(50% - 250px + 150px + 10.5px );
  bottom: calc(50% + 20px + 19.008px - 2px);
}
.car .windowl-1 {
  background-color: #B2B4B4;
  width: 26.88137px;
  height: 2px;
  position: absolute;
  transform: rotate(315deg);
  -o-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
  right: calc(50% - 250px + 150px + 10.5px + 52.5px - 13.44069px + 9.504px - 1px);
  bottom: calc(50% + 20px + 9.504px - 1px);
}
.car .windowl-2 {
  background-color: #B2B4B4;
  width: 61.51118px;
  height: 2px;
  position: absolute;
  transform: rotate(18deg);
  -o-transform: rotate(18deg);
  -ms-transform: rotate(18deg);
  -moz-transform: rotate(18deg);
  -webkit-transform: rotate(18deg);
  right: calc(50% - 250px + 150px + 10.5px - 30.75559px - 29.2503px + 1px);
  bottom: calc(50% + 20px + 9.504px - 1px);
}
.car .back-wheel-bw {
  width: 128.8px;
  height: 64.4px;
  border-radius: 64.4px 64.4px 0 0;
  background-color: #333333;
  position: absolute;
  transform: rotate(15deg);
  -o-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  left: calc(50% - 250px + 125px  - 64.4px + 9.016px );
  bottom: calc(50% - 20px - 48px - 16px - 39.2px + 56px);
}
.car .back-wheel {
  background-color: #B2B4B4;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: solid #111111 21px;
  position: absolute;
  left: calc(50% - 250px + 125px - 56px);
  bottom: calc(50% - 20px - 48px - 16px - 39.2px);
}
.car .front-wheel-bw {
  width: 119.6px;
  height: 59.8px;
  border-radius: 59.8px 59.8px 0 0;
  background-color: #333333;
  position: absolute;
  left: calc(50% + 250px + 112.5px - 59.8px);
  bottom: calc(50% - 20px - 48px );
}
.car .front-wheel {
  background-color: #B2B4B4;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  border: solid #111111 19.5px;
  position: absolute;
  left: calc(50% + 250px + 112.5px - 52px);
  bottom: calc(50% - 20px - 48px - 16px - 36.4px);
}
.car .wheel {
  animation: wheel-mouvement infinite 0.5s linear;
}
.car .wheel .spot {
  background-color: #80878D;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: solid #111111 0.7px;
  position: absolute;
}
.car .wheel .spot-1 {
  left: 30%;
  top: 30%;
}
.car .wheel .spot-2 {
  right: 30%;
  top: 30%;
}
.car .wheel .spot-3 {
  right: 30%;
  bottom: 30%;
}
.car .wheel .spot-4 {
  left: 30%;
  bottom: 30%;
}

CSS3 Keyframe Syntax
@keyframes wheel-mouvement {
  0% {
    transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}
@-o-keyframes wheel-mouvement {
  0% {
    transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes wheel-mouvement {
  0% {
    transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}
@-webkit-keyframes wheel-mouvement {
  0% {
    transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}
@keyframes color-animation {
  0%, 100% {
    background-color: #2196F3;
    -webkit-box-shadow: 0px 0px 20px #2196F3;
    -moz-box-shadow: 0px 0px 20px #2196F3;
    -o-box-shadow: 0px 0px 20px #2196F3;
    box-shadow: 0px 0px 20px #2196F3;
  }
  50% {
    background-color: #BBDEFB;
    -webkit-box-shadow: 0px 0px 20px #BBDEFB;
    -moz-box-shadow: 0px 0px 20px #BBDEFB;
    -o-box-shadow: 0px 0px 20px #BBDEFB;
    box-shadow: 0px 0px 20px #BBDEFB;
  }
}
@-o-keyframes color-animation {
  0%, 100% {
    background-color: #2196F3;
    -webkit-box-shadow: 0px 0px 20px #2196F3;
    -moz-box-shadow: 0px 0px 20px #2196F3;
    -o-box-shadow: 0px 0px 20px #2196F3;
    box-shadow: 0px 0px 20px #2196F3;
  }
  50% {
    background-color: #BBDEFB;
    -webkit-box-shadow: 0px 0px 20px #BBDEFB;
    -moz-box-shadow: 0px 0px 20px #BBDEFB;
    -o-box-shadow: 0px 0px 20px #BBDEFB;
    box-shadow: 0px 0px 20px #BBDEFB;
  }
}
@-moz-keyframes color-animation {
  0%, 100% {
    background-color: #2196F3;
    -webkit-box-shadow: 0px 0px 20px #2196F3;
    -moz-box-shadow: 0px 0px 20px #2196F3;
    -o-box-shadow: 0px 0px 20px #2196F3;
    box-shadow: 0px 0px 20px #2196F3;
  }
  50% {
    background-color: #BBDEFB;
    -webkit-box-shadow: 0px 0px 20px #BBDEFB;
    -moz-box-shadow: 0px 0px 20px #BBDEFB;
    -o-box-shadow: 0px 0px 20px #BBDEFB;
    box-shadow: 0px 0px 20px #BBDEFB;
  }
}
@-webkit-keyframes color-animation {
  0%, 100% {
    background-color: #2196F3;
    -webkit-box-shadow: 0px 0px 20px #2196F3;
    -moz-box-shadow: 0px 0px 20px #2196F3;
    -o-box-shadow: 0px 0px 20px #2196F3;
    box-shadow: 0px 0px 20px #2196F3;
  }
  50% {
    background-color: #BBDEFB;
    -webkit-box-shadow: 0px 0px 20px #BBDEFB;
    -moz-box-shadow: 0px 0px 20px #BBDEFB;
    -o-box-shadow: 0px 0px 20px #BBDEFB;
    box-shadow: 0px 0px 20px #BBDEFB;
  }
}
@keyframes car-animation {
  0% {
    transform: translate(-100%, 0px);
    -o-transform: translate(-100%, 0px);
    -ms-transform: translate(-100%, 0px);
    -moz-transform: translate(-100%, 0px);
    -webkit-transform: translate(-100%, 0px);
  }
  10% {
    transform: translate(15%, 0px);
    -o-transform: translate(15%, 0px);
    -ms-transform: translate(15%, 0px);
    -moz-transform: translate(15%, 0px);
    -webkit-transform: translate(15%, 0px);
  }
  20% {
    transform: translate(-5%, 0px);
    -o-transform: translate(-5%, 0px);
    -ms-transform: translate(-5%, 0px);
    -moz-transform: translate(-5%, 0px);
    -webkit-transform: translate(-5%, 0px);
  }
  60% {
    transform: translate(-5%, 0px);
    -o-transform: translate(-5%, 0px);
    -ms-transform: translate(-5%, 0px);
    -moz-transform: translate(-5%, 0px);
    -webkit-transform: translate(-5%, 0px);
  }
  70% {
    transform: translate(-25%, 0px);
    -o-transform: translate(-25%, 0px);
    -ms-transform: translate(-25%, 0px);
    -moz-transform: translate(-25%, 0px);
    -webkit-transform: translate(-25%, 0px);
  }
  80% {
    transform: translate(100%, 0px);
    -o-transform: translate(100%, 0px);
    -ms-transform: translate(100%, 0px);
    -moz-transform: translate(100%, 0px);
    -webkit-transform: translate(100%, 0px);
  }
  100% {
    transform: translate(100%, 0px);
    -o-transform: translate(100%, 0px);
    -ms-transform: translate(100%, 0px);
    -moz-transform: translate(100%, 0px);
    -webkit-transform: translate(100%, 0px);
  }
}
@-o-keyframes car-animation {
  0% {
    transform: translate(-100%, 0px);
    -o-transform: translate(-100%, 0px);
    -ms-transform: translate(-100%, 0px);
    -moz-transform: translate(-100%, 0px);
    -webkit-transform: translate(-100%, 0px);
  }
  10% {
    transform: translate(15%, 0px);
    -o-transform: translate(15%, 0px);
    -ms-transform: translate(15%, 0px);
    -moz-transform: translate(15%, 0px);
    -webkit-transform: translate(15%, 0px);
  }
  20% {
    transform: translate(-5%, 0px);
    -o-transform: translate(-5%, 0px);
    -ms-transform: translate(-5%, 0px);
    -moz-transform: translate(-5%, 0px);
    -webkit-transform: translate(-5%, 0px);
  }
  60% {
    transform: translate(-5%, 0px);
    -o-transform: translate(-5%, 0px);
    -ms-transform: translate(-5%, 0px);
    -moz-transform: translate(-5%, 0px);
    -webkit-transform: translate(-5%, 0px);
  }
  70% {
    transform: translate(-25%, 0px);
    -o-transform: translate(-25%, 0px);
    -ms-transform: translate(-25%, 0px);
    -moz-transform: translate(-25%, 0px);
    -webkit-transform: translate(-25%, 0px);
  }
  80% {
    transform: translate(100%, 0px);
    -o-transform: translate(100%, 0px);
    -ms-transform: translate(100%, 0px);
    -moz-transform: translate(100%, 0px);
    -webkit-transform: translate(100%, 0px);
  }
  100% {
    transform: translate(100%, 0px);
    -o-transform: translate(100%, 0px);
    -ms-transform: translate(100%, 0px);
    -moz-transform: translate(100%, 0px);
    -webkit-transform: translate(100%, 0px);
  }
}
@-moz-keyframes car-animation {
  0% {
    transform: translate(-100%, 0px);
    -o-transform: translate(-100%, 0px);
    -ms-transform: translate(-100%, 0px);
    -moz-transform: translate(-100%, 0px);
    -webkit-transform: translate(-100%, 0px);
  }
  10% {
    transform: translate(15%, 0px);
    -o-transform: translate(15%, 0px);
    -ms-transform: translate(15%, 0px);
    -moz-transform: translate(15%, 0px);
    -webkit-transform: translate(15%, 0px);
  }
  20% {
    transform: translate(-5%, 0px);
    -o-transform: translate(-5%, 0px);
    -ms-transform: translate(-5%, 0px);
    -moz-transform: translate(-5%, 0px);
    -webkit-transform: translate(-5%, 0px);
  }
  60% {
    transform: translate(-5%, 0px);
    -o-transform: translate(-5%, 0px);
    -ms-transform: translate(-5%, 0px);
    -moz-transform: translate(-5%, 0px);
    -webkit-transform: translate(-5%, 0px);
  }
  70% {
    transform: translate(-25%, 0px);
    -o-transform: translate(-25%, 0px);
    -ms-transform: translate(-25%, 0px);
    -moz-transform: translate(-25%, 0px);
    -webkit-transform: translate(-25%, 0px);
  }
  80% {
    transform: translate(100%, 0px);
    -o-transform: translate(100%, 0px);
    -ms-transform: translate(100%, 0px);
    -moz-transform: translate(100%, 0px);
    -webkit-transform: translate(100%, 0px);
  }
  100% {
    transform: translate(100%, 0px);
    -o-transform: translate(100%, 0px);
    -ms-transform: translate(100%, 0px);
    -moz-transform: translate(100%, 0px);
    -webkit-transform: translate(100%, 0px);
  }
}
@-webkit-keyframes car-animation {
  0% {
    transform: translate(-100%, 0px);
    -o-transform: translate(-100%, 0px);
    -ms-transform: translate(-100%, 0px);
    -moz-transform: translate(-100%, 0px);
    -webkit-transform: translate(-100%, 0px);
  }
  10% {
    transform: translate(15%, 0px);
    -o-transform: translate(15%, 0px);
    -ms-transform: translate(15%, 0px);
    -moz-transform: translate(15%, 0px);
    -webkit-transform: translate(15%, 0px);
  }
  20% {
    transform: translate(-5%, 0px);
    -o-transform: translate(-5%, 0px);
    -ms-transform: translate(-5%, 0px);
    -moz-transform: translate(-5%, 0px);
    -webkit-transform: translate(-5%, 0px);
  }
  60% {
    transform: translate(-5%, 0px);
    -o-transform: translate(-5%, 0px);
    -ms-transform: translate(-5%, 0px);
    -moz-transform: translate(-5%, 0px);
    -webkit-transform: translate(-5%, 0px);
  }
  70% {
    transform: translate(-25%, 0px);
    -o-transform: translate(-25%, 0px);
    -ms-transform: translate(-25%, 0px);
    -moz-transform: translate(-25%, 0px);
    -webkit-transform: translate(-25%, 0px);
  }
  80% {
    transform: translate(100%, 0px);
    -o-transform: translate(100%, 0px);
    -ms-transform: translate(100%, 0px);
    -moz-transform: translate(100%, 0px);
    -webkit-transform: translate(100%, 0px);
  }
  100% {
    transform: translate(100%, 0px);
    -o-transform: translate(100%, 0px);
    -ms-transform: translate(100%, 0px);
    -moz-transform: translate(100%, 0px);
    -webkit-transform: translate(100%, 0px);
  }
}



HTML Code
CSS3 works with HTML doctype this informs the browser to render code in advanced way, include the CSS code within the tag HEAD.
<div class="background"></div>
<div class="car">

<div class="part-50"></div>
<div class="part-51"></div>
<div class="part-52"></div>
<div class="part-52a"></div>
<div class="part-52b"></div>

<div class="part-40"></div>
<div class="part-41a"></div>
<div class="part-41b"></div>
<div class="part-42"></div>
<div class="part-43"></div>

<div class="part-30"></div>
<div class="part-30a"></div>
<div class="part-30b"></div>
<div class="part-30c"></div>

<div class="part-1"></div>
<div class="part-2"></div>
<div class="part-3"></div>
<div class="part-4"></div>
<div class="part-5"></div>
<div class="part-6"></div>
<div class="part-7"></div>
<div class="part-8"></div>
<div class="part-9"></div>


<div class="part-10"></div>
<div class="part-11"></div>
<div class="part-12"></div>
<div class="part-13"></div>


<div class="part-20"></div>
<div class="part-21"></div>
<div class="part-22"></div>
<div class="part-23"></div>
<div class="part-24"></div>
<div class="part-25"></div>


<div class="window window-1"></div>
<div class="window window-2"></div>
<div class="window window-3"></div>
<div class="window window-4"></div>
<div class="window window-5"></div>

<div class="windowl-0"></div>
<div class="windowl-1"></div>
<div class="windowl-2"></div>

<div class="door-1"></div>
<div class="door-2"></div>
<div class="door-3"></div>
<div class="door-4"></div>
<div class="door-5"></div>
<div class="curtain"></div>
<div class="key"></div>

<div class="part-60a"></div>
<div class="part-61a"></div>
<div class="part-62a"></div>
<div class="part-60b"></div>
<div class="part-61b"></div>
<div class="part-62b"></div>

<div class="back-wheel-bw"></div>
<div class="back-wheel wheel">
<div class="spot spot-1"></div>
<div class="spot spot-2"></div>
<div class="spot spot-3"></div>
<div class="spot spot-4"></div>
</div>
<div class="front-wheel-bw"></div>
<div class="front-wheel wheel">
<div class="spot spot-1"></div>
<div class="spot spot-2"></div>
<div class="spot spot-3"></div>
<div class="spot spot-4"></div>
</div>

<div class="part-70"></div>
<div class="part-71"></div>
<div class="part-72"></div>
</div>

0 comments: