Bar chart – CSS animation

Version 1.0

When I was writing the official website this month, I came across a bar chart. The manager also required that, in order to improve user experience, appropriate dynamic effects should be added in the appropriate places of the design draft. Okay, let’s do it.

Huh? What is this? This action? It’s not what I want. What is this. Attach the code and see what the problem is

// HTML
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div class="listX"><img src="./img/book-2.png" alt=""></div>
Copy the code
// style ul,li {list-style: none; } ul{ position: relative; box-sizing: border-box; padding-top: 225px; font-size: 0; } li{ width: 38px; height: 0; position: absolute; bottom: -6px; Animation: height 0.4 s ease - out; Box-shadow: 1px 0 2px rgba(0, 0, 0, 0.15); text-align: center; background: linear-gradient(to bottom,#7abcff 0%, #00BCD4 44%, #2196F3 100%);Box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08); } li:nth-child(1){ left: 26px; height: 20px; Animation - delay: 0.2 s; - its - animation - delay: 0.2 s; margin-left: 0; } li:nth-child(2){ left: 100px; height: 41px; Animation - delay: 0.4 s; - its - animation - delay: 0.4 s; } li:nth-child(3){ left: 175px; height: 70px; Animation - delay: 0.6 s; - its - animation - delay: 0.6 s; } li:nth-child(4){ left: 251px; height: 100px; Animation - delay: 0.8 s; - its - animation - delay: 0.8 s; } li:nth-child(5){ width: 37px; left: 325px; height: 129px; Animation - delay: 1.0 s; - its - animation - delay: 1.0 s; } li:nth-child(6){ width: 37px; left: 400px; height: 149px; Animation - delay: 1.2 s; - its - animation - delay: 1.2 s; margin-right: 0; } @keyframes height { 0%{ height: 0; } 100% { visibility: visible; } } .listX{ text-align: left; } .listX img{ width: 477px; }Copy the code

Version 2.0

Knowledge: visibility:hidden; animation-fill-mode: forwards; That’s what I was looking for.


Modified code:

li{ width: 38px; height: 0; position: absolute; bottom: -6px; Animation: height 0.4 s ease - out; Box-shadow: 1px 0 2px rgba(0, 0, 0, 0.15); text-align: center; background: linear-gradient(to bottom,#7abcff 0%, #00BCD4 44%, #2196F3 100%);Box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08); // Add style visibility: hidden; animation-fill-mode: forwards; }Copy the code

Version 3.0

BFC+CSS variable traversal +CSS variable combination calculation + Filter color rotation + reverse animation +Flexbox bottom baseline alignment. Inspired by author JowayYoung, pros: no burdiness in writing li’s height + animation time, so I wrote version 3.0.

Knowledge:

--height: calc((var(--line-index) + 1) * 30px);
--time: calc(var(--line-index) * 300ms);
height: var(--height);
animation: height 0.4s ease-out var(--time);
Copy the code
Knowledge point description

Css3 filter property, var to execute a variable, used to declare variables. Syntax: — name: value; For example: –a: 10px; That means the variable is A and the value is 10px

Example:

:root{
  --color:red;
}
p{
  --wid:100px;
  width:var(--wid);  //100px
  heith:var(--wid);  //100px
  border-radius:calc(var(--wid) / 2); //50px
  color:blue;
}
span{
  width:calc(var(--wid) / 5);  //20px
  display:inline-block;
  color:var(--color); //red
}
Copy the code

Final code:

//HTML
<ul>
    <li style="--line-index: 0"></li>
    <li style="--line-index: 1"></li>
    <li style="--line-index: 2"></li>
    <li style="--line-index: 3"></li>
    <li style="--line-index: 4"></li>
    <li style="--line-index: 5"></li>
 </ul>
 <div class="listX"><img src="./img/book-2.png" alt=""></div> // style ul,li {list-style: none; } ul{ position: relative; box-sizing: border-box; padding-top: 225px; font-size: 0; } li{ width: 38px; position: absolute; bottom: -6px; Animation: height 0.4 s ease - out; Box-shadow: 1px 0 2px rgba(0, 0, 0, 0.15); text-align: center; background: linear-gradient(to bottom,#7abcff 0%, #00BCD4 44%, #2196F3 100%);Box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08); visibility: hidden; animation-fill-mode: forwards; / / add style - height: calc ((var (- line - index) + 1) * 30 px); --time: calc(var(--line-index) * 300ms); height: var(--height); Animation: animate-height 0.2s ease-out var(--time); } // Li :nth-child(1){left: 26px; } li:nth-child(2){ left: 100px; } li:nth-child(3){ left: 175px; } li:nth-child(4){ left: 251px; } li:nth-child(5){ left: 325px; } li:nth-child(6){ left: 400px; } @keyframes height { 0%{ height: 0; } 100% { visibility: visible; } } .listX{ text-align: left; } .listX img{ width: 477px; }Copy the code

END

I am a small white is front step pit, this is my first gold digging article, I am going through the pit, share with you, do not know for you have no use, just want to take notes as a share.