Pure css bike animation

index.html

<!-- Illustration inspiration by Dennis de Groot -->
<div class="pause">
  
</div>
<div class="bike">
  <div class="part frame">
    <div class="bar left-top"></div>
    <div class="bar left-bottom"></div>
    <div class="bar left"></div>
    <div class="bar top"></div>
    <div class="bar bottom"></div>
    <div class="bar right"></div>
  </div>
  <div class="part sadle">
    <div class="sit-here"></div>
    <div class="sadlepen"></div>
  </div>
  <div class="part handlebar">
    <div class="stem"></div>
    <div class="connector"></div>
    <div class="prehandle"></div>
    <div class="handle"></div>
  </div>
  <div class="part pedals">
    <div class="inside"></div>
    <div class="outside"></div>
    <div class="pedalstem front">
      <div class="pedalbase front"></div>
    </div>
    <div class="pedalstem back">
      <div class="pedalbase back"></div>
    </div>
  </div>
  <div class="part wheel left">
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
  </div>
  <div class="part wheel right">
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
  </div>
  <div class="part axis left"></div>
  <div class="part axis right"></div>
</div>

<div class="bike bike-two">
  <div class="part frame">
    <div class="bar left-top"></div>
    <div class="bar left-bottom"></div>
    <div class="bar left"></div>
    <div class="bar top"></div>
    <div class="bar bottom"></div>
    <div class="bar right"></div>
  </div>
  <div class="part sadle">
    <div class="sit-here"></div>
    <div class="sadlepen"></div>
  </div>
  <div class="part handlebar">
    <div class="stem"></div>
    <div class="connector"></div>
    <div class="prehandle"></div>
    <div class="handle"></div>
  </div>
  <div class="part pedals">
    <div class="inside"></div>
    <div class="outside"></div>
    <div class="pedalstem front">
      <div class="pedalbase front"></div>
    </div>
    <div class="pedalstem back">
      <div class="pedalbase back"></div>
    </div>
  </div>
  <div class="part wheel left">
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
  </div>
  <div class="part wheel right">
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
    <div class="spoke"></div>
  </div>
  <div class="part axis left"></div>
  <div class="part axis right"></div>
</div>

pure-css-bike-animation.markdown

Pure css bike animation

A Pen by sasijarvis on CodePen.

License.

script.js

$(document).ready(function(){
  
  $('.pause').click(function(){
    $('.bike').toggleClass("paused");
    $('.pause').toggleClass("active");
  });
});

scripts

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

style.scss

@import "compass/css3";

// Colors
$black: #000;
$white: #fff;
$darkgrey: #333;
$grey: #999;
$lightgrey: #dadada;
$brown: #8D5852;
$darkbrown: #522917;
$green: #799753;
$yellow: #E8BF56;

$time: 2s;
$time2: 1.5s;

// Mixins
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

  // generic transform
@mixin transform($transforms) {
	   -moz-transform: $transforms;
	     -o-transform: $transforms;
	    -ms-transform: $transforms;
	-webkit-transform: $transforms;
          transform: $transforms;
}
  // rotate
@mixin rotate ($deg) {
  @include transform(rotate(#{$deg}deg));
}

  // Animation mixin
@mixin animation ($animation, $duration, $timing, $iteration ) {
    -webkit-animation-name: $animation;
    -webkit-animation-duration: $duration;
    -webkit-animation-timing-function: $timing;
    -webkit-animation-iteration-count: $iteration;
 
    -moz-animation-name: $animation;
    -moz-animation-duration: $duration;
    -moz-animation-timing-function: $timing;
    -moz-animation-iteration-count: $iteration;
 
    -o-animation-name: $animation;
    -o-animation-duration: $duration;
    -o-animation-timing-function: $timing;
    -o-animation-iteration-count: $iteration;
 
    animation-name: $animation;
    animation-duration: $duration;
    animation-timing-function: $timing;
    animation-iteration-count: $iteration;
}

// Animations
  //wheel
@include keyframes(wheelspin){
  from{
    transform: rotate(0deg);
  }
  
  to{
    transform: rotate(360deg);
  }
}

  //floor
@include keyframes(floor){
  to { background-position-x: 100%; }
}

  //pedals
@include keyframes(pedalstem-front){
  from{
    transform: rotate(0deg);
  }
  
  to{
    transform: rotate(360deg);
  }
}

@include keyframes(pedalstem-back){
  from{
    transform: rotate(-180deg);
  }
  
  to{
    transform: rotate(180deg);
  }
}

@include keyframes(pedalbase-front){
  from{
    transform: rotate(0deg);
  }
  
  to{
    transform: rotate(-360deg);
  }
}

@include keyframes(pedalbase-back){
  from{
    transform: rotate(180deg);
  }
  
  to{
    transform: rotate(-180deg);
  }
}

  //bike
@include keyframes(riding){
  from{
    transform: translateX(-250%);
  }
  
  to{
    transform: translateX(250%);
  }
}

html,
body{
  max-width: 100%;
  overflow: hidden;
  background: $white;
}

// The bike
.bike{
  width: 600px;
  height: 400px;
  margin: auto;
  margin-top: 368px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  
  @include animation(riding, $time * 2, linear, infinite);
  
  .part{
    position: absolute;
  }
}

.frame{
  .bar{
    width: 12px;
    position: absolute;
    background: $yellow;
    
    &.left-top{
      width: 10px;
      height: 186px;
      margin-left: 128px;
      margin-top: 110px;
      @include transform(rotate(37deg));
    }
    
    &.left-bottom{
      width: 8px;
      margin-left: 149px;
      margin-top: 203px;
      height: 170px;
      @include transform(rotate(-82deg));
    }
    
    &.left{
      height: 230px;
      margin-left: 200px;
      margin-top: 80px;
      @include transform(rotate(-15deg));
    }
    
    &.top{
      height: 224px;
      margin-left: 282px;
      margin-top: -10px;
      @include transform(rotate(90deg));
    }
    
    &.bottom{
      margin-left: 317px;
      margin-top: 87px;
      height: 250px;
      @include transform(rotate(45deg));
    }
    
    &.right{
      height: 230px;
      margin-left: 421px;
      margin-top: 60px;
      @include transform(rotate(-19deg));
    }
  }
}

.sadle{
  margin-left: 184px;
  
  .sit-here{
    height: 0;
    width: 10px;
    position: absolute;
    border-bottom: 110px solid $black;
    border-left: 0px solid transparent;
    border-right: 22px solid transparent;
    border-radius: 10px 0 10px 0;
    margin-top: -20px;
    margin-left: -35px;
    @include transform(rotate(98deg));
  }
  
  .sadlepen{
    width: 10px;
    height: 200px;
    margin-top: 30px;
    position: absolute;
    background: $lightgrey;
    @include transform(rotate(-16deg));
  }
}

.wheel{
  width: 200px;
  height: 200px;
  margin-top: 160px;
  border-radius: 100%;
  border: 15px solid $lightgrey;
  box-shadow: 0 0 0 10px $darkgrey;
  
  @include animation(wheelspin, $time, linear, infinite);
  
  &.left{
    margin-left: -35px;
  }
  
  &.right{
    margin-left: 348px;
  }
  
  .spoke{
    width: 2px;
    height: 200px;
    margin-left: 98px;
    position: absolute;
    background: $lightgrey;
    
    &:nth-child(2){
      @include transform(rotate(30deg));
    }
    
    &:nth-child(3){
      @include transform(rotate(60deg));
    }
    
    &:nth-child(4){
      @include transform(rotate(90deg));
    }
    
    &:nth-child(5){
      @include transform(rotate(120deg));
    }
    
    &:nth-child(6){
      @include transform(rotate(150deg));
    }
    
    &:nth-child(7){
      @include transform(rotate(180deg));
    }
    
    &:nth-child(8){
      @include transform(rotate(210deg));
    }
  }
}

.axis{
    width: 25px;
    height: 25px;
    margin-top: 265px;
    position: absolute;
    background: $darkgrey;
    border-radius: 100%;
    
    &.left{
      margin-left: 67px;
    }
    
    &.right{
      margin-left: 451px;
    }
}

.handlebar{
  .stem{
    width: 10px;
    height: 200px;
    margin-top: 45px;
    margin-left: 412px;
    position: absolute;
    background: $lightgrey;
    @include transform(rotate(-19deg));
  }
  
  .connector{
    width: 20px;
    height: 20px;
    margin-left: 374px;
    margin-top: 40px;
    @include transform(rotate(-19deg));
    background: $lightgrey;
  }
  
  .prehandle{
    width: 15px;
    height: 40px;
    margin-left: 394px;
    margin-top: -45px;
    @include transform(rotate(42deg));
    background: $lightgrey;
  }
  
  .handle{
    width: 25px;
    height: 25px;
    margin-left: 400px;
    margin-top: -45px;
    position: absolute;
    background: $black;
    border-radius: 100%;
  }
}

.pedals{
  margin-left: 227px;
  margin-top: 295px;
  
  *{
    position: absolute;
  }
  
  .inside{
    width: 9px;
    height: 9px;
    background: $darkgrey;
    border-radius: 100%;
    margin-left: 3.5px;
    margin-top: 2.4px;
  }
  
  .outside{
    width: 80px;
    height: 80px;
    margin-top: -39px;
    margin-left: -37px;
    border: 5px solid $black;
    border-radius: 100%;
  }
  
  .pedalstem{
    width: 12px;
    height: 80px;
    margin-left: 2px;
    background: $lightgrey;
    border-radius: 10px 10px 0 0;
    
    transform-origin: 6px 7px;
    
    &.front{
      @include animation(pedalstem-front, $time * 0.5, linear, infinite);
    }
    
    &.back{
      @include animation(pedalstem-back, $time * 0.5, linear, infinite);
      @include transform(rotate(180deg));
    }
  }
  
  .pedalbase{
    width: 40px;
    height: 15px;
    margin-top: 70px;
    margin-left: -12px;
    background: $black;
      
    &.front{
      @include animation(pedalbase-front, $time * 0.5, linear, infinite);
    }
    
    &.back{
      @include animation(pedalbase-back, $time * 0.5, linear, infinite);
    }
  }
}

// Controlling the animations
.pause{
  width: 20px;
  height: 55px;
  margin: 10% auto;
  background: $white;
  cursor: pointer;
  border-right: 12px solid $yellow;
  border-left: 12px solid $yellow;
  
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  
  &.active{
    width: 0;
    height: 0;
    border-top: 25.5px solid transparent;
    border-left: 44px solid #e8bf56;
    border-bottom: 25.5px solid transparent;
    border-right: none;
  }
}

.paused,
.paused *{
    -webkit-animation-play-state: paused !important;
    -moz-animation-play-state: paused !important;
    -o-animation-play-state: paused !important; 
    animation-play-state: paused !important;
}

//
// 2nd bike
//
.bike-two{
  // Animations
  @include animation(riding, $time2 * 2, linear, infinite);
  
  .pedalstem{
    &.front{
      @include animation(pedalstem-front, $time2 * 0.5, linear, infinite);
    }
    
    &.back{
      @include animation(pedalstem-back, $time2 * 0.5, linear, infinite);
      @include transform(rotate(180deg));
    }
  }
  
  .pedalbase{
    &.front{
      @include animation(pedalbase-front, $time2 * 0.5, linear, infinite);
    }
    
    &.back{
      @include animation(pedalbase-back, $time2 * 0.5, linear, infinite);
    }
  }
  
  .wheel{
    @include animation(wheelspin, $time2, linear, infinite);
  }
  
  // Colors
  .sit-here{
    border-bottom: 110px solid $darkbrown;
  }
  
  .handle{
    background: $darkbrown;
  }
  
  .frame{
    .bar{
      background: $green;
    }
  }
}

//Z-INDEXES
.inside              { z-index: 6; }
.axis                { z-index: 5; }
.pedalstem{ &.front  { z-index: 5; }}
.frame               { z-index: 4; }
.outside             { z-index: 4; }
.handlebar           { z-index: 3; }
.sit-here            { z-index: 2; }
.wheel               { z-index: 1; }
.pedalstem{ &.back   { z-index: -1; }}