Dirty_Bike_SVG_Animation

HTML5/CSS SVG Animation

by Kevin Gyan-Baffour

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dirtbikerace</title>
</head>
<body>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 1280 500" style="enable-background:new 0 0 1280 500;" xml:space="preserve">
   <rect id="XMLID_1_" class="st0" width="1280" height="401"/>
<rect id="XMLID_63_" x="-0.5" y="392.5" class="st1" width="1280" height="48"/>
<rect id="XMLID_214_" x="1076.5" y="214.5" class="st2" width="182" height="179"/>
<rect id="XMLID_221_" x="-36.5" y="214.5" class="st3" width="135" height="178"/>
<rect id="XMLID_211_" x="476.5" y="247.5" class="st4" width="74" height="145"/>
<rect id="XMLID_212_" x="572.5" y="276.5" class="st5" width="175" height="116"/>
<rect id="XMLID_213_" x="776.5" y="214.5" class="st3" width="136" height="178"/>
<g id="stand">
  <path id="XMLID_220_" class="st6" d="M431,391.5c0,1.9-1.6,3.5-3.5,3.5h-101c-1.9,0-3.5-1.6-3.5-3.5l0,0c0-1.9,1.6-3.5,3.5-3.5h101
    C429.4,388,431,389.6,431,391.5L431,391.5z"/>
  <path id="XMLID_219_" class="st7" d="M421,384.7c0,1.8-1.5,3.3-3.3,3.3h-77.5c-1.8,0-3.3-1.5-3.3-3.3v-0.5c0-1.8,1.5-3.3,3.3-3.3
    h77.5c1.8,0,3.3,1.5,3.3,3.3V384.7z"/>
  <g id="XMLID_223_">
    <polygon id="XMLID_217_" class="st8" points="378.9,309.1 396.5,381 406.5,381    "/>
    <polygon id="XMLID_216_" class="st9" points="378.9,309.1 361.4,381 351.4,381    "/>
  </g>
</g>
<g id="tree2">
  <g id="tree_1_">
    <path id="XMLID_50_" class="st10" d="M222,222.8v110.4c-3-1.2-32.6-15.1-37.8-46.7c-1-6.2-2.9-23.7,8.2-40.7
      C202.5,230.1,217,224.4,222,222.8z"/>
    <path id="XMLID_49_" class="st11" d="M222,222.8v110.4c3-1.2,32.5-15.1,37.7-46.7c1-6.2,2.9-23.7-8.1-40.7
      C241.5,230.1,227,224.4,222,222.8z"/>
    <path id="XMLID_6_" class="st12"...

CSS

.st0{fill:#80C1EC;}
  .st1{fill:#B6D684;stroke:#000000;stroke-miterlimit:10;}
  .st2{fill:#BFBFBF;stroke:#000000;stroke-miterlimit:10;}
  .st3{fill:#BBBCBB;stroke:#000000;stroke-miterlimit:10;}
  .st4{fill:#D3D3D3;stroke:#000000;stroke-miterlimit:10;}
  .st5{fill:#848484;stroke:#000000;stroke-miterlimit:10;}
  .st6{fill:#BE6873;}
  .st7{fill:#F49FAD;}
  .st8{fill:#C6C4A0;}
  .st9{fill:#FAF3AC;}
  .st10{fill:#B6D684;}
  .st11{fill:#AEC48D;}
  .st12{fill:#7D8972;}
  .st13{fill:#A8A7A5;}
  .st14{fill:#FFFFFF;}
  .st15{fill:none;stroke:#EF6B84;stroke-width:5.5438;stroke-miterlimit:10;}
  .st16{fill:#EF758D;}
  .st17{fill:none;stroke:#EF6B84;stroke-width:1.1883;stroke-miterlimit:10;}
  .st18{fill:none;stroke:#C1272D;stroke-miterlimit:10;}
  .st19{fill:none;stroke:#C1272D;stroke-width:1.0039;stroke-miterlimit:10;}
  .st20{fill:none;stroke:#000000;stroke-miterlimit:10;}
  .st21{fill:none;stroke:#000000;stroke-width:1.0063;stroke-miterlimit:10;}
  .st22{fill:#848484;stroke:#000000;stroke-width:0.8704;stroke-miterlimit:10;}
  .st23{fill:#848484;stroke:#000000;stroke-width:0.7447;stroke-miterlimit:10;}
  .st24{fill:#39B54A;stroke:#000000;stroke-miterlimit:10;}
  .st25{fill:#5D5D5D;}
  .st26{fill:none;stroke:#000000;stroke-width:3.5987;stroke-miterlimit:10;}
  .st27{fill:none;stroke:#433F3A;stroke-width:2.3068;stroke-miterlimit:10;}
  .st28{fill:none;stroke:#FFFFFF;stroke-width:0.6577;stroke-miterlimit:10;}
  .st29{fill:none;stroke:#000000;stroke-width:3.2791;stroke-miterlimit:10;}
  .st30{fill:none;stroke:#433F3A;stroke-width:2.1019;stroke-miterlimit:10;}
  .st31{fill:none;stroke:#FFFFFF;stroke-width:0.5992;stroke-miterlimit:10;}
  .st32{fill:#353433;}
  .st33{fill:#1D1E15;stroke:url(#XMLID_263_);stroke-width:0.3999;stroke-miterlimit:10;}
  .st34{fill:#CF26ED;}
  .st35{fill:#01003F;}
  .st36{fill:#4F4F4F;}
  .st37{fill:#F4ED0B;}
  .st38{fill:#FFFFFF;stroke:#000000;stroke-width:0.3999;stroke-miterlimit:10;}
  .st39{font-family:'AbadiMT-CondensedExtraBold';}
 ...