Coder Animation Using HTML5 & CSS3

309

Hello, learner today In this blog post, We will be creating a Coder Animation Using HTML5 & CSS3. In the past post, we have created many projects one of them is SVG Text Animation Using HTML5 & CSS3. With Out wasting time Now it is time to create a Coder Animation. This code is written by Judith Neumann.

Coder Animation Using HTML & CSS

There are 3 types of styles to connect CSS with HTML files. Inline CSS, Internal CSS, External CSS. For Inline CSS in this, we have to write the CSS code inside the HTML code using style Attribute elements. For internal CSS we have to use the Style tag in the Head section on HTML File. we Have used this Internal CSS in The below section. Last is External CSS for this we have to create another CSS File in the same folder this

Code ByJudith Neumann
Language UsedHTML And CSS
External Link / DependenciesNO
ResponsiveYes

Preview of Coder Animation

In this preview, we have used internal CSS in the code. In the internal CSS, we have to write the code in the head section using the Style tag. We have to write the code in <Style> CSS code </style> in the Head section in the HTML file. You can Copy and Run the preview in the Top left of the code

<!DOCTYPE html>
<!--Codingthai.com--> 
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coding Animation </title>
    <style>
      body{
  background:#1d4a62;
}
.container{
  width:90%;
  height:700px;
  margin:90px auto;
  
}
.compu{
  position:absolute;
  width:450px;
  height:291px;
  background:#5f666f;
  border-radius:12px;
  margin:0 251px;
  border-bottom:70px solid #b6b8b3;
}
.compu::before{
  content:"";
  display:block;
 border-bottom: 70px solid #7d939a;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    height: 0;
    width: 75px;
  margin:360px 162px
}
.compu::after{
  content:"";
  display:block;
  width:152px;
  height:12px;
  background:#b6b8b3;
  margin:-370px 152px;
  border-radius:3px;
}
.brow{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:100%;
  background:lightblue;
  margin:-765px 241px;
  z-index:3;
}
.brow::before{
 content:"";
  display:block;
  width:12px;
  height:12px;
  border-radius:100%;
  background:pink;
  margin:0px 21px;
  z-index:3;
}
.brow::after{
 content:"";
  display:block;
  width:12px;
  height:12px;
  border-radius:100%;
  background:lightgreen;
  margin:-12px 43px;
  z-index:3;
}
.a{
  position:absolute;
  width:201px;
  height:271px;
  background:#222d41;
 margin:-770px 21px;
}
.a::before{
  content:"</>";
  font-family:verdana;
  color:white;
  display:block;
  width:201px;
  height:21px;
  background:rgba(0,0,0,.3);
}
.b{
  position:absolute;
  width:201px;
  height:271px;
  background:#ebf4ff;
 margin:-770px 231px;
}
.b::before{
  content:"";

  color:black;
  display:block;
  width:201px;
  height:21px;
  background:rgba(0,0,0,.3);
}


.l1{
  position:absolute;
  width:30px;
  height:7px;
  background:#e35a5a;
  margin:30px 21px;
  animation: l1 3s linear infinite;
  -moz-animation: l1 3s linear infinite;
   -webkit-animation: l1 3s linear infinite;
}
.l2{
  position:absolute;
  width:50px;
  height:7px;
  background:#df9935;
  margin: 40px 21px;
  animation: l2 3s linear infinite;
  -moz-animation: l2 3s linear infinite;
   -webkit-animation: l2 3s linear infinite;
}
.l3{
  position:absolute;
  width:21px;
  height:7px;
  background:white;
  margin:50px 21px;
  animation: l3 3s linear infinite;
  -moz-animation: l3 3s linear infinite;
   -webkit-animation: l3 3s linear infinite;
}
.l4{
  position:absolute;
  width:70px;
  height:7px;
  background:#9e9e9e;
  margin: 83px 19px;
  animation: l4 3s linear infinite;
  -moz-animation: l4 3s linear infinite;
   -webkit-animation: l4 3s linear infinite;
}
.l4::before{
  content:"";
  display:block;
  width:70px;
  height:7px;
  background:#9e9e9e;
  margin: 0px 90px;
  animation: l4 3s linear infinite;
  -moz-animation: l4 3s linear infinite;
   -webkit-animation: l4 3s linear infinite;
}
.l5{
  position:absolute;
 
  width:40px;
  height:7px;
  background:#e35a5a;
  margin:121px 21px;
   animation: l5 3s linear infinite;
  -moz-animation: l5 3s linear infinite;
   -webkit-animation: l5 3s linear infinite;
}
.l5::before{
  content:"";
  display:block;
  width:40px;
  height:7px;
  background:#df9935;
  margin: 0px 60px;
  animation: l5 3s linear infinite;
  -moz-animation: l5 3s linear infinite;
   -webkit-animation: l5 3s linear infinite;
}
.l5::after{
  content:"";
  display:block;
  width:40px;
  height:7px;
  background:#00aaef;
  margin: -7px 121px;
  animation: l5 3s linear infinite;
  -moz-animation: l5 3s linear infinite;
   -webkit-animation: l5 3s linear infinite;
}

.l6{
  position:absolute;
  width:70px;
  height:7px;
  background:gray;
  margin:152px 21px;
   animation: l6 3s linear infinite;
  -moz-animation: l6 3s linear infinite;
   -webkit-animation: l6 3s linear infinite;
}
.l6::before{
  content:"";
 display:block;
  width:30px;
  height:7px;
  background:gray;
  margin:0px 80px;
  animation: l66 3s linear infinite;
  -moz-animation: l66 3s linear infinite;
   -webkit-animation: l66 3s linear infinite;
}

.l7{
  position:absolute;
  width:162px;
  height:7px;
  background:#00aaef;
  margin:212px 21px;
  animation: l7 3s linear infinite;
  -moz-animation: l7 3s linear infinite;
   -webkit-animation: l7 3s linear infinite;
}
.d1{
  position:absolute;
  width:201px;
  height:50px;
  background:#e35a5a;
  animation: d1 3s linear infinite;
  -moz-animation: d1 3s linear infinite;
   -webkit-animation: d1 3s linear infinite;
}
.d2{
  position:absolute;
  width:201px;
  height:30px;
  background:#df9935;
  margin:50px 0;
  animation: d2 3s linear infinite;
  -moz-animation: d2 3s linear infinite;
   -webkit-animation: d2 3s linear infinite;
}
.d3{
  position:absolute;
  width:40px;
  height:12px;
  background:white;
  margin:57px 5px;
   animation: d3 3s linear infinite;
  -moz-animation: d3 3s linear infinite;
   -webkit-animation: d3 3s linear infinite;
}
.d3::before{
  content:"";
  display:block;
  width:40px;
  height:12px;
  background:white;
  margin:0px 75px;
  animation: d3 3s linear infinite;
  -moz-animation: d3 3s linear infinite;
   -webkit-animation: d3 3s linear infinite;
}
.d3::after{
  content:"";
  display:block;
  width:40px;
  height:12px;
  background:white;
  margin:-12px 150px;
  animation: d3 3s linear infinite;
  -moz-animation: d3 3s linear infinite;
   -webkit-animation: d3 3s linear infinite;
}
.d4{
  position:absolute;
  width:40px;
  height:40px;
  background:#e35a5a;
  margin:121px 5px;
   animation: d5 3s linear infinite;
  -moz-animation: d5 3s linear infinite;
   -webkit-animation: d5 3s linear infinite;
}
.d4::before{
  content:"";
 display:block;
  width:40px;
  height:40px;
  background:#df9935;
  margin:0px 75px;
   animation: d5 3s linear infinite;
  -moz-animation: d5 3s linear infinite;
   -webkit-animation: d5 3s linear infinite;
}
.d4::after{
  content:"";
 display:block;
  width:40px;
  height:40px;
  background:#00aaef;
  margin:-40px 152px;
   animation: d5 3s linear infinite;
  -moz-animation: d5 3s linear infinite;
   -webkit-animation: d5 3s linear infinite;
}
.d5{
  position:absolute;
  width:201px;
  height:50px;
  background:#00aaef;
  margin:199px 0px;
  animation: d7 3s linear infinite;
  -moz-animation: d7 3s linear infinite;
   -webkit-animation: d7 3s linear infinite;
}
@-webkit-keyframes l1 {
  0% {opacity: 0;}
  25% {opacity: 0;width:0;height:7;}
  35% {opacity: 1;width:30px;height:7px;}
  40% {opacity: 1;width:30px;height:7px;
  }
   45% {opacity: 1;
    width:30px;
    height:7px;
  }
   50% {opacity: 1;
    width:30px;
    height:7px;
  }
  60% {opacity: 1;
    width:30px;
    height:7px;
  }
  70% {opacity: 1;
    width:30px;
    height:7px;}
   80% {opacity: 1;
     width:30px;
    height:7px;}
   85% {opacity: 1;
     width:30px;
    height:7px;}
   90% {opacity: 1;
     width:30px;
    height:7px;}
   95% {opacity: 1;
     width:30px;
    height:7px;}
  100% {opacity: 1;  width:30px;
    height:7px;}
}
@-moz-keyframes l1 {
  0% {opacity: 0;}
  25% {opacity: 0;width:0;height:7;}
  35% {opacity: 1;width:30px;height:7px;}
  40% {opacity: 1;width:30px;height:7px;
  }
   45% {opacity: 1;
    width:30px;
    height:7px;
  }
   50% {opacity: 1;
    width:30px;
    height:7px;
  }
  60% {opacity: 1;
    width:30px;
    height:7px;
  }
  70% {opacity: 1;
    width:30px;
    height:7px;}
   80% {opacity: 1;
     width:30px;
    height:7px;}
   85% {opacity: 1;
     width:30px;
    height:7px;}
   90% {opacity: 1;
     width:30px;
    height:7px;}
   95% {opacity: 1;
     width:30px;
    height:7px;}
  100% {opacity: 1;  width:30px;
    height:7px;}
}
@keyframes l1 {
  0% {opacity: 0;}
  25% {opacity: 0;width:0;height:7;}
  35% {opacity: 1;width:30px;height:7px;}
  40% {opacity: 1;width:30px;height:7px;
  }
   45% {opacity: 1;
    width:30px;
    height:7px;
  }
   50% {opacity: 1;
    width:30px;
    height:7px;
  }
  60% {opacity: 1;
    width:30px;
    height:7px;
  }
  70% {opacity: 1;
    width:30px;
    height:7px;}
   80% {opacity: 1;
     width:30px;
    height:7px;}
   85% {opacity: 1;
     width:30px;
    height:7px;}
   90% {opacity: 1;
     width:30px;
    height:7px;}
   95% {opacity: 1;
     width:30px;
    height:7px;}
  100% {opacity: 1;  width:30px;
    height:7px;}
}
@-webkit-keyframes l2{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 1;
    width:50px;
    height:7px;
  }
   45% {opacity: 1;
    width:50px;
    height:7px;
  }
   50% {opacity: 1;
    width:50px;
    height:7px;
  }
  60% {opacity: 1;
    width:50px;
    height:7px;
  }
  70% {opacity: 1;
    width:50px;
    height:7px;}
   80% {opacity: 1;
     width:50px;
    height:7px;}
   85% {opacity: 1;
     width:50px;
    height:7px;}
   90% {opacity: 1;
     width:50px;
    height:7px;}
   95% {opacity: 1;
     width:50px;
    height:7px;}
  100% {opacity: 1;  width:50px;
    height:7px;}
}
@-moz-keyframes l2{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 1;
    width:50px;
    height:7px;
  }
   45% {opacity: 1;
    width:50px;
    height:7px;
  }
   50% {opacity: 1;
    width:50px;
    height:7px;
  }
  60% {opacity: 1;
    width:50px;
    height:7px;
  }
  70% {opacity: 1;
    width:50px;
    height:7px;}
   80% {opacity: 1;
     width:50px;
    height:7px;}
   85% {opacity: 1;
     width:50px;
    height:7px;}
   90% {opacity: 1;
     width:50px;
    height:7px;}
   95% {opacity: 1;
     width:50px;
    height:7px;}
  100% {opacity: 1;  width:50px;
    height:7px;}
}
@keyframes l2{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 1;
    width:50px;
    height:7px;
  }
   45% {opacity: 1;
    width:50px;
    height:7px;
  }
   50% {opacity: 1;
    width:50px;
    height:7px;
  }
  60% {opacity: 1;
    width:50px;
    height:7px;
  }
  70% {opacity: 1;
    width:50px;
    height:7px;}
   80% {opacity: 1;
     width:50px;
    height:7px;}
   85% {opacity: 1;
     width:50px;
    height:7px;}
   90% {opacity: 1;
     width:50px;
    height:7px;}
   95% {opacity: 1;
     width:50px;
    height:7px;}
  100% {opacity: 1;  width:50px;
    height:7px;}
}
@-webkit-keyframes l3{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 1;
    width:21px;
    height:7px;
  }
   50% {opacity: 1;
    width:21px;
    height:7px;
  }
  60% {opacity: 1;
    width:21px;
    height:7px;
  }
  70% {opacity: 1;
    width:21px;
    height:7px;}
   80% {opacity: 1;
     width:21px;
    height:7px;}
   85% {opacity: 1;
     width:21px;
    height:7px;}
   90% {opacity: 1;
     width:21px;
    height:7px;}
   95% {opacity: 1;
     width:21px;
    height:7px;}
  100% {opacity: 1;  width:21px;
    height:7px;}
}
@-moz-keyframes l3{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 1;
    width:21px;
    height:7px;
  }
   50% {opacity: 1;
    width:21px;
    height:7px;
  }
  60% {opacity: 1;
    width:21px;
    height:7px;
  }
  70% {opacity: 1;
    width:21px;
    height:7px;}
   80% {opacity: 1;
     width:21px;
    height:7px;}
   85% {opacity: 1;
     width:21px;
    height:7px;}
   90% {opacity: 1;
     width:21px;
    height:7px;}
   95% {opacity: 1;
     width:21px;
    height:7px;}
  100% {opacity: 1;  width:21px;
    height:7px;}
}
@keyframes l3{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 1;
    width:21px;
    height:7px;
  }
   50% {opacity: 1;
    width:21px;
    height:7px;
  }
  60% {opacity: 1;
    width:21px;
    height:7px;
  }
  70% {opacity: 1;
    width:21px;
    height:7px;}
   80% {opacity: 1;
     width:21px;
    height:7px;}
   85% {opacity: 1;
     width:21px;
    height:7px;}
   90% {opacity: 1;
     width:21px;
    height:7px;}
   95% {opacity: 1;
     width:21px;
    height:7px;}
  100% {opacity: 1;  width:21px;
    height:7px;}
}
@-webkit-keyframes l4{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 1;
    width:70px;
    height:7px;
  }
  60% {opacity: 1;
    width:70px;
    height:7px;
  }
  70% {opacity: 1;
    width:70px;
    height:7px;}
   80% {opacity: 1;
     width:70px;
    height:7px;}
   85% {opacity: 1;
     width:70px;
    height:7px;}
   90% {opacity: 1;
     width:70px;
    height:7px;}
   95% {opacity: 1;
     width:70px;
    height:7px;}
  100% {opacity: 1;  width:70px;
    height:7px;}
}
@-moz-keyframes l4{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 1;
    width:70px;
    height:7px;
  }
  60% {opacity: 1;
    width:70px;
    height:7px;
  }
  70% {opacity: 1;
    width:70px;
    height:7px;}
   80% {opacity: 1;
     width:70px;
    height:7px;}
   85% {opacity: 1;
     width:70px;
    height:7px;}
   90% {opacity: 1;
     width:70px;
    height:7px;}
   95% {opacity: 1;
     width:70px;
    height:7px;}
  100% {opacity: 1;  width:70px;
    height:7px;}
}
@keyframes l4{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 1;
    width:70px;
    height:7px;
  }
  60% {opacity: 1;
    width:70px;
    height:7px;
  }
  70% {opacity: 1;
    width:70px;
    height:7px;}
   80% {opacity: 1;
     width:70px;
    height:7px;}
   85% {opacity: 1;
     width:70px;
    height:7px;}
   90% {opacity: 1;
     width:70px;
    height:7px;}
   95% {opacity: 1;
     width:70px;
    height:7px;}
  100% {opacity: 1;  width:70px;
    height:7px;}
}
@-webkit-keyframes  l5{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 1;
    width:40px;
    height:7px;
  }
  70% {opacity: 1;
    width:40px;
    height:7px;}
   80% {opacity: 1;
     width:40px;
    height:7px;}
   85% {opacity: 1;
     width:40px;
    height:7px;}
   90% {opacity: 1;
     width:40px;
    height:7px;}
   95% {opacity: 1;
     width:40px;
    height:7px;}
  100% {opacity: 1;  width:40px;
    height:7px;}
}
@-moz-keyframes  l5{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 1;
    width:40px;
    height:7px;
  }
  70% {opacity: 1;
    width:40px;
    height:7px;}
   80% {opacity: 1;
     width:40px;
    height:7px;}
   85% {opacity: 1;
     width:40px;
    height:7px;}
   90% {opacity: 1;
     width:40px;
    height:7px;}
   95% {opacity: 1;
     width:40px;
    height:7px;}
  100% {opacity: 1;  width:40px;
    height:7px;}
}
@keyframes  l5{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 1;
    width:40px;
    height:7px;
  }
  70% {opacity: 1;
    width:40px;
    height:7px;}
   80% {opacity: 1;
     width:40px;
    height:7px;}
   85% {opacity: 1;
     width:40px;
    height:7px;}
   90% {opacity: 1;
     width:40px;
    height:7px;}
   95% {opacity: 1;
     width:40px;
    height:7px;}
  100% {opacity: 1;  width:40px;
    height:7px;}
}
@-webkit-keyframes l6 {
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 0;
    width:0px;
    height:7px;
  }
  70% {opacity: 1;
    width:70px;
    height:7px;}
   80% {opacity: 1;
     width:70px;
    height:7px;}
   85% {opacity: 1;
     width:70px;
    height:7px;}
   90% {opacity: 1;
     width:70px;
    height:7px;}
   95% {opacity: 1;
     width:70px;
    height:7px;}
  100% {opacity: 1;  width:70px;
    height:7px;}
}
@-moz-keyframes l6 {
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 0;
    width:0px;
    height:7px;
  }
  70% {opacity: 1;
    width:70px;
    height:7px;}
   80% {opacity: 1;
     width:70px;
    height:7px;}
   85% {opacity: 1;
     width:70px;
    height:7px;}
   90% {opacity: 1;
     width:70px;
    height:7px;}
   95% {opacity: 1;
     width:70px;
    height:7px;}
  100% {opacity: 1;  width:70px;
    height:7px;}
}
@keyframes l6 {
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 0;
    width:0px;
    height:7px;
  }
  70% {opacity: 1;
    width:70px;
    height:7px;}
   80% {opacity: 1;
     width:70px;
    height:7px;}
   85% {opacity: 1;
     width:70px;
    height:7px;}
   90% {opacity: 1;
     width:70px;
    height:7px;}
   95% {opacity: 1;
     width:70px;
    height:7px;}
  100% {opacity: 1;  width:70px;
    height:7px;}
}
@-webkit-keyframes l66 {
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 0;
    width:0px;
    height:7px;
  }
  70% {opacity: 0;
    width:0px;
    height:7px;}
   80% {opacity: 1;
     width:30px;
    height:7px;}
   85% {opacity: 1;
     width:30px;
    height:7px;}
   90% {opacity: 1;
     width:30px;
    height:7px;}
   95% {opacity: 1;
     width:30px;
    height:7px;}
  100% {opacity: 1;  width:30px;
    height:7px;}
}
@-moz-keyframes l66 {
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 0;
    width:0px;
    height:7px;
  }
  70% {opacity: 0;
    width:0px;
    height:7px;}
   80% {opacity: 1;
     width:30px;
    height:7px;}
   85% {opacity: 1;
     width:30px;
    height:7px;}
   90% {opacity: 1;
     width:30px;
    height:7px;}
   95% {opacity: 1;
     width:30px;
    height:7px;}
  100% {opacity: 1;  width:30px;
    height:7px;}
}
@keyframes l66 {
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 0;
    width:0px;
    height:7px;
  }
  70% {opacity: 0;
    width:0px;
    height:7px;}
   80% {opacity: 1;
     width:30px;
    height:7px;}
   85% {opacity: 1;
     width:30px;
    height:7px;}
   90% {opacity: 1;
     width:30px;
    height:7px;}
   95% {opacity: 1;
     width:30px;
    height:7px;}
  100% {opacity: 1;  width:30px;
    height:7px;}
}
@-webkit-keyframes  l7{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 0;
    width:0px;
    height:7px;
  }
  70% {opacity: 0;
    width:0px;
    height:7px;}
   80% {opacity: 0;
     width:0px;
    height:7px;}
  
   85% {opacity: 1;
     width:132px;
    height:7px;}
   90% {opacity: 1;
     width:132px;
    height:7px;}
   95% {opacity: 1;
     width:132px;
    height:7px;}
  100% {opacity: 1;  width:132px;
    height:7px;}
}
@-moz-keyframes  l7{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 0;
    width:0px;
    height:7px;
  }
  70% {opacity: 0;
    width:0px;
    height:7px;}
   80% {opacity: 0;
     width:0px;
    height:7px;}
  
   85% {opacity: 1;
     width:132px;
    height:7px;}
   90% {opacity: 1;
     width:132px;
    height:7px;}
   95% {opacity: 1;
     width:132px;
    height:7px;}
  100% {opacity: 1;  width:132px;
    height:7px;}
}
@keyframes  l7{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 0;
    width:0px;
    height:7px;
  }
  70% {opacity: 0;
    width:0px;
    height:7px;}
   80% {opacity: 0;
     width:0px;
    height:7px;}
  
   85% {opacity: 1;
     width:132px;
    height:7px;}
   90% {opacity: 1;
     width:132px;
    height:7px;}
   95% {opacity: 1;
     width:132px;
    height:7px;}
  100% {opacity: 1;  width:132px;
    height:7px;}
}
@-webkit-keyframes d1 {
  0% {opacity: 0;}
  25% {opacity: 0;
   }
  
  35% {opacity: 1;
   
  }
  40% {opacity: 1;
    
  }
   45% {opacity: 1;
    
  }
   50% {opacity: 1;
    
  }
  60% {opacity: 1;
    
  }
  70% {opacity: 1;
    }
   80% {opacity: 1;
   }
   85% {opacity: 1;
     }
   90% {opacity: 1;
     }
   95% {opacity: 1;
     }
  100% {opacity: 1;  
}
}
@-moz-keyframes d1 {
  0% {opacity: 0;}
  25% {opacity: 0;
   }
  
  35% {opacity: 1;
   
  }
  40% {opacity: 1;
    
  }
   45% {opacity: 1;
    
  }
   50% {opacity: 1;
    
  }
  60% {opacity: 1;
    
  }
  70% {opacity: 1;
    }
   80% {opacity: 1;
   }
   85% {opacity: 1;
     }
   90% {opacity: 1;
     }
   95% {opacity: 1;
     }
  100% {opacity: 1;  
}
}
@keyframes d1 {
  0% {opacity: 0;}
  25% {opacity: 0;
   }
  
  35% {opacity: 1;
   
  }
  40% {opacity: 1;
    
  }
   45% {opacity: 1;
    
  }
   50% {opacity: 1;
    
  }
  60% {opacity: 1;
    
  }
  70% {opacity: 1;
    }
   80% {opacity: 1;
   }
   85% {opacity: 1;
     }
   90% {opacity: 1;
     }
   95% {opacity: 1;
     }
  100% {opacity: 1;  
}
}
  @-webkit-keyframes d2{
  0% {opacity: 0;}
  25% {opacity: 0; }
  
  35% {opacity: 0;}
  40% {opacity: 1;}
   45% {opacity: 1;}
   50% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 1;}
   80% {opacity: 1;}
   85% {opacity: 1;
    }
    90% {opacity: 1;}
    
   95% {opacity: 1;
     }
  100% {opacity: 1;  }
}
@-moz-keyframes d2{
  0% {opacity: 0;}
  25% {opacity: 0; }
  
  35% {opacity: 0;}
  40% {opacity: 1;}
   45% {opacity: 1;}
   50% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 1;}
   80% {opacity: 1;}
   85% {opacity: 1;
    }
    90% {opacity: 1;}
    
   95% {opacity: 1;
     }
  100% {opacity: 1;  }
}
@keyframes d2{
  0% {opacity: 0;}
  25% {opacity: 0; }
  
  35% {opacity: 0;}
  40% {opacity: 1;}
   45% {opacity: 1;}
   50% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 1;}
   80% {opacity: 1;}
   85% {opacity: 1;
    }
    90% {opacity: 1;}
    
   95% {opacity: 1;
     }
  100% {opacity: 1;  }
}
 @-webkit-keyframes d3{
  0% {opacity: 0;}
  25% {opacity: 0;}
  
  35% {opacity: 0;}
  40% {opacity: 0;
    
  }
   45% {opacity: 1;
   
  }
   50% {opacity: 1;
    
  }
  60% {opacity: 1;
    
  }
  70% {opacity: 1;
  }
   80% {opacity: 1;
     }
   85% {opacity: 1;
    }
   90% {opacity: 1;
   }
   95% {opacity: 1;
     }
  100% {opacity: 1;  }
}
@-moz-keyframes d3{
  0% {opacity: 0;}
  25% {opacity: 0;}
  
  35% {opacity: 0;}
  40% {opacity: 0;
    
  }
   45% {opacity: 1;
   
  }
   50% {opacity: 1;
    
  }
  60% {opacity: 1;
    
  }
  70% {opacity: 1;
  }
   80% {opacity: 1;
     }
   85% {opacity: 1;
    }
   90% {opacity: 1;
   }
   95% {opacity: 1;
     }
  100% {opacity: 1;  }
}
@keyframes d3{
  0% {opacity: 0;}
  25% {opacity: 0;}
  
  35% {opacity: 0;}
  40% {opacity: 0;
    
  }
   45% {opacity: 1;
   
  }
   50% {opacity: 1;
    
  }
  60% {opacity: 1;
    
  }
  70% {opacity: 1;
  }
   80% {opacity: 1;
     }
   85% {opacity: 1;
    }
   90% {opacity: 1;
   }
   95% {opacity: 1;
     }
  100% {opacity: 1;  }
}

@-webkit-keyframes d5 {
  0% {opacity: 0;}
  25% {opacity: 0;
    }
  
  35% {opacity: 0;
    
  }
  40% {opacity: 0;
   
  }
   45% {opacity: 0;
   
  }
   50% {opacity: 0;
    
  }
  60% {opacity: 1;
    
  }
  70% {opacity: 1;
    }
   80% {opacity: 1;
   }
   85% {opacity: 1;
   }
   90% {opacity: 1;
   }
   95% {opacity: 1;
   }
  100% {opacity: 1; }
}
@-moz-keyframes d5 {
  0% {opacity: 0;}
  25% {opacity: 0;
    }
  
  35% {opacity: 0;
    
  }
  40% {opacity: 0;
   
  }
   45% {opacity: 0;
   
  }
   50% {opacity: 0;
    
  }
  60% {opacity: 1;
    
  }
  70% {opacity: 1;
    }
   80% {opacity: 1;
   }
   85% {opacity: 1;
   }
   90% {opacity: 1;
   }
   95% {opacity: 1;
   }
  100% {opacity: 1; }
}
@keyframes d5 {
  0% {opacity: 0;}
  25% {opacity: 0;
    }
  
  35% {opacity: 0;
    
  }
  40% {opacity: 0;
   
  }
   45% {opacity: 0;
   
  }
   50% {opacity: 0;
    
  }
  60% {opacity: 1;
    
  }
  70% {opacity: 1;
    }
   80% {opacity: 1;
   }
   85% {opacity: 1;
   }
   90% {opacity: 1;
   }
   95% {opacity: 1;
   }
  100% {opacity: 1; }
}
@-moz-keyframes d7 {
  0% {opacity: 0;}
  25% {opacity: 0;
    }
  
  35% {opacity: 0;
    
   
  }
  40% {opacity: 0;
   
  }
   45% {opacity: 0;
    
  }
   50% {opacity: 0;
    
  }
  60% {opacity: 0;
    
  }
  70% {opacity: 0;
   }
   80% {opacity: 0;
   }
  
   85% {opacity: 1;
     }
   90% {opacity: 1;
     }
   95% {opacity: 1;
     }
  100% {opacity: 1;  }
}
@-webkit-keyframes d7 {
  0% {opacity: 0;}
  25% {opacity: 0;
    }
  
  35% {opacity: 0;
    
   
  }
  40% {opacity: 0;
   
  }
   45% {opacity: 0;
    
  }
   50% {opacity: 0;
    
  }
  60% {opacity: 0;
    
  }
  70% {opacity: 0;
   }
   80% {opacity: 0;
   }
  
   85% {opacity: 1;
     }
   90% {opacity: 1;
     }
   95% {opacity: 1;
     }
  100% {opacity: 1;  }
}
@keyframes d7 {
  0% {opacity: 0;}
  25% {opacity: 0;
    }
  
  35% {opacity: 0;
    
   
  }
  40% {opacity: 0;
   
  }
   45% {opacity: 0;
    
  }
   50% {opacity: 0;
    
  }
  60% {opacity: 0;
    
  }
  70% {opacity: 0;
   }
   80% {opacity: 0;
   }
  
   85% {opacity: 1;
     }
   90% {opacity: 1;
     }
   95% {opacity: 1;
     }
  100% {opacity: 1;  }
}
    </style>
  </head>
  <body>
<div class="container">
  <div class="compu">
    <span class="brow"></span>
    <div class="a">
      <span class="l1"></span>
      <span class="l1"></span>
      <span class="l2"></span>
      <span class="l3"></span>
      <span class="l4"></span>
      <span class="l5"></span>
      <span class="l6"></span>
    </div>
    <div class="b">
      <span class=d1></span>
      <span class=d2></span>
      <span class=d3></span>
      <span class=d4></span>
      <span class=d5></span>
    </div>
  </div>
</div>
  </body>
</html>

You might like this

Coder Animation Using HTML5 &CSS3 [Source code]

For Creating a Coder Animation Using HTML5 & CSS3. First, you have to create three files (HTML and CSS) files with the named index.html and style.css in the same folder and you have to link the CSS files to HTML. after that paste, the HTML code in index.html, and last paste the CSS code in style.css that’s all after pasting the code.

First, you have to create an HTML file with the named index.html and paste the below HTML code on it and save it. Remember to give a .html extension to the HTML file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Coder Animation</title>
  </head>
  <body>
<div class="container">
  <div class="compu">
    <span class="brow"></span>
    <div class="a">
      <span class="l1"></span>
      <span class="l1"></span>
      <span class="l2"></span>
      <span class="l3"></span>
      <span class="l4"></span>
      <span class="l5"></span>
      <span class="l6"></span>
    </div>
    <div class="b">
      <span class=d1></span>
      <span class=d2></span>
      <span class=d3></span>
      <span class=d4></span>
      <span class=d5></span>
    </div>
  </div>
</div>
</body>
</html>

After pasting the HTML code, Now have to create a second CSS file with the named style.css. Paste the below code on it and save it. Again remember to give .css extension to the CSS file.

body{
  background:#1d4a62;
}
.container{
  width:90%;
  height:100px;
  margin:90px auto;
  
}
.compu{
  position:absolute;
  width:450px;
  height:291px;
  background:#5f666f;
  border-radius:12px;
  margin:0 251px;
  border-bottom:70px solid #b6b8b3;
}
.compu::before{
  content:"";
  display:block;
 border-bottom: 70px solid #7d939a;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    height: 0;
    width: 75px;
  margin:360px 162px
}
.compu::after{
  content:"";
  display:block;
  width:152px;
  height:12px;
  background:#b6b8b3;
  margin:-370px 152px;
  border-radius:3px;
}
.brow{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:100%;
  background:lightblue;
  margin:-765px 241px;
  z-index:3;
}
.brow::before{
 content:"";
  display:block;
  width:12px;
  height:12px;
  border-radius:100%;
  background:pink;
  margin:0px 21px;
  z-index:3;
}
.brow::after{
 content:"";
  display:block;
  width:12px;
  height:12px;
  border-radius:100%;
  background:lightgreen;
  margin:-12px 43px;
  z-index:3;
}
.a{
  position:absolute;
  width:201px;
  height:271px;
  background:#222d41;
 margin:-770px 21px;
}
.a::before{
  content:"</>";
  font-family:verdana;
  color:white;
  display:block;
  width:201px;
  height:21px;
  background:rgba(0,0,0,.3);
}
.b{
  position:absolute;
  width:201px;
  height:271px;
  background:#ebf4ff;
 margin:-770px 231px;
}
.b::before{
  content:"";

  color:black;
  display:block;
  width:201px;
  height:21px;
  background:rgba(0,0,0,.3);
}


.l1{
  position:absolute;
  width:30px;
  height:7px;
  background:#e35a5a;
  margin:30px 21px;
  animation: l1 3s linear infinite;
  -moz-animation: l1 3s linear infinite;
   -webkit-animation: l1 3s linear infinite;
}
.l2{
  position:absolute;
  width:50px;
  height:7px;
  background:#df9935;
  margin: 40px 21px;
  animation: l2 3s linear infinite;
  -moz-animation: l2 3s linear infinite;
   -webkit-animation: l2 3s linear infinite;
}
.l3{
  position:absolute;
  width:21px;
  height:7px;
  background:white;
  margin:50px 21px;
  animation: l3 3s linear infinite;
  -moz-animation: l3 3s linear infinite;
   -webkit-animation: l3 3s linear infinite;
}
.l4{
  position:absolute;
  width:70px;
  height:7px;
  background:#9e9e9e;
  margin: 83px 19px;
  animation: l4 3s linear infinite;
  -moz-animation: l4 3s linear infinite;
   -webkit-animation: l4 3s linear infinite;
}
.l4::before{
  content:"";
  display:block;
  width:70px;
  height:7px;
  background:#9e9e9e;
  margin: 0px 90px;
  animation: l4 3s linear infinite;
  -moz-animation: l4 3s linear infinite;
   -webkit-animation: l4 3s linear infinite;
}
.l5{
  position:absolute;
 
  width:40px;
  height:7px;
  background:#e35a5a;
  margin:121px 21px;
   animation: l5 3s linear infinite;
  -moz-animation: l5 3s linear infinite;
   -webkit-animation: l5 3s linear infinite;
}
.l5::before{
  content:"";
  display:block;
  width:40px;
  height:7px;
  background:#df9935;
  margin: 0px 60px;
  animation: l5 3s linear infinite;
  -moz-animation: l5 3s linear infinite;
   -webkit-animation: l5 3s linear infinite;
}
.l5::after{
  content:"";
  display:block;
  width:40px;
  height:7px;
  background:#00aaef;
  margin: -7px 121px;
  animation: l5 3s linear infinite;
  -moz-animation: l5 3s linear infinite;
   -webkit-animation: l5 3s linear infinite;
}

.l6{
  position:absolute;
  width:70px;
  height:7px;
  background:gray;
  margin:152px 21px;
   animation: l6 3s linear infinite;
  -moz-animation: l6 3s linear infinite;
   -webkit-animation: l6 3s linear infinite;
}
.l6::before{
  content:"";
 display:block;
  width:30px;
  height:7px;
  background:gray;
  margin:0px 80px;
  animation: l66 3s linear infinite;
  -moz-animation: l66 3s linear infinite;
   -webkit-animation: l66 3s linear infinite;
}

.l7{
  position:absolute;
  width:162px;
  height:7px;
  background:#00aaef;
  margin:212px 21px;
  animation: l7 3s linear infinite;
  -moz-animation: l7 3s linear infinite;
   -webkit-animation: l7 3s linear infinite;
}
.d1{
  position:absolute;
  width:201px;
  height:50px;
  background:#e35a5a;
  animation: d1 3s linear infinite;
  -moz-animation: d1 3s linear infinite;
   -webkit-animation: d1 3s linear infinite;
}
.d2{
  position:absolute;
  width:201px;
  height:30px;
  background:#df9935;
  margin:50px 0;
  animation: d2 3s linear infinite;
  -moz-animation: d2 3s linear infinite;
   -webkit-animation: d2 3s linear infinite;
}
.d3{
  position:absolute;
  width:40px;
  height:12px;
  background:white;
  margin:57px 5px;
   animation: d3 3s linear infinite;
  -moz-animation: d3 3s linear infinite;
   -webkit-animation: d3 3s linear infinite;
}
.d3::before{
  content:"";
  display:block;
  width:40px;
  height:12px;
  background:white;
  margin:0px 75px;
  animation: d3 3s linear infinite;
  -moz-animation: d3 3s linear infinite;
   -webkit-animation: d3 3s linear infinite;
}
.d3::after{
  content:"";
  display:block;
  width:40px;
  height:12px;
  background:white;
  margin:-12px 150px;
  animation: d3 3s linear infinite;
  -moz-animation: d3 3s linear infinite;
   -webkit-animation: d3 3s linear infinite;
}
.d4{
  position:absolute;
  width:40px;
  height:40px;
  background:#e35a5a;
  margin:121px 5px;
   animation: d5 3s linear infinite;
  -moz-animation: d5 3s linear infinite;
   -webkit-animation: d5 3s linear infinite;
}
.d4::before{
  content:"";
 display:block;
  width:40px;
  height:40px;
  background:#df9935;
  margin:0px 75px;
   animation: d5 3s linear infinite;
  -moz-animation: d5 3s linear infinite;
   -webkit-animation: d5 3s linear infinite;
}
.d4::after{
  content:"";
 display:block;
  width:40px;
  height:40px;
  background:#00aaef;
  margin:-40px 152px;
   animation: d5 3s linear infinite;
  -moz-animation: d5 3s linear infinite;
   -webkit-animation: d5 3s linear infinite;
}
.d5{
  position:absolute;
  width:201px;
  height:50px;
  background:#00aaef;
  margin:199px 0px;
  animation: d7 3s linear infinite;
  -moz-animation: d7 3s linear infinite;
   -webkit-animation: d7 3s linear infinite;
}
@-webkit-keyframes l1 {
  0% {opacity: 0;}
  25% {opacity: 0;width:0;height:7;}
  35% {opacity: 1;width:30px;height:7px;}
  40% {opacity: 1;width:30px;height:7px;
  }
   45% {opacity: 1;
    width:30px;
    height:7px;
  }
   50% {opacity: 1;
    width:30px;
    height:7px;
  }
  60% {opacity: 1;
    width:30px;
    height:7px;
  }
  70% {opacity: 1;
    width:30px;
    height:7px;}
   80% {opacity: 1;
     width:30px;
    height:7px;}
   85% {opacity: 1;
     width:30px;
    height:7px;}
   90% {opacity: 1;
     width:30px;
    height:7px;}
   95% {opacity: 1;
     width:30px;
    height:7px;}
  100% {opacity: 1;  width:30px;
    height:7px;}
}
@-moz-keyframes l1 {
  0% {opacity: 0;}
  25% {opacity: 0;width:0;height:7;}
  35% {opacity: 1;width:30px;height:7px;}
  40% {opacity: 1;width:30px;height:7px;
  }
   45% {opacity: 1;
    width:30px;
    height:7px;
  }
   50% {opacity: 1;
    width:30px;
    height:7px;
  }
  60% {opacity: 1;
    width:30px;
    height:7px;
  }
  70% {opacity: 1;
    width:30px;
    height:7px;}
   80% {opacity: 1;
     width:30px;
    height:7px;}
   85% {opacity: 1;
     width:30px;
    height:7px;}
   90% {opacity: 1;
     width:30px;
    height:7px;}
   95% {opacity: 1;
     width:30px;
    height:7px;}
  100% {opacity: 1;  width:30px;
    height:7px;}
}
@keyframes l1 {
  0% {opacity: 0;}
  25% {opacity: 0;width:0;height:7;}
  35% {opacity: 1;width:30px;height:7px;}
  40% {opacity: 1;width:30px;height:7px;
  }
   45% {opacity: 1;
    width:30px;
    height:7px;
  }
   50% {opacity: 1;
    width:30px;
    height:7px;
  }
  60% {opacity: 1;
    width:30px;
    height:7px;
  }
  70% {opacity: 1;
    width:30px;
    height:7px;}
   80% {opacity: 1;
     width:30px;
    height:7px;}
   85% {opacity: 1;
     width:30px;
    height:7px;}
   90% {opacity: 1;
     width:30px;
    height:7px;}
   95% {opacity: 1;
     width:30px;
    height:7px;}
  100% {opacity: 1;  width:30px;
    height:7px;}
}
@-webkit-keyframes l2{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 1;
    width:50px;
    height:7px;
  }
   45% {opacity: 1;
    width:50px;
    height:7px;
  }
   50% {opacity: 1;
    width:50px;
    height:7px;
  }
  60% {opacity: 1;
    width:50px;
    height:7px;
  }
  70% {opacity: 1;
    width:50px;
    height:7px;}
   80% {opacity: 1;
     width:50px;
    height:7px;}
   85% {opacity: 1;
     width:50px;
    height:7px;}
   90% {opacity: 1;
     width:50px;
    height:7px;}
   95% {opacity: 1;
     width:50px;
    height:7px;}
  100% {opacity: 1;  width:50px;
    height:7px;}
}
@-moz-keyframes l2{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 1;
    width:50px;
    height:7px;
  }
   45% {opacity: 1;
    width:50px;
    height:7px;
  }
   50% {opacity: 1;
    width:50px;
    height:7px;
  }
  60% {opacity: 1;
    width:50px;
    height:7px;
  }
  70% {opacity: 1;
    width:50px;
    height:7px;}
   80% {opacity: 1;
     width:50px;
    height:7px;}
   85% {opacity: 1;
     width:50px;
    height:7px;}
   90% {opacity: 1;
     width:50px;
    height:7px;}
   95% {opacity: 1;
     width:50px;
    height:7px;}
  100% {opacity: 1;  width:50px;
    height:7px;}
}
@keyframes l2{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 1;
    width:50px;
    height:7px;
  }
   45% {opacity: 1;
    width:50px;
    height:7px;
  }
   50% {opacity: 1;
    width:50px;
    height:7px;
  }
  60% {opacity: 1;
    width:50px;
    height:7px;
  }
  70% {opacity: 1;
    width:50px;
    height:7px;}
   80% {opacity: 1;
     width:50px;
    height:7px;}
   85% {opacity: 1;
     width:50px;
    height:7px;}
   90% {opacity: 1;
     width:50px;
    height:7px;}
   95% {opacity: 1;
     width:50px;
    height:7px;}
  100% {opacity: 1;  width:50px;
    height:7px;}
}
@-webkit-keyframes l3{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 1;
    width:21px;
    height:7px;
  }
   50% {opacity: 1;
    width:21px;
    height:7px;
  }
  60% {opacity: 1;
    width:21px;
    height:7px;
  }
  70% {opacity: 1;
    width:21px;
    height:7px;}
   80% {opacity: 1;
     width:21px;
    height:7px;}
   85% {opacity: 1;
     width:21px;
    height:7px;}
   90% {opacity: 1;
     width:21px;
    height:7px;}
   95% {opacity: 1;
     width:21px;
    height:7px;}
  100% {opacity: 1;  width:21px;
    height:7px;}
}
@-moz-keyframes l3{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 1;
    width:21px;
    height:7px;
  }
   50% {opacity: 1;
    width:21px;
    height:7px;
  }
  60% {opacity: 1;
    width:21px;
    height:7px;
  }
  70% {opacity: 1;
    width:21px;
    height:7px;}
   80% {opacity: 1;
     width:21px;
    height:7px;}
   85% {opacity: 1;
     width:21px;
    height:7px;}
   90% {opacity: 1;
     width:21px;
    height:7px;}
   95% {opacity: 1;
     width:21px;
    height:7px;}
  100% {opacity: 1;  width:21px;
    height:7px;}
}
@keyframes l3{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 1;
    width:21px;
    height:7px;
  }
   50% {opacity: 1;
    width:21px;
    height:7px;
  }
  60% {opacity: 1;
    width:21px;
    height:7px;
  }
  70% {opacity: 1;
    width:21px;
    height:7px;}
   80% {opacity: 1;
     width:21px;
    height:7px;}
   85% {opacity: 1;
     width:21px;
    height:7px;}
   90% {opacity: 1;
     width:21px;
    height:7px;}
   95% {opacity: 1;
     width:21px;
    height:7px;}
  100% {opacity: 1;  width:21px;
    height:7px;}
}
@-webkit-keyframes l4{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 1;
    width:70px;
    height:7px;
  }
  60% {opacity: 1;
    width:70px;
    height:7px;
  }
  70% {opacity: 1;
    width:70px;
    height:7px;}
   80% {opacity: 1;
     width:70px;
    height:7px;}
   85% {opacity: 1;
     width:70px;
    height:7px;}
   90% {opacity: 1;
     width:70px;
    height:7px;}
   95% {opacity: 1;
     width:70px;
    height:7px;}
  100% {opacity: 1;  width:70px;
    height:7px;}
}
@-moz-keyframes l4{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 1;
    width:70px;
    height:7px;
  }
  60% {opacity: 1;
    width:70px;
    height:7px;
  }
  70% {opacity: 1;
    width:70px;
    height:7px;}
   80% {opacity: 1;
     width:70px;
    height:7px;}
   85% {opacity: 1;
     width:70px;
    height:7px;}
   90% {opacity: 1;
     width:70px;
    height:7px;}
   95% {opacity: 1;
     width:70px;
    height:7px;}
  100% {opacity: 1;  width:70px;
    height:7px;}
}
@keyframes l4{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 1;
    width:70px;
    height:7px;
  }
  60% {opacity: 1;
    width:70px;
    height:7px;
  }
  70% {opacity: 1;
    width:70px;
    height:7px;}
   80% {opacity: 1;
     width:70px;
    height:7px;}
   85% {opacity: 1;
     width:70px;
    height:7px;}
   90% {opacity: 1;
     width:70px;
    height:7px;}
   95% {opacity: 1;
     width:70px;
    height:7px;}
  100% {opacity: 1;  width:70px;
    height:7px;}
}
@-webkit-keyframes  l5{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 1;
    width:40px;
    height:7px;
  }
  70% {opacity: 1;
    width:40px;
    height:7px;}
   80% {opacity: 1;
     width:40px;
    height:7px;}
   85% {opacity: 1;
     width:40px;
    height:7px;}
   90% {opacity: 1;
     width:40px;
    height:7px;}
   95% {opacity: 1;
     width:40px;
    height:7px;}
  100% {opacity: 1;  width:40px;
    height:7px;}
}
@-moz-keyframes  l5{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 1;
    width:40px;
    height:7px;
  }
  70% {opacity: 1;
    width:40px;
    height:7px;}
   80% {opacity: 1;
     width:40px;
    height:7px;}
   85% {opacity: 1;
     width:40px;
    height:7px;}
   90% {opacity: 1;
     width:40px;
    height:7px;}
   95% {opacity: 1;
     width:40px;
    height:7px;}
  100% {opacity: 1;  width:40px;
    height:7px;}
}
@keyframes  l5{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 1;
    width:40px;
    height:7px;
  }
  70% {opacity: 1;
    width:40px;
    height:7px;}
   80% {opacity: 1;
     width:40px;
    height:7px;}
   85% {opacity: 1;
     width:40px;
    height:7px;}
   90% {opacity: 1;
     width:40px;
    height:7px;}
   95% {opacity: 1;
     width:40px;
    height:7px;}
  100% {opacity: 1;  width:40px;
    height:7px;}
}
@-webkit-keyframes l6 {
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 0;
    width:0px;
    height:7px;
  }
  70% {opacity: 1;
    width:70px;
    height:7px;}
   80% {opacity: 1;
     width:70px;
    height:7px;}
   85% {opacity: 1;
     width:70px;
    height:7px;}
   90% {opacity: 1;
     width:70px;
    height:7px;}
   95% {opacity: 1;
     width:70px;
    height:7px;}
  100% {opacity: 1;  width:70px;
    height:7px;}
}
@-moz-keyframes l6 {
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 0;
    width:0px;
    height:7px;
  }
  70% {opacity: 1;
    width:70px;
    height:7px;}
   80% {opacity: 1;
     width:70px;
    height:7px;}
   85% {opacity: 1;
     width:70px;
    height:7px;}
   90% {opacity: 1;
     width:70px;
    height:7px;}
   95% {opacity: 1;
     width:70px;
    height:7px;}
  100% {opacity: 1;  width:70px;
    height:7px;}
}
@keyframes l6 {
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 0;
    width:0px;
    height:7px;
  }
  70% {opacity: 1;
    width:70px;
    height:7px;}
   80% {opacity: 1;
     width:70px;
    height:7px;}
   85% {opacity: 1;
     width:70px;
    height:7px;}
   90% {opacity: 1;
     width:70px;
    height:7px;}
   95% {opacity: 1;
     width:70px;
    height:7px;}
  100% {opacity: 1;  width:70px;
    height:7px;}
}
@-webkit-keyframes l66 {
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 0;
    width:0px;
    height:7px;
  }
  70% {opacity: 0;
    width:0px;
    height:7px;}
   80% {opacity: 1;
     width:30px;
    height:7px;}
   85% {opacity: 1;
     width:30px;
    height:7px;}
   90% {opacity: 1;
     width:30px;
    height:7px;}
   95% {opacity: 1;
     width:30px;
    height:7px;}
  100% {opacity: 1;  width:30px;
    height:7px;}
}
@-moz-keyframes l66 {
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 0;
    width:0px;
    height:7px;
  }
  70% {opacity: 0;
    width:0px;
    height:7px;}
   80% {opacity: 1;
     width:30px;
    height:7px;}
   85% {opacity: 1;
     width:30px;
    height:7px;}
   90% {opacity: 1;
     width:30px;
    height:7px;}
   95% {opacity: 1;
     width:30px;
    height:7px;}
  100% {opacity: 1;  width:30px;
    height:7px;}
}
@keyframes l66 {
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 0;
    width:0px;
    height:7px;
  }
  70% {opacity: 0;
    width:0px;
    height:7px;}
   80% {opacity: 1;
     width:30px;
    height:7px;}
   85% {opacity: 1;
     width:30px;
    height:7px;}
   90% {opacity: 1;
     width:30px;
    height:7px;}
   95% {opacity: 1;
     width:30px;
    height:7px;}
  100% {opacity: 1;  width:30px;
    height:7px;}
}
@-webkit-keyframes  l7{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 0;
    width:0px;
    height:7px;
  }
  70% {opacity: 0;
    width:0px;
    height:7px;}
   80% {opacity: 0;
     width:0px;
    height:7px;}
  
   85% {opacity: 1;
     width:132px;
    height:7px;}
   90% {opacity: 1;
     width:132px;
    height:7px;}
   95% {opacity: 1;
     width:132px;
    height:7px;}
  100% {opacity: 1;  width:132px;
    height:7px;}
}
@-moz-keyframes  l7{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 0;
    width:0px;
    height:7px;
  }
  70% {opacity: 0;
    width:0px;
    height:7px;}
   80% {opacity: 0;
     width:0px;
    height:7px;}
  
   85% {opacity: 1;
     width:132px;
    height:7px;}
   90% {opacity: 1;
     width:132px;
    height:7px;}
   95% {opacity: 1;
     width:132px;
    height:7px;}
  100% {opacity: 1;  width:132px;
    height:7px;}
}
@keyframes  l7{
  0% {opacity: 0;}
  25% {opacity: 0;
    width:0;
    height:7;}
  
  35% {opacity: 0;
    width:0px;
    height:7px;
  }
  40% {opacity: 0;
    width:0px;
    height:7px;
  }
   45% {opacity: 0;
    width:0px;
    height:7px;
  }
   50% {opacity: 0;
    width:0px;
    height:7px;
  }
  60% {opacity: 0;
    width:0px;
    height:7px;
  }
  70% {opacity: 0;
    width:0px;
    height:7px;}
   80% {opacity: 0;
     width:0px;
    height:7px;}
  
   85% {opacity: 1;
     width:132px;
    height:7px;}
   90% {opacity: 1;
     width:132px;
    height:7px;}
   95% {opacity: 1;
     width:132px;
    height:7px;}
  100% {opacity: 1;  width:132px;
    height:7px;}
}
@-webkit-keyframes d1 {
  0% {opacity: 0;}
  25% {opacity: 0;
   }
  
  35% {opacity: 1;
   
  }
  40% {opacity: 1;
    
  }
   45% {opacity: 1;
    
  }
   50% {opacity: 1;
    
  }
  60% {opacity: 1;
    
  }
  70% {opacity: 1;
    }
   80% {opacity: 1;
   }
   85% {opacity: 1;
     }
   90% {opacity: 1;
     }
   95% {opacity: 1;
     }
  100% {opacity: 1;  
}
}
@-moz-keyframes d1 {
  0% {opacity: 0;}
  25% {opacity: 0;
   }
  
  35% {opacity: 1;
   
  }
  40% {opacity: 1;
    
  }
   45% {opacity: 1;
    
  }
   50% {opacity: 1;
    
  }
  60% {opacity: 1;
    
  }
  70% {opacity: 1;
    }
   80% {opacity: 1;
   }
   85% {opacity: 1;
     }
   90% {opacity: 1;
     }
   95% {opacity: 1;
     }
  100% {opacity: 1;  
}
}
@keyframes d1 {
  0% {opacity: 0;}
  25% {opacity: 0;
   }
  
  35% {opacity: 1;
   
  }
  40% {opacity: 1;
    
  }
   45% {opacity: 1;
    
  }
   50% {opacity: 1;
    
  }
  60% {opacity: 1;
    
  }
  70% {opacity: 1;
    }
   80% {opacity: 1;
   }
   85% {opacity: 1;
     }
   90% {opacity: 1;
     }
   95% {opacity: 1;
     }
  100% {opacity: 1;  
}
}
  @-webkit-keyframes d2{
  0% {opacity: 0;}
  25% {opacity: 0; }
  
  35% {opacity: 0;}
  40% {opacity: 1;}
   45% {opacity: 1;}
   50% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 1;}
   80% {opacity: 1;}
   85% {opacity: 1;
    }
    90% {opacity: 1;}
    
   95% {opacity: 1;
     }
  100% {opacity: 1;  }
}
@-moz-keyframes d2{
  0% {opacity: 0;}
  25% {opacity: 0; }
  
  35% {opacity: 0;}
  40% {opacity: 1;}
   45% {opacity: 1;}
   50% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 1;}
   80% {opacity: 1;}
   85% {opacity: 1;
    }
    90% {opacity: 1;}
    
   95% {opacity: 1;
     }
  100% {opacity: 1;  }
}
@keyframes d2{
  0% {opacity: 0;}
  25% {opacity: 0; }
  
  35% {opacity: 0;}
  40% {opacity: 1;}
   45% {opacity: 1;}
   50% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 1;}
   80% {opacity: 1;}
   85% {opacity: 1;
    }
    90% {opacity: 1;}
    
   95% {opacity: 1;
     }
  100% {opacity: 1;  }
}
 @-webkit-keyframes d3{
  0% {opacity: 0;}
  25% {opacity: 0;}
  
  35% {opacity: 0;}
  40% {opacity: 0;
    
  }
   45% {opacity: 1;
   
  }
   50% {opacity: 1;
    
  }
  60% {opacity: 1;
    
  }
  70% {opacity: 1;
  }
   80% {opacity: 1;
     }
   85% {opacity: 1;
    }
   90% {opacity: 1;
   }
   95% {opacity: 1;
     }
  100% {opacity: 1;  }
}
@-moz-keyframes d3{
  0% {opacity: 0;}
  25% {opacity: 0;}
  
  35% {opacity: 0;}
  40% {opacity: 0;
    
  }
   45% {opacity: 1;
   
  }
   50% {opacity: 1;
    
  }
  60% {opacity: 1;
    
  }
  70% {opacity: 1;
  }
   80% {opacity: 1;
     }
   85% {opacity: 1;
    }
   90% {opacity: 1;
   }
   95% {opacity: 1;
     }
  100% {opacity: 1;  }
}
@keyframes d3{
  0% {opacity: 0;}
  25% {opacity: 0;}
  
  35% {opacity: 0;}
  40% {opacity: 0;
    
  }
   45% {opacity: 1;
   
  }
   50% {opacity: 1;
    
  }
  60% {opacity: 1;
    
  }
  70% {opacity: 1;
  }
   80% {opacity: 1;
     }
   85% {opacity: 1;
    }
   90% {opacity: 1;
   }
   95% {opacity: 1;
     }
  100% {opacity: 1;  }
}

@-webkit-keyframes d5 {
  0% {opacity: 0;}
  25% {opacity: 0;
    }
  
  35% {opacity: 0;
    
  }
  40% {opacity: 0;
   
  }
   45% {opacity: 0;
   
  }
   50% {opacity: 0;
    
  }
  60% {opacity: 1;
    
  }
  70% {opacity: 1;
    }
   80% {opacity: 1;
   }
   85% {opacity: 1;
   }
   90% {opacity: 1;
   }
   95% {opacity: 1;
   }
  100% {opacity: 1; }
}
@-moz-keyframes d5 {
  0% {opacity: 0;}
  25% {opacity: 0;
    }
  
  35% {opacity: 0;
    
  }
  40% {opacity: 0;
   
  }
   45% {opacity: 0;
   
  }
   50% {opacity: 0;
    
  }
  60% {opacity: 1;
    
  }
  70% {opacity: 1;
    }
   80% {opacity: 1;
   }
   85% {opacity: 1;
   }
   90% {opacity: 1;
   }
   95% {opacity: 1;
   }
  100% {opacity: 1; }
}
@keyframes d5 {
  0% {opacity: 0;}
  25% {opacity: 0;
    }
  
  35% {opacity: 0;
    
  }
  40% {opacity: 0;
   
  }
   45% {opacity: 0;
   
  }
   50% {opacity: 0;
    
  }
  60% {opacity: 1;
    
  }
  70% {opacity: 1;
    }
   80% {opacity: 1;
   }
   85% {opacity: 1;
   }
   90% {opacity: 1;
   }
   95% {opacity: 1;
   }
  100% {opacity: 1; }
}
@-moz-keyframes d7 {
  0% {opacity: 0;}
  25% {opacity: 0;
    }
  
  35% {opacity: 0;
    
   
  }
  40% {opacity: 0;
   
  }
   45% {opacity: 0;
    
  }
   50% {opacity: 0;
    
  }
  60% {opacity: 0;
    
  }
  70% {opacity: 0;
   }
   80% {opacity: 0;
   }
  
   85% {opacity: 1;
     }
   90% {opacity: 1;
     }
   95% {opacity: 1;
     }
  100% {opacity: 1;  }
}
@-webkit-keyframes d7 {
  0% {opacity: 0;}
  25% {opacity: 0;
    }
  
  35% {opacity: 0;
    
   
  }
  40% {opacity: 0;
   
  }
   45% {opacity: 0;
    
  }
   50% {opacity: 0;
    
  }
  60% {opacity: 0;
    
  }
  70% {opacity: 0;
   }
   80% {opacity: 0;
   }
  
   85% {opacity: 1;
     }
   90% {opacity: 1;
     }
   95% {opacity: 1;
     }
  100% {opacity: 1;  }
}
@keyframes d7 {
  0% {opacity: 0;}
  25% {opacity: 0;
    }
  
  35% {opacity: 0;
    
   
  }
  40% {opacity: 0;
   
  }
   45% {opacity: 0;
    
  }
   50% {opacity: 0;
    
  }
  60% {opacity: 0;
    
  }
  70% {opacity: 0;
   }
   80% {opacity: 0;
   }
  
   85% {opacity: 1;
     }
   90% {opacity: 1;
     }
   95% {opacity: 1;
     }
  100% {opacity: 1;  }
}

That’s all after pasting the code now your code will be successfully run. If you get any kind of error/problem in the code just comment or contact me on social media

Output Result

Written By@codingthai
Code By @Judith Neuman

LEAVE A REPLY

Please enter your comment!
Please enter your name here