HOW TO CREATE A BICYCLE ANIMATION

on

How To Create a Bicycle Animation

SOURCE CODE FOR CREATING A BICYCLE ANIMATION USING HTML AND CSS

A bicycle is one of the most popular means of transportation. and we all want users to be amazed when the visit our website and meet something to keep them busy!. In this article i will be shpwing you how to create a bicycle animation in simple html, css..
New bicycle animation


Preview

BICYCLE
<!--Created By MyCodeHive-->
<!doctype html>
<html>
<head>

 <style>

 #body{
 background:yellowgreen;}
 #bike{
 position:relative;
 top:130px;
 left:0px;
 }
 #a{
 width:340px;
 height:250px;
 position:relative;
 margin:25px 0;}
 #fontwheel{
 width: 100px;
 height: 100px;
 position:absolute;
 top:160px;
 border: 8px solid green;
 border-radius:50%;;
 left:200px;
 animation:abc 1s infinite;
 }
 #backwheel{
 width: 100px;
 height: 100px;
 position:absolute;
 top:160px;
 border: 8px solid green;
 border-radius:50%;
 left:5px;
 animation: abc 1s infinite;
 }
 #a0,#ab0{
 position:absolute;
 top:210px;
 left:50px;
 border-radius:50%;
 background: black;
 width:19px;
 height:19px;
 }
 #ab0{
 position:absolute;
 top:210px;
 left:250px;
 background:black;}
 #c1,#c2,#c3,#c4,#c5{
 height:2px;
 width:51px;
 background:#000;
 position:absolute;
 top:52px;
 transform-origin:100% 50%;
 }
 #c2{
 transform:rotate(70deg);
 }
 #c3{
 transform:rotate(140deg);}
 #c4{
 transform:rotate(200deg);}
 #c5{
 transform:rotate(290deg);}
 #frametop{
 border-radius:5px;
 z-index:2;
 background:violet;
 height:10px;
 position:absolute;
 width:144px;
 top:125px;
 left:90px;
 }
 #framechainstay{
 border-radius:5px;
 z-index:2;
 background:violet;
 height:10px;
 position:absolute;
 width:85px;
 top:215px;
 left:56px;
 }
 #framefork{
 border-radius:5px;
 z-index:2;
 background:violet;
 height:100px;
 position:absolute;
 width:10px;
 top:125px;
 left:110px;
 transform:rotate(-25deg);
 }
 #frameseattube{
 border-radius:5px;
 z-index:2;
 background:violet;
 height:107px;
 position:absolute;
 width:10px;
 top:125px;
 left:240px;
 transform:rotate(-20deg);
 }
 #frameseatstay{
 border-radius:5px;
 z-index:2;
 background:violet;
 height:4px;
 position:absolute;
 width:100px;
 top:170px;
 left:30px;
 transform:rotate(-70deg);
 }
 #framedowntube{
 border-radius:5px;
 z-index:2;
 background:violet;
 height:8px;
 position:absolute;
 width:130px;
 top:170px;
 left:120px;
 transform:rotate(-43deg);
 }

 #handle{
 position:relative;
 left:204px;
 top:112.5px;
 width:25px;
 height: 12px;
 background-color: black;
 border-radius:20px;
 transform-origin:0% 50%;
 transform:rotate(-20deg)
 translate(43px);
 }
 #post{
 top:107px;
 width:10px;
 height:20px;
 position:absolute;
 background: silver;
 left:222px;
 }
 #bar{
 position:absolute;
 top:107px;
 left:222px;
 width:45px;
 height:10px;
 background:silver;
 border-radius:20px;
 transform-origin:0% 50%;
 Transform: rotate(-20deg);
 }
 #seat{
 background:black;
 position:absolute;
 left:70px;
 border-radius:20px;
 z-index:3;
 top:108px;
 }
 #base{
 width: 35px;
 height: 25px;
 }
 #nose{
 width: 35px;
 height: 15px;
 background:black;
 position: absolute;
 top: 0px;
 left: 20px;
 border-bottom-right-radius:20px;
 }
 @keyframes abc{
 0%{
 transform: rotate(0deg);
 }
 5%{
 transform:rotate(10deg);
 }
 10%{
 transform:rotate(20deg);
 }
 15%{
 transform:rotate(30deg);
 }
 20%{
 transform:rotate(40deg);
 }
 25%{
 transform: rotate(50deg);
 }
 30%{
 transform:rotate(60deg);
 }
 35%{
 transform:rotate(70deg);
 }
 40%{
 transform:rotate(80deg);
 }
 45%{
 transform:rotate(90deg);
 }
 50%{
 transform: rotate(100deg);
 }
 55%{
 transform:rotate(110deg);
 }
 60%{
 transform:rotate(120deg);
 }
 65%{
 transform:rotate(130deg);
 }
 70%{
 transform:rotate(140deg);
 }
 75%{
 transform: rotate(150deg);
 }
 80%{
 transform:rotate(160deg);
 }
 85%{
 transform:rotate(170deg);
 }
 90%{
 transform:rotate(180deg);
 }
 95%{
 transform:rotate(190deg);
 }
 100%{
 transform:rotate(200deg);}
 }
 #pedal{
 position:absolute;
 top:193px;
 left:108px;
 width:40px;
 height:40px;
 border:5px solid black;
 border-radius:50%;
 animation: na 2s infinite;
 }
 #crc{
 background:black;
 width:21px;
 height: 21px;
 border-radius: 50%;
 position: absolute;
 left:10px;
 top:9.5px;
 }
 #b1,#b2,#b3,#b4,#b5{
 height:6px;
 width:20px;
 background:sandybrown;
 transform-origin:100% 50%;
 position:absolute;
 top:16px;
 }
 #b1{
 transform: rotate(-10deg);
 }
 #b2{
 transform:rotate(50deg);
 }
 #b3{
 transform:rotate(130deg);
 }
 #b4{
 transform:rotate(210deg);
 }
 #b5{
 transform:rotate(280deg);}
 #hw{
 width: 10px;
 height:55px;
 background:#000;
 position:absolute;
 top:170px;
 left:128px;
 animation:na 2s infinite;
 transform-origin:50% 90%;
 border-radius: 9px;
 }
 #hw2{
 width: 10px;
 height:55px;
 background:#000;
 position:absolute;
 top:220px;
 left:128px;
 z-index:2;
 animation:na 2s infinite;
 transform-origin:50% 0%;
 border-radius: 9px;
 }
 #blc{
 position: absolute;
 top:43px;
 left:-5.7px;
 width:23px;
 height:13px;
 background: #000;
 border-radius:10px;}
 #blc2{
 position: absolute;
 top:0px;
 left:-6px;
 height:13px;
 width:23px;
 background: #000;
 border-radius: 10px;
 }
 @keyframes na{
 0%{transform:rotate(0deg);
 }
 10%{transform:rotate(35deg);
 }
 20%{transform:rotate(70deg);
 }
 30%{transform:rotate(105deg);
 }
 40%{transform:rotate(140deg);
 }
 50%{transform:rotate(175deg);
 }
 60%{transform:rotate(210deg);
 }
 70%{transform:rotate(245deg);
 }
 80%{transform:rotate(280deg);
 }
 90%{transform:rotate(315deg);
 }
 100%{transform:rotate(350deg);
 }
 }
 #chain{
 width: 96px;
 height: 37px;
 border:5px double #000;
 position:absolute;
 top:196px;
 left:50px;
 border-bottom-left-radius:50%;
 border-top-left-radius:50%;
 border-top-right-radius:17px;
 border-bottom-right-radius:20px;
 transform:translate(0px,-1px);
 }
 #crc2{
 position:absolute;
 top:210px;
 left:125px;
 width: 17px;
 height: 17px;
 background:#000;
 border-radius: 50%;
 z-index:2;}
 </style>
<title>BICYCLE</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
 <body id="body">
  <div id="bike">
 <div id="frametop"></div>
   <div id="framechainstay"></div>
 <div id="framefork"></div>
   <div id="frameseattube"></div>
 <div id="frameseatstay"></div>
  <div id="framedowntube"></div>
   <div id="seat">
 <div id="base"> </div>
    <div id="nose"> </div>
  </div>
    <div id="handlebars">
  <div id="post"> </div>
    <div id="bar"> </div>
 <div id="handle"> </div>
   </div>
    <div id="a0"></div>
  <div id="backwheel">
   <div id="c1"> </div>
  <div id="c2"> </div>
   <div id="c3"> </div>
 <div id="c4"> </div>
   <div id="c5"> </div>
  </div>
    <div id="ab0"></div>
  <div id="fontwheel">
   <div id="c1"> </div>
 <div id="c2"> </div>
  <div id="c3"> </div>
    <div id="c4"> </div>
 <div id="c5"> </div>
  </div>
    <div id="pedal">
  <div id="b1"> </div>
    <div id="b2"> </div>
  <div id="b3"> </div>
    <div id="b4"> </div>
 <div id="b5"> </div>
   <div id="crc"> </div>
    </div>
  <div id="hw2">
    <div id="blc"> </div>
  </div>
   <div id="hw">
 <div id="blc2"> </div>
   </div>
 <div id="chain"></div>
   <div id="crc2">  </div>
 </div>
   </body>
 </html>

Jus copy the codes and paste it in your browser.

Supported by all browsers.

                                                                           Good luck.

Comments

Post a Comment