Motion Lines - codevember - 02 - 2016

Tutorials of (Motion lines - codevember - 02 - 2016) by Caio cares

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Motion Lines - codevember - 02 - 2016</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="buttons">

  <div class="bar pink">
    <div class="line"></div>
    <div class="ball"> 
  <!--     <span class="icon">icon</span> -->
    </div>
  </div>

  <div class="bar yellow">
    <div class="line"></div>
    <div class="ball">
  <!--     <span class="icon">icon</span> -->
    </div>
  </div>

  <div class="bar blue">
    <div class="line"></div>
    <div class="ball">
  <!--     <span class="icon">icon</span> -->
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body {
  background: #202020;
}

.buttons {
  position: relative;
  width: 300px;
  left: 50%;
  top: 50%;
  margin: 0 0 0 -150px;
}

.bar {
  position: relative;
  top: 300px;
  left: 30px;
  width: 100px;
  height: 200px;
  float: left;
}
.bar .line {
  width: 4px;
  height: 0px;
  border-radius: 5%;
  margin: 0px 0 0 25px;
  float: left;
}
.bar .ball {
  border-width: 4px;
  border-style: solid;
  border-radius: 100%;
  background: white;
  width: 50px;
  height: 50px;
  transform: scale(0);
  animation: growBall 0.3s 0.5s 1 forwards cubic-bezier(0.79, 0.1, 0.23, 1);
  margin: -25px 0 0 0;
}

.pink .line {
  background: #f36a6a;
  animation: growBarTop 0.6s 0.3s 1 forwards cubic-bezier(0.05, 0.54, 0.25, 1), decreaseBarTop 0.6s 0.4s 1 forwards cubic-bezier(0.78, 0.01, 1, 0.7);
  position: relative;
  margin-top: -200px;
}
.pink .ball {
  border-color: #f36a6a;
}

.yellow .line {
  background: #ffc32c;
  animation: growBar 0.6s 0.1s 1 forwards cubic-bezier(0.05, 0.54, 0.25, 1), decreaseBar 0.6s 0.2s 1 forwards cubic-bezier(0.78, 0.01, 1, 0.7);
}
.yellow .ball {
  border-color: #ffc32c;
}

.blue .line {
  background: #4bdcef;
  animation: growBarTop 0.6s 0.5s 1 forwards cubic-bezier(0.05, 0.54, 0.25, 1), decreaseBarTop 0.6s 0.6s 1 forwards cubic-bezier(0.78, 0.01, 1, 0.7);
  position: relative;
  margin-top: -200px;
}
.blue .ball {
  border-color: #4bdcef;
}

@keyframes growBar {
  0% {
    height: 0;
    position: absolute;
    bottom: 0;
  }
  100% {
    height: 200px;
    position: absolute;
    bottom: 0;
  }
}
@keyframes decreaseBar {
  0% {
    height: 200px;
    position: absolute;
    top: 0;
  }
  100% {
    height: 0px;
    position: absolute;
    top: 0;
  }
}
@keyframes growBarTop {
  0% {
    height: 0;
    position: absolute;
    top: 0;
  }
  100% {
    height: 200px;
    position: absolute;
    top: 0;
  }
}
@keyframes decreaseBarTop {
  0% {
    height: 200px;
    position: absolute;
    bottom: 0;
  }
  100% {
    height: 0px;
    position: absolute;
    bottom: 0;
    margin-top: 0;
  }
}
@keyframes growBall {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Motion Lines - codevember - 02 - 2016 ) is write by Caio Cares, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Caio Cares