Skip to content

Instantly share code, notes, and snippets.

@sasijarvis
Created March 27, 2018 09:52
Show Gist options
  • Save sasijarvis/5c2b72e9a18a609553324477a34720f4 to your computer and use it in GitHub Desktop.
Save sasijarvis/5c2b72e9a18a609553324477a34720f4 to your computer and use it in GitHub Desktop.
Pure css bike animation
<!-- 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>
$(document).ready(function(){
$('.pause').click(function(){
$('.bike').toggleClass("paused");
$('.pause').toggleClass("active");
});
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@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; }}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment