Pug + SASS Animation

In this example below you will see how to do a Pug + SASS Animation with some HTML / CSS and Javascript

js is not needed.

Thumbnail
This awesome code was written by arcticben, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright arcticben ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Pug + SASS Animation</title>
  <link href="https://fonts.googleapis.com/css?family=Nunito:900" rel="stylesheet">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<arcticben>arcticben.co.uk
  <div class="col" id="model-1"></div>
  <div class="col" id="model-2"></div>
  <div class="col" id="model-3"></div>
  <div class="col" id="model-4"></div>
  <div class="col" id="model-5"></div>
  <div class="col" id="model-6"></div>
  <div class="col" id="model-7"></div>
  <div class="col" id="model-8"></div>
  <div class="col" id="model-9"></div>
  <div class="col" id="model-10"></div>
  <div class="col" id="model-11"></div>
  <div class="col" id="model-12"></div>
  <div class="col" id="model-13"></div>
  <div class="col" id="model-14"></div>
  <div class="col" id="model-15"></div>
  <div class="col" id="model-16"></div>
  <div class="col" id="model-17"></div>
  <div class="col" id="model-18"></div>
  <div class="col" id="model-19"></div>
  <div class="col" id="model-20"></div>
  <div class="col" id="model-21"></div>
  <div class="col" id="model-22"></div>
  <div class="col" id="model-23"></div>
  <div class="col" id="model-24"></div>
  <div class="col" id="model-25"></div>
  <div class="col" id="model-26"></div>
  <div class="col" id="model-27"></div>
  <div class="col" id="model-28"></div>
  <div class="col" id="model-29"></div>
  <div class="col" id="model-30"></div>
  <div class="col" id="model-31"></div>
  <div class="col" id="model-32"></div>
  <div class="col" id="model-33"></div>
  <div class="col" id="model-34"></div>
</arcticben>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/arcticben/pug-sass-animation-vxPzwm */
#model-1 {
  animation: test 1s infinite alternate;
}

#model-2 {
  animation: test 1s infinite alternate;
}

#model-3 {
  animation: test 0.4s infinite alternate;
}

#model-4 {
  animation: test 1.4s infinite alternate;
}

#model-5 {
  animation: test 1.6s infinite alternate;
}

#model-6 {
  animation: test 1.6s infinite alternate;
}

#model-7 {
  animation: test 1.2s infinite alternate;
}

#model-8 {
  animation: test 1.4s infinite alternate;
}

#model-9 {
  animation: test 1s infinite alternate;
}

#model-10 {
  animation: test 0.4s infinite alternate;
}

#model-11 {
  animation: test 0.8s infinite alternate;
}

#model-12 {
  animation: test 1.4s infinite alternate;
}

#model-13 {
  animation: test 2s infinite alternate;
}

#model-14 {
  animation: test 2s infinite alternate;
}

#model-15 {
  animation: test 1.6s infinite alternate;
}

#model-16 {
  animation: test 0.2s infinite alternate;
}

#model-17 {
  animation: test 1s infinite alternate;
}

#model-18 {
  animation: test 1.4s infinite alternate;
}

#model-19 {
  animation: test 0.4s infinite alternate;
}

#model-20 {
  animation: test 1.4s infinite alternate;
}

#model-21 {
  animation: test 1.2s infinite alternate;
}

#model-22 {
  animation: test 1.2s infinite alternate;
}

#model-23 {
  animation: test 1s infinite alternate;
}

#model-24 {
  animation: test 1.4s infinite alternate;
}

#model-25 {
  animation: test 1.2s infinite alternate;
}

#model-26 {
  animation: test 0.8s infinite alternate;
}

#model-27 {
  animation: test 0.8s infinite alternate;
}

#model-28 {
  animation: test 1s infinite alternate;
}

#model-29 {
  animation: test 1.2s infinite alternate;
}

#model-30 {
  animation: test 0.2s infinite alternate;
}

#model-31 {
  animation: test 2s infinite alternate;
}

#model-32 {
  animation: test 2s infinite alternate;
}

#model-33 {
  animation: test 1.8s infinite alternate;
}

#model-34 {
  animation: test 1.2s infinite alternate;
}

#model-35 {
  animation: test 0.4s infinite alternate;
}

#model-1 {
  height: calc(1px * 5);
  right: calc(1px * 30);
}

#model-2 {
  height: calc(2px * 5);
  right: calc(2px * 30);
}

#model-3 {
  height: calc(3px * 5);
  right: calc(3px * 30);
}

#model-4 {
  height: calc(4px * 5);
  right: calc(4px * 30);
}

#model-5 {
  height: calc(5px * 5);
  right: calc(5px * 30);
}

#model-6 {
  height: calc(6px * 5);
  right: calc(6px * 30);
}

#model-7 {
  height: calc(7px * 5);
  right: calc(7px * 30);
}

#model-8 {
  height: calc(8px * 5);
  right: calc(8px * 30);
}

#model-9 {
  height: calc(9px * 5);
  right: calc(9px * 30);
}

#model-10 {
  height: calc(10px * 5);
  right: calc(10px * 30);
}

#model-11 {
  height: calc(11px * 5);
  right: calc(11px * 30);
}

#model-12 {
  height: calc(12px * 5);
  right: calc(12px * 30);
}

#model-13 {
  height: calc(13px * 5);
  right: calc(13px * 30);
}

#model-14 {
  height: calc(14px * 5);
  right: calc(14px * 30);
}

#model-15 {
  height: calc(15px * 5);
  right: calc(15px * 30);
}

#model-16 {
  height: calc(16px * 5);
  right: calc(16px * 30);
}

#model-17 {
  height: calc(17px * 5);
  right: calc(17px * 30);
}

#model-18 {
  height: calc(18px * 5);
  right: calc(18px * 30);
}

#model-19 {
  height: calc(19px * 5);
  right: calc(19px * 30);
}

#model-20 {
  height: calc(20px * 5);
  right: calc(20px * 30);
}

#model-21 {
  height: calc(21px * 5);
  right: calc(21px * 30);
}

#model-22 {
  height: calc(22px * 5);
  right: calc(22px * 30);
}

#model-23 {
  height: calc(23px * 5);
  right: calc(23px * 30);
}

#model-24 {
  height: calc(24px * 5);
  right: calc(24px * 30);
}

#model-25 {
  height: calc(25px * 5);
  right: calc(25px * 30);
}

#model-26 {
  height: calc(26px * 5);
  right: calc(26px * 30);
}

#model-27 {
  height: calc(27px * 5);
  right: calc(27px * 30);
}

#model-28 {
  height: calc(28px * 5);
  right: calc(28px * 30);
}

#model-29 {
  height: calc(29px * 5);
  right: calc(29px * 30);
}

#model-30 {
  height: calc(30px * 5);
  right: calc(30px * 30);
}

#model-31 {
  height: calc(31px * 5);
  right: calc(31px * 30);
}

#model-32 {
  height: calc(32px * 5);
  right: calc(32px * 30);
}

#model-33 {
  height: calc(33px * 5);
  right: calc(33px * 30);
}

#model-34 {
  height: calc(34px * 5);
  right: calc(34px * 30);
}

#model-35 {
  height: calc(35px * 5);
  right: calc(35px * 30);
}

html {
  width: 100%;
  height: 100%;
}

body {
  background: #1e1e1e;
}

.col {
  width: 8px;
  position: absolute;
  top: 70px;
  left: 0;
  right: 30%;
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
}

arcticben {
  font-family: "Nunito", sans-serif;
  font-size: 60px;
  margin: 0 auto;
  position: absolute;
  left: 20%;
  right: 0;
  color: #fff;
  width: 900px;
  text-align: left;
  top: 30%;
}

@keyframes test {
  0% {
    height: 0px;
  }
  0% {
    height: 1px;
  }
  0% {
    height: 2px;
  }
  0% {
    height: 3px;
  }
  0% {
    height: 4px;
  }
  0% {
    height: 5px;
  }
  0% {
    height: 6px;
  }
  0% {
    height: 7px;
  }
  0% {
    height: 8px;
  }
  0% {
    height: 9px;
  }
  0% {
    height: 10px;
  }
  0% {
    height: 11px;
  }
  0% {
    height: 12px;
  }
  0% {
    height: 13px;
  }
  0% {
    height: 14px;
  }
  0% {
    height: 15px;
  }
  0% {
    height: 16px;
  }
  0% {
    height: 17px;
  }
  0% {
    height: 18px;
  }
  0% {
    height: 19px;
  }
  0% {
    height: 20px;
  }
  0% {
    height: 21px;
  }
  0% {
    height: 22px;
  }
  0% {
    height: 23px;
  }
  0% {
    height: 24px;
  }
  0% {
    height: 25px;
  }
  0% {
    height: 26px;
  }
  0% {
    height: 27px;
  }
  0% {
    height: 28px;
  }
  0% {
    height: 29px;
  }
  0% {
    height: 30px;
  }
  0% {
    height: 31px;
  }
  0% {
    height: 32px;
  }
  0% {
    height: 33px;
  }
  0% {
    height: 34px;
  }
  0% {
    height: 35px;
  }
  0% {
    height: 36px;
  }
  0% {
    height: 37px;
  }
  0% {
    height: 38px;
  }
  0% {
    height: 39px;
  }
  0% {
    height: 40px;
  }
  0% {
    height: 41px;
  }
  0% {
    height: 42px;
  }
  0% {
    height: 43px;
  }
  0% {
    height: 44px;
  }
  0% {
    height: 45px;
  }
  0% {
    height: 46px;
  }
  0% {
    height: 47px;
  }
  0% {
    height: 48px;
  }
  0% {
    height: 49px;
  }
  0% {
    height: 50px;
  }
  0% {
    height: 51px;
  }
  0% {
    height: 52px;
  }
  0% {
    height: 53px;
  }
  0% {
    height: 54px;
  }
  0% {
    height: 55px;
  }
  0% {
    height: 56px;
  }
  0% {
    height: 57px;
  }
  0% {
    height: 58px;
  }
  0% {
    height: 59px;
  }
  0% {
    height: 60px;
  }
  0% {
    height: 61px;
  }
  0% {
    height: 62px;
  }
  0% {
    height: 63px;
  }
  0% {
    height: 64px;
  }
  0% {
    height: 65px;
  }
  0% {
    height: 66px;
  }
  0% {
    height: 67px;
  }
  0% {
    height: 68px;
  }
  0% {
    height: 69px;
  }
  0% {
    height: 70px;
  }
  0% {
    height: 71px;
  }
  0% {
    height: 72px;
  }
  0% {
    height: 73px;
  }
  0% {
    height: 74px;
  }
  0% {
    height: 75px;
  }
  0% {
    height: 76px;
  }
  0% {
    height: 77px;
  }
  0% {
    height: 78px;
  }
  0% {
    height: 79px;
  }
  0% {
    height: 80px;
  }
  0% {
    height: 81px;
  }
  0% {
    height: 82px;
  }
  0% {
    height: 83px;
  }
  0% {
    height: 84px;
  }
  0% {
    height: 85px;
  }
  0% {
    height: 86px;
  }
  0% {
    height: 87px;
  }
  0% {
    height: 88px;
  }
  0% {
    height: 89px;
  }
  0% {
    height: 90px;
  }
  0% {
    height: 91px;
  }
  0% {
    height: 92px;
  }
  0% {
    height: 93px;
  }
  0% {
    height: 94px;
  }
  0% {
    height: 95px;
  }
  0% {
    height: 96px;
  }
  0% {
    height: 97px;
  }
  0% {
    height: 98px;
  }
  0% {
    height: 99px;
  }
  0% {
    height: 100px;
  }
}


/*Downloaded from https://www.codeseek.co/arcticben/pug-sass-animation-vxPzwm */
// js go away!

Comments