Back to the Future Button

Back to the Future Button.markdown

Back to the Future Button

DeLorean created entirely with CSS3. Submission for the BUTTONS art show by Northern-Southern.

A Pen by Pralie on CodePen.

License.

index.html

<!--
  BACK TO THE FUTURE BUTTON
  Created by Pralie Dutzel
  Submission for BUTTONS by Northern-Southern
  Best viewed in Safari or Chrome
  Best viewed in portrait mode for devices
-->

<section class="start">
  <p>Are you ready to go...</p>
</section>

<section id="martyMcFly">
  <div id="deLorean">
    <div id="back"></div>
    <div id="top-left"></div>
    <div id="top-mid"></div>
    <div id="top-right"></div>
    <div id="front"></div>
  
    <button id="future">
      Back to the Future
    </button>
  
    <div id="tire-left">
      <div class="spoke spoke01"></div>
      <div class="spoke spoke02"></div>
      <div class="spoke spoke03"></div>
      <div class="spoke spoke04"></div>
      <div class="spoke spoke05"></div>
      <div class="spoke spoke06"></div>
      <div class="spoke spoke07"></div>
      <div class="spoke spoke08"></div>
      <div class="spoke spoke09"></div>
      <div class="spoke spoke10"></div>
      <div class="spoke spoke11"></div>
      <div class="spoke spoke12"></div>
      <div class="spoke spoke13"></div>
      <div class="spoke spoke14"></div>
      <div class="spoke spoke15"></div>
      <div class="spoke spoke16"></div>
      <div class="spoke spoke17"></div>
      <div class="spoke spoke18"></div>
    </div>
    <div id="tire-right">
      <div class="spoke spoke01"></div>
      <div class="spoke spoke02"></div>
      <div class="spoke spoke03"></div>
      <div class="spoke spoke04"></div>
      <div class="spoke spoke05"></div>
      <div class="spoke spoke06"></div>
      <div class="spoke spoke07"></div>
      <div class="spoke spoke08"></div>
      <div class="spoke spoke09"></div>
      <div class="spoke spoke10"></div>
      <div class="spoke spoke11"></div>
      <div class="spoke spoke12"></div>
      <div class="spoke spoke13"></div>
      <div class="spoke spoke14"></div>
      <div class="spoke spoke15"></div>
      <div class="spoke spoke16"></div>
      <div class="spoke spoke17"></div>
      <div class="spoke spoke18"></div>
    </div>
    <div id="underside"></div>
    <div id="lines"></div>
    <div id="door"></div>
    <div id="mirror"></div>
    <div id="cable"></div>
    <div id="cable-filler"></div>
    <div id="stuff"></div>
  </div>
  <div id="fire-trail">
    <div id="fire"></div>
    <div id="fire01">
      <div class="fire-row1"></div>
      <div class="fire-row2"></div>
      <div class="fire-row3"></div>
    </div>
    <div id="fire02">
      <div class="fire-row1"></div>
      <div class="fire-row2"></div>
      <div class="fire-row3"></div>
    </div>
    <div id="fire03">
      <div class="fire-row1"></div>
      <div class="fire-row2"></div>
      <div class="fire-row3"></div>
    </div>
    <div id="fire04">
      <div class="fire-row1"></div>
      <div class="fire-row2"></div>
      <div class="fire-row3"></div>
    </div>
    <div id="fire05">
      <div class="fire-row1"></div>
      <div class="fire-row2"></div>
      <div class="fire-row3"></div>
    </div>
    <div id="fire06">
      <div class="fire-row1"></div>
      <div class="fire-row2"></div>
      <div class="fire-row3"></div>
    </div>
    <div id="fire07">
      <div class="fire-row1"></div>
      <div class="fire-row2"></div>
      <div class="fire-row3"></div>
    </div>
    <div id="fire08">
      <div class="fire-row1"></div>
      <div class="fire-row2"></div>
      <div class="fire-row3"></div>
    </div>
    <div id="fire09">
      <div class="fire-row1"></div>
      <div class="fire-row2"></div>
      <div class="fire-row3"></div>
    </div>
    <div id="fire10">
      <div class="fire-row1"></div>
      <div class="fire-row2"></div>
      <div class="fire-row3"></div>
    </div>
    <div id="fire11">
      <div class="fire-row1"></div>
      <div class="fire-row2"></div>
      <div class="fire-row3"></div>
    </div>
    <div id="fire12">
      <div class="fire-row1"></div>
      <div class="fire-row2"></div>
      <div class="fire-row3"></div>
    </div>
    <div id="fire13">
      <div class="fire-row1"></div>
      <div class="fire-row2"></div>
      <div class="fire-row3"></div>
    </div>
    <div id="fire14">
      <div class="fire-row1"></div>
      <div class="fire-row2"></div>
      <div class="fire-row3"></div>
    </div>
  </div>
</section>


<section class="about">
  <p>
    <a href="javascript:history.go(0)">Reload</a> &nbsp; | &nbsp;
    Created by <a href="http://praliedutzel.com/" target="_new">Pralie Dutzel</a> for the <a href="http://buttons.northern-southern.com/" target="_new">BUTTONS</a> Art Show
  </p>
</section>

script.js

// Activate the CSS3 animations

$('#future').on("click", function() {
  buildCar();
    $(this).css({'color':'#9aa2ac'});
	});

function buildCar() {
  //Slide the left tire up and then spin
  $('#tire-left').addClass("slideUp");
  $('#tire-left').one('webkitAnimationEnd oanimationend msAnimationEnd animationEnd', function(e) {
    $(this).removeClass("slideUp");
    $(this).addClass("spinTires");
  });
  
  //Slide the right tire up and then spin
  $('#tire-right').addClass("slideUp");
  $('#tire-right').one('webkitAnimationEnd oanimationend msAnimationEnd animationEnd', function(e) {
    $(this).removeClass("slideUp");
    $(this).addClass("spinTires");
  });
  
  $('#back').addClass("rotateBack");
  $('#top-left').addClass("rotateTopLeft");
  $('#top-mid').addClass("rotateTopMid");
  $('#top-right').addClass("rotateTopRight");
  $('#front').addClass("rotateTopRight");
  $('#underside').addClass("rotateBack");
  $('#lines').addClass("rotateLines");
  $('#door').addClass("rotateTopMid");
  $('#mirror').addClass("rotateTopRight");
  //$('#bumper').addClass("fadeIn");
  $('#cable').addClass("rotateTopMid");
  $('#cable-filler').addClass("rotateCableFiller");
  $('#stuff').addClass("rotateStuff");
  $('#deLorean').addClass("move88mph");
  
  $('#fire').addClass("hideFire");
  $('#fire').one('webkitAnimationEnd oanimationend msAnimationEnd animationEnd', function(e) {
    $(this).removeClass("hideFire");
    $(this).addClass("expandRight");
    $('#fire01').addClass("fadeFire01");
    $('#fire02').addClass("fadeFire02");
    $('#fire03').addClass("fadeFire03");
    $('#fire04').addClass("fadeFire04");
    $('#fire05').addClass("fadeFire05");
    $('#fire06').addClass("fadeFire06");
    $('#fire07').addClass("fadeFire07");
    $('#fire08').addClass("fadeFire08");
    $('#fire09').addClass("fadeFire09");
    $('#fire10').addClass("fadeFire10");
    $('#fire11').addClass("fadeFire11");
    $('#fire12').addClass("fadeFire12");
    $('#fire13').addClass("fadeFire13");
    $('#fire14').addClass("fadeFire14");
  });
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://praliedutzel.com/js/touchable.js"></script>

style.css

/* Box-Sizing */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Micro Clearfix */
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }

body {
  background-color: #073d56;
  margin: 0;
  padding: 0;
  font-size: 100%;
  overflow: hidden;
}

.start {
  width: 350px;
  margin: 10px auto;
}

#martyMcFly {
  width: 367px;
  margin: auto;
  text-align: center;
}

.about p {
  margin-top: 100px;
  color: #1c6485;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 0.70em;
  letter-spacing: 0.05em;
}

.about a {
  color: #1c6485;
  text-decoration: none;
}

.about a:hover, .about a:visited {
  color: #db6115;
}

p {
  padding-bottom: 50px;
  color: #fff;
  font-family: 'Pacifico', Arial, sans-serif;
  font-size: 2em;
  text-align: center;
}

/* Draw the button */
#future {
  background-color: #9aa2ac;
  padding: 15px 20px;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  color: #fdca49;
  font-family: 'Orbitron', Arial, sans-serif;
  font-size: 1.5em;
  font-weight: normal;
  letter-spacing: 0.15em;
  vertical-align: middle;
  z-index: 2;
  -webkit-border-radius: 8px 8px;
  -moz-border-radius: 8px 8px;
  border-radius: 8px 8px;
  box-shadow: 0 10px #454545;
}

#future:hover, #future:active {
  color: #db6115;
  box-shadow: 0 8px #454545;
  top: 2px;
}

/* Draw the tires */
#tire-left, #tire-right {
  background-color: #353535;
  width: 76px;
  height: 76px;
  margin-top: -35px;
  position: absolute;
  z-index: 999;
  border-left: red;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  visibility: hidden;
}

#tire-left {
  margin-left: 0;
}

#tire-right {
  margin-left: 300px;
}

/* Draw the insides of the tires */
#tire-left:before, #tire-right:before {
  content: '';
  position: absolute;
  display: block;
  background-color: #9aa2ac;
  width: 50px;
  height: 50px;
  margin-top: 13px;
  margin-left: 13px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

/* Draw the spokes for the tires */
.spoke {
  background-color: #353535;
  width: 2px;
  height: 27px;
  margin-top: 10px;
  margin-left: 36px;
  position: absolute;
  z-index: 9999;
}

.spoke01 {
  -webkit-transform-origin: 2px 28px;
  -moz-transform-origin: 2px 28px;
  -o-transform-origin: 2px 28px;
  -ms-transform-origin: 2px 28px;
  transform-origin: 2px 28px;
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  transform: rotate(20deg);
}

.spoke02 {
  -webkit-transform-origin: 2px 28px;
  -moz-transform-origin: 2px 28px;
  -o-transform-origin: 2px 28px;
  -ms-transform-origin: 2px 28px;
  transform-origin: 2px 28px;
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  transform: rotate(40deg);
}

.spoke03 {
  -webkit-transform-origin: 2px 28px;
  -moz-transform-origin: 2px 28px;
  -o-transform-origin: 2px 28px;
  -ms-transform-origin: 2px 28px;
  transform-origin: 2px 28px;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  transform: rotate(60deg);
}

.spoke04 {
  -webkit-transform-origin: 2px 28px;
  -moz-transform-origin: 2px 28px;
  -o-transform-origin: 2px 28px;
  -ms-transform-origin: 2px 28px;
  transform-origin: 2px 28px;
  -webkit-transform: rotate(80deg);
  -moz-transform: rotate(80deg);
  transform: rotate(80deg);
}

.spoke05 {
  -webkit-transform-origin: 2px 28px;
  -moz-transform-origin: 2px 28px;
  -o-transform-origin: 2px 28px;
  -ms-transform-origin: 2px 28px;
  transform-origin: 2px 28px;
  -webkit-transform: rotate(100deg);
  -moz-transform: rotate(100deg);
  transform: rotate(100deg);
}

.spoke06 {
  -webkit-transform-origin: 2px 28px;
  -moz-transform-origin: 2px 28px;
  -o-transform-origin: 2px 28px;
  -ms-transform-origin: 2px 28px;
  transform-origin: 2px 28px;
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  transform: rotate(120deg);
}

.spoke07 {
  -webkit-transform-origin: 2px 28px;
  -moz-transform-origin: 2px 28px;
  -o-transform-origin: 2px 28px;
  -ms-transform-origin: 2px 28px;
  transform-origin: 2px 28px;
  -webkit-transform: rotate(140deg);
  -moz-transform: rotate(140deg);
  transform: rotate(140deg);
}

.spoke08 {
  -webkit-transform-origin: 2px 28px;
  -moz-transform-origin: 2px 28px;
  -o-transform-origin: 2px 28px;
  -ms-transform-origin: 2px 28px;
  transform-origin: 2px 28px;
  -webkit-transform: rotate(160deg);
  -moz-transform: rotate(160deg);
  transform: rotate(160deg);
}

.spoke09 {
  -webkit-transform-origin: 2px 28px;
  -moz-transform-origin: 2px 28px;
  -o-transform-origin: 2px 28px;
  -ms-transform-origin: 2px 28px;
  transform-origin: 2px 28px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}

.spoke10 {
  -webkit-transform-origin: 2px 28px;
  -moz-transform-origin: 2px 28px;
  -o-transform-origin: 2px 28px;
  -ms-transform-origin: 2px 28px;
  transform-origin: 2px 28px;
  -webkit-transform: rotate(200deg);
  -moz-transform: rotate(200deg);
  transform: rotate(200deg);
}

.spoke11 {
  -webkit-transform-origin: 2px 28px;
  -moz-transform-origin: 2px 28px;
  -o-transform-origin: 2px 28px;
  -ms-transform-origin: 2px 28px;
  transform-origin: 2px 28px;
  -webkit-transform: rotate(220deg);
  -moz-transform: rotate(220deg);
  transform: rotate(220deg);
}

.spoke12 {
  -webkit-transform-origin: 2px 28px;
  -moz-transform-origin: 2px 28px;
  -o-transform-origin: 2px 28px;
  -ms-transform-origin: 2px 28px;
  transform-origin: 2px 28px;
  -webkit-transform: rotate(240deg);
  -moz-transform: rotate(240deg);
  transform: rotate(240deg);
}

.spoke13 {
  -webkit-transform-origin: 2px 28px;
  -moz-transform-origin: 2px 28px;
  -o-transform-origin: 2px 28px;
  -ms-transform-origin: 2px 28px;
  transform-origin: 2px 28px;
  -webkit-transform: rotate(260deg);
  -moz-transform: rotate(260deg);
  transform: rotate(260deg);
}

.spoke14 {
  -webkit-transform-origin: 2px 28px;
  -moz-transform-origin: 2px 28px;
  -o-transform-origin: 2px 28px;
  -ms-transform-origin: 2px 28px;
  transform-origin: 2px 28px;
  -webkit-transform: rotate(280deg);
  -moz-transform: rotate(280deg);
  transform: rotate(280deg);
}

.spoke15 {
  -webkit-transform-origin: 2px 28px;
  -moz-transform-origin: 2px 28px;
  -o-transform-origin: 2px 28px;
  -ms-transform-origin: 2px 28px;
  transform-origin: 2px 28px;
  -webkit-transform: rotate(300deg);
  -moz-transform: rotate(300deg);
  transform: rotate(300deg);
}

.spoke16 {
  -webkit-transform-origin: 2px 28px;
  -moz-transform-origin: 2px 28px;
  -o-transform-origin: 2px 28px;
  -ms-transform-origin: 2px 28px;
  transform-origin: 2px 28px;
  -webkit-transform: rotate(320deg);
  -moz-transform: rotate(320deg);
  transform: rotate(320deg);
}

.spoke17 {
  -webkit-transform-origin: 2px 28px;
  -moz-transform-origin: 2px 28px;
  -o-transform-origin: 2px 28px;
  -ms-transform-origin: 2px 28px;
  transform-origin: 2px 28px;
  -webkit-transform: rotate(340deg);
  -moz-transform: rotate(340deg);
  transform: rotate(340deg);
}

.spoke18 {
  -webkit-transform-origin: 2px 28px;
  -moz-transform-origin: 2px 28px;
  -o-transform-origin: 2px 28px;
  -ms-transform-origin: 2px 28px;
  transform-origin: 2px 28px;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  transform: rotate(360deg);
}

/* Draw the top components of the delorean */
#back {
  width: 70px;
  height: 10px;
  border-bottom: 75px solid #9aa2ac;
  border-left: 20px solid transparent;
  margin-top: -26px;
  margin-left: -39px;
  position: absolute;
  z-index: 1;
  -webkit-transform: rotate(280deg);
  -moz-transform: rotate(280deg);
  transform: rotate(280deg);
  visibility: hidden;
}

#back:after {
  content: '';
  position: absolute;
  display: block;
  background-color: #9aa2ac;
  width: 45px;
  height: 95px;
  margin-top: 5px;
  margin-left: -20px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

#top-left {
  width: 55px;
  height: 10px;
  border-right: 20px solid transparent;
  border-bottom: 125px solid #9aa2ac;
  margin-top: -85px;
  margin-left: 1px;
  position: absolute;
  z-index: 2;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  transform: rotate(270deg);
  visibility: hidden;
}

/* Draw the left window */
#top-left:after {
  content: '';
  position: absolute;
  display: block;
  width: 33px;
  height: 10px;
  border-right: 14px solid transparent;
  border-bottom: 85px solid #454545;
  margin-top: 15px;
  margin-left: 12px;
  z-index: 3;
  -webkit-border-radius: 5px 0 5px 0;
  -moz-border-radius: 5px 0 5px 0;
  border-radius: 5px 0 5px 0;
}

#top-mid {
  width: 185px;
  height: 30px;
  border-right: 100px solid transparent;
  border-bottom: 55px solid #9aa2ac;
  margin-top: -50px;
  margin-left: 90px;
  position: absolute;
  z-index: 1;
  visibility: hidden;
}

/* Draw the right window */
#top-mid:after {
  content: '';
  position: absolute;
  display: block;
  width: 140px;
  height: 10px;
  border-right: 70px solid transparent;
  border-bottom: 40px solid #454545;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  border-radius: 5px 0 0 0;
  margin-top: 7px;
  margin-left: 10px;
  z-index: 3;
}

#top-right {
  width: 30px;
  height: 10px;
  border-bottom: 175px solid #9aa2ac;
  border-left: 20px solid transparent;
  margin-top: -90px;
  margin-left: 300px;
  position: absolute;
  z-index: 2;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
  visibility: hidden;
}

#front {
  width: 40px;
  height: 10px;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #9aa2ac;
  border-left: 15px solid transparent;
  margin-top: 17px;
  margin-left: 387px;
  position: absolute;
  z-index: 3;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
  visibility: hidden;
}

#front:before {
  content: '';
  position: absolute;
  display: block;
  background-color: #9aa2ac;
  width: 55px;
  height: 80px;
  margin-top: 3px;
  margin-left: -15px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  transform: rotate(-5deg);
}

/* Draw the front and rear undersides */
#underside {
  background-color: #454545;
  width: 50px;
  height: 95px;
  margin-top: -75px;
  margin-left: -15px;
  position: absolute;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-transform: rotate(280deg);
  -moz-transform: rotate(280deg);
  transform: rotate(280deg);
  visibility: hidden;
}

#underside:before {
  content: '';
  position: absolute;
  display: block;
  width: 50px;
  height: 30px;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #454545;
  margin-top: 400px;
  margin-left: 47px;
  -webkit-transform: rotate(72deg);
  -moz-transform: rotate(72deg);
  transform: rotate(72deg);
}

/* Draw the detail lines */
#lines {
  background-color: #454545;
  width: 452px;
  height: 3px;
  margin-top: -35px;
  margin-left: -40px;
  position: absolute;
  z-index: 5;
  -webkit-transform: rotate(1deg);
  -moz-transform: rotate(1deg);
  transform: rotate(1deg);
  visibility: hidden;
}

/* Draw the lines for the door */
#door {
  background-color: #454545;
  width: 1px;
  height: 50px;
  margin-top: -110px;
  margin-left: 92px;
  position: absolute;
  z-index: 6;
  visibility: hidden;
}

#door:before {
  content: '';
  position: absolute;
  display: block;
  background-color: #454545;
  width: 1px;
  height: 80px;
  margin-top: 44px;
  margin-left: 20px;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

#door:after {
  content: '';
  position: absolute;
  display: block;
  background-color: #454545;
  width: 1px;
  height: 82px;
  margin-top: 31px;
  margin-left: 135px;
  -webkit-transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  transform: rotate(15deg);
}

/* Draw the sideview mirror */
#mirror {
  width: 20px;
  height: 30px;
  border-right: 5px solid transparent;
  border-bottom: 20px solid #353535;
  border-left: 5px solid transparent;
  margin-top: -83px;
  margin-left: 213px;
  z-index: 7;
  position: absolute;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
  visibility: hidden;
}

/* Draw the stuff on the back of the delorean */
#stuff {
  background-color: #454545;
  width: 20px;
  height: 70px;
  margin-top: -130px;
  margin-left: -30px;
  position: absolute;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  visibility: hidden;
}

#stuff:before {
  content: '';
  position: absolute;
  display: block;
  width: 55px;
  height: 10px;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #454545;
  margin-top: 13px;
  margin-left: -42px;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  transform: rotate(270deg);
}

#stuff:after {
  content: '';
  position: absolute;
  display: block;
  width: 45px;
  height: 10px;
  border-bottom: 50px solid #454545;
  border-left: 30px solid transparent;
  margin-top: 20px;
  margin-left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(0deg);
}

/* Draw the cable that passes between the windows */
#cable {
  background-color: #6f6f6f;
  width: 15px;
  height: 50px;
  margin-top: -111px;
  margin-left: 72px;
  position: absolute;
  z-index: 6;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  visibility: hidden;
}

/* Draw the horizontal cable */
#cable:before {
  content: '';
  position: absolute;
  display: block;
  background-color: #6f6f6f;
  width: 15px;
  height: 80px;
  margin-top: 17px;
  margin-left: -40px;
  z-index: 6;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
}

/* Draw the leftmost cable */
#cable:after {
  content: '';
  position: absolute;
  display: block;
  background-color: #6f6f6f;
  width: 15px;
  height: 35px;
  margin-top: 64px;
  margin-left: -90px;
  z-index: 6;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  transform: rotate(25deg);
}

/* Draw the filler cable pieces */
#cable-filler {
  background-color: #6f6f6f;
  width: 14px;
  height: 22px;
  margin-top: -70px;
  margin-left: 70px;
  position: absolute;
  z-index: 5;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-transform: rotate(21deg);
  -moz-transform: rotate(21deg);
  transform: rotate(21deg);
  visibility: hidden;
}

/* Draw a circle to round out the filler cables */
#cable-filler:before {
  content: '';
  position: absolute;
  display: block;
  background-color: #6f6f6f;
  width: 10px;
  height: 20px;
  margin-left: 5px;
  z-index: 999;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

/* Draw the left filler cable */
#cable-filler:after {
  content: '';
  position: absolute;
  display: block;
  background-color: #6f6f6f;
  width: 15px;
  height: 23px;
  margin-top: 36px;
  margin-left: -68px;
  z-index: 6;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  transform: rotate(15deg);
}

/* Animation Classes */
.rotateBack {
  -webkit-animation: rotateBack 2s ease;
  animation: rotateBack 2s ease;
  visibility: visible !important;
}

.rotateTopLeft {
  -webkit-animation: rotateTopLeft 2s ease;
  animation: rotateTopLeft 2s ease;
  visibility: visible !important;
}

.rotateTopMid {
  -webkit-animation: rotateTopMid 2s ease;
  animation: rotateTopMid 2s ease;
  visibility: visible !important;
}

.rotateTopRight {
  -webkit-animation: rotateTopRight 2s ease;
  animation: rotateTopRight 2s ease;
  visibility: visible !important;
}

.rotateLines {
  -webkit-animation: rotateLines 2s ease;
  animation: rotateLines 2s ease;
  visibility: visible !important;
}

.rotateStuff {
  -webkit-animation: rotateStuff 2s ease;
  animation: rotateStuff 2s ease;
  visibility: visible !important;
}

.rotateCableFiller {
  -webkit-animation: rotateCableFiller 2s ease;
  animation: rotateCableFiller 2s ease;
  visibility: visible !important;
}

.hideFire {
  -webkit-animation: hideFire 2s;
  animation: hideFire 2s;
}

.expandRight {
  -webkit-animation: expandRight 1.5s ease-out;
  animation: expandRight 1.5s ease-out;
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%; 
  transform-origin: 0% 0%;
  visibility: visible !important;
}

.fadeFire01 {
  -webkit-animation: fadeFire 1s ease;
  animation: fadeFire 1s ease;
  visibility: visible !important;
}

.fadeFire02 {
  -webkit-animation: fadeFire 1s ease;
  animation: fadeFire 1s ease;
  visibility: visible !important;
}

.fadeFire03 {
  -webkit-animation: fadeFire 1s ease;
  animation: fadeFire 1s ease;
  visibility: visible !important;
}

.fadeFire04 {
  -webkit-animation: fadeFire 1s ease;
  animation: fadeFire 1s ease;
  visibility: visible !important;
}

.fadeFire05 {
  -webkit-animation: fadeFire 1s ease;
  animation: fadeFire 1s ease;
  visibility: visible !important;
}

.fadeFire06 {
  -webkit-animation: fadeFire 1s ease;
  animation: fadeFire 1s ease;
  visibility: visible !important;
}

.fadeFire07 {
  -webkit-animation: fadeFire 1s ease;
  animation: fadeFire 1s ease;
  visibility: visible !important;
}

.fadeFire08 {
  -webkit-animation: fadeFire 1s ease;
  animation: fadeFire 1s ease;
  visibility: visible !important;
}

.fadeFire09 {
  -webkit-animation: fadeFire 1s ease;
  animation: fadeFire 1s ease;
  visibility: visible !important;
}

.fadeFire10 {
  -webkit-animation: fadeFire 1s ease;
  animation: fadeFire 1s ease;
  visibility: visible !important;
}

.fadeFire11 {
  -webkit-animation: fadeFire 1s ease;
  animation: fadeFire 1s ease;
  visibility: visible !important;
}

.fadeFire12 {
  -webkit-animation: fadeFire 1s ease;
  animation: fadeFire 1s ease;
  visibility: visible !important;
}

.fadeFire13 {
  -webkit-animation: fadeFire 1s ease;
  animation: fadeFire 1s ease;
  visibility: visible !important;
}

.fadeFire14 {
  -webkit-animation: fadeFire 1s ease;
  animation: fadeFire 1s ease;
  visibility: visible !important;
}

.slideUp {
  -webkit-animation: slideUp 1s ease;
  animation: slideUp 1s ease;
  visibility: visible !important;
}

.spinTires {
  -webkit-animation: spinTires linear 1s infinite;
  animation: spinTires linear 1s infinite;
  visibility: visible !important;
}

.move88mph {
  -webkit-animation: move88mph linear 1s 2s 1 forwards;
  animation: move88mph linear 1s 2s 1 forwards;
}

/* Keyframes */
@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(100%);
  }
  50% {
    -webkit-transform: translateY(-8%);
  }
  65% {
    -webkit-transform: translateY(4%);
  }
  80% {
    -webkit-transform: translateY(-4%);
  }
  95% {
    -webkit-transform: translateY(2%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }
  50% {
    transform: translateY(-8%);
  }
  65% {
    transform: translateY(4%);
  }
  80% {
    transform: translateY(-4%);
  }
  95% {
    transform: translateY(2%);
  }
  100% {
    transform: translateY(0%);
  }
}

@-webkit-keyframes spinTires {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% { 
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spinTires {
  0% {
    transform: rotate(0deg);
  }
  100% { 
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotateBack {
  0% {
    -webkit-transform: rotate(280deg);
    opacity: 0.0;
  }
  100% { 
    -webkit-transform: rotate(280deg);
    opacity: 1;
  }
}
@keyframes rotateBack {
  0% {
    transform: rotate(280deg);
    opacity: 0.0;
  }
  100% { 
    transform: rotate(280deg);
    opacity: 1;
  }
}

@-webkit-keyframes rotateTopLeft {
  0% {
    -webkit-transform: rotate(270deg);
    opacity: 0.0;
  }
  100% { 
    -webkit-transform: rotate(270deg);
    opacity: 1;
  }
}
@keyframes rotateTopLeft {
  0% {
    transform: rotate(270deg);
    opacity: 0.0;
  }
  100% { 
    transform: rotate(270deg);
    opacity: 1;
  }
}

@-webkit-keyframes rotateTopMid {
  0% {
    opacity: 0.0;
  }
  100% { 
    opacity: 1;
  }
}
@keyframes rotateTopMid {
  0% {
    opacity: 0.0;
  }
  100% { 
    opacity: 1;
  }
}

@-webkit-keyframes rotateTopRight {
  0% {
    -webkit-transform: rotate(90deg);
    opacity: 0.0;
  }
  100% { 
    -webkit-transform: rotate(90deg);
    opacity: 1;
  }
}
@keyframes rotateTopRight {
  0% {
    transform: rotate(90deg);
    opacity: 0.0;
  }
  100% { 
    transform: rotate(90deg);
    opacity: 1;
  }
}

@-webkit-keyframes rotateLines {
  0% {
    -webkit-transform: rotate(1deg);
    opacity: 0.0;
  }
  100% { 
    -webkit-transform: rotate(1deg);
    opacity: 1;
  }
}
@keyframes rotateLines {
  0% {
    transform: rotate(1deg);
    opacity: 0.0;
  }
  100% { 
    transform: rotate(1deg);
    opacity: 1;
  }
}

@-webkit-keyframes rotateStuff {
  0% {
    -webkit-transform: rotate(-45deg);
    opacity: 0.0;
  }
  100% { 
    -webkit-transform: rotate(-45deg);
    opacity: 1;
  }
}
@keyframes rotateStuff {
  0% {
    transform: rotate(-45deg);
    opacity: 0.0;
  }
  100% { 
    transform: rotate(-45deg);
    opacity: 1;
  }
}

@-webkit-keyframes rotateCableFiller {
  0% {
    -webkit-transform: rotate(21deg);
    opacity: 0.0;
  }
  100% { 
    -webkit-transform: rotate(21deg);
    opacity: 1;
  }
}
@keyframes rotateCableFiller {
  0% {
    transform: rotate(21deg);
    opacity: 0.0;
  }
  100% { 
    transform: rotate(21deg);
    opacity: 1;
  }
}

@-webkit-keyframes move88mph {
  0% {
    -webkit-transform: translateX(0px);
  }
  100% { 
    -webkit-transform: translateX(1200px);
  }
}

@keyframes move88mph {
  0% {
    transform: translateX(0px);
  }
  100% { 
    transform: translateX(1200px);
  }
}

@-webkit-keyframes expandRight {
  0% {
    -webkit-transform: scaleX(0.0);
  }
  100% {
    -webkit-transform: scaleX(1.0);
  }
}

@keyframes expandRight {
  0% {
    transform: scaleX(0.0);
  }
  100% {
    transform: scaleX(1.0);
  }
}

@-webkit-keyframes hideFire {
  0% {
    -webkit-transform: scaleX(0.0);
  }
  100% {
    -webkit-transform: scaleX(0.0);
  }
}

@keyframes hideFire {
  0% {
    transform: scaleX(0.0);
  }
  100% {
    transform: scaleX(0.0);
  }
}

@-webkit-keyframes fadeFire {
  0% {
    opacity: 0.0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeFire {
  0% {
    opacity: 0.0;
  }
  100% {
    opacity: 1;
  }
}

/* Draw the fire trail */
.fire-trail {
  /*margin-top: 50px;*/
}

#fire {
  background-color: #fdb93e;
  width: 1250px;
  height: 15px;
  margin-top: 25px;
  margin-left: 30px;
  position: absolute;
  z-index: -1;
  visibility: hidden;
}

/* Position the fire clusters */
#fire01 { margin-left: -96px; visibility: hidden; }

#fire02 { margin-left: 0px; visibility: hidden; }

#fire03 { margin-left: 100px; visibility: hidden; }

#fire04 { margin-left: 200px; visibility: hidden; }

#fire05 { margin-left: 300px; visibility: hidden; }

#fire06 { margin-left: 400px; visibility: hidden; }

#fire07 { margin-left: 500px; visibility: hidden; }

#fire08 { margin-left: 600px; visibility: hidden; }

#fire09 { margin-left: 700px; visibility: hidden; }

#fire10 { margin-left: 800px; visibility: hidden; }

#fire11 { margin-left: 900px; visibility: hidden; }

#fire12 { margin-left: 1000px; visibility: hidden; }

#fire13 { margin-left: 1200px; visibility: hidden; }

#fire14 { margin-left: 1300px; visibility: hidden; }

/* Draw the triangles for the fire clusters */
/* Yellow triangles */
.fire-row1 {
  width: 0;
  height: 20px;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #fdb93e;
  border-left: 10px solid transparent;
  margin-top: 5px;
  margin-left: 126px;
  position: absolute;
  z-index: -10;
}

.fire-row1:before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 20px;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #fdb93e;
  border-left: 10px solid transparent;
  margin-left: 13px;
}

.fire-row1:after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 20px;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #fdb93e;
  border-left: 10px solid transparent;
  margin-left: 35px;
}

/* Orange triangles */
.fire-row2 {
  width: 0;
  height: 30px;
  border-right: 15px solid transparent;
  border-bottom: 30px solid #db6115;
  border-left: 15px solid transparent;
  margin-top: -5px;
  margin-left: 132px;
  position: absolute;
  z-index: -30;
}

.fire-row2:before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 30px;
  border-right: 15px solid transparent;
  border-bottom: 30px solid #db6115;
  border-left: 15px solid transparent;
  margin-left: 8px;
}

/* Red triangle */
.fire-row3 {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 30px;
  border-right: 15px solid transparent;
  border-bottom: 30px solid #d7390f;
  border-left: 15px solid transparent;
  margin-top: -13px;
  margin-left: 144px;
  z-index: -50;
}

/* Media queries */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait) {
    body {
      max-width: 100%;
      overflow: hidden;
    }
    
    .start {
      margin: 200px auto 10px auto;
    }
    
    #underside {
      margin-top: -70px;
    }
    
    #lines {
      width: 451px;
      margin-top: -28px;
      margin-left: -39px;
    }
    
    #door {
      height: 48px;
      margin-top: -104px;
    }
    
    #door:before {
      height: 75px;
      margin-top: 42px;
      margin-left: 19px;
    }
    
    #mirror {
      margin-top: -76px;
    }
    
    #cable {
      margin-top: -106px;
    }
    
    #cable-filler {
      margin-top: -66px;
    }
}

@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape) {
    body {
      max-width: 100%;
      overflow: hidden;
    }
    
    .start {
      margin: 150px auto 10px auto;
    }
    
    #underside {
      margin-top: -70px;
    }
    
    #lines {
      width: 451px;
      margin-top: -28px;
      margin-left: -39px;
    }
    
    #door {
      height: 48px;
      margin-top: -104px;
    }
    
    #door:before {
      height: 75px;
      margin-top: 42px;
      margin-left: 19px;
    }
    
    #mirror {
      margin-top: -76px;
    }
    
    #cable {
      margin-top: -106px;
    }
    
    #cable-filler {
      margin-top: -66px;
    }
}

styles

<link href="http://praliedutzel.com/css/animations.css" rel="stylesheet" />