在设置高度动画时将弹性项目与底部对齐

Question

I'm trying to make an equalizer animation and would like these lines to animate from the bottom of the containing DIV as opposed to animating from the top like they are now.

 .equalizer { display: flex; flex-direction: row; height: 10px; }.bar { margin-bottom: auto; background-color: #36D475; width: 2px; height: 2px; margin: 1px; animation-name: bar-animation; animation-direction: alternate; animation-iteration-count: infinite; animation-duration: .25s; }.one { animation-delay: .1s; }.two { animation-delay: -.1s; animation-duration: .5s; }.three { animation-delay: -.2s; }.four { animation-delay: -.3s; } @keyframes bar-animation { from { height: 2px;} to { height: 10px;} }

 <div class="equalizer"> <div class="bar one"></div> <div class="bar two"></div> <div class="bar three"></div> <div class="bar four"></div> </div>

Answer 1

I think using transforms might suffice and be lighter than adjusting the height property. The property that will change the orientation is the transform-origin: 0 100% . Below the script transforms the bars by scaling from transform: scaleY(1) to transform: scaleY(5) .

 .equalizer { display: flex; flex-direction: row; height: 10px; align-items: flex-end; }.bar { margin-bottom: auto; background-color: #36D475; width: 2px; height: 2px; margin: 1px; animation-name: bar-animation; animation-direction: alternate; animation-iteration-count: infinite; animation-duration: .25s; transform: scaleY(1); transform-origin: 0 100%; }.one { animation-delay: .1s; }.two { animation-delay: -.1s; animation-duration: .5s; }.three { animation-delay: -.2s; }.four { animation-delay: -.3s; } @keyframes bar-animation { to {transform: scaleY(5);} }

 <div class="equalizer"> <div class="bar one"></div> <div class="bar two"></div> <div class="bar three"></div> <div class="bar four"></div> </div>

Answer 2

Just use align-items: flex-end; in .equalizer you can also use align-items: center; to make them align in center

 .equalizer { display: flex; flex-direction: row; height: 10px; align-items: flex-end; }.bar { margin-bottom: auto; background-color: #36D475; width: 2px; height: 2px; margin: 1px; animation-name: bar-animation; animation-direction: alternate; animation-iteration-count: infinite; animation-duration: .25s; }.one { animation-delay: .1s; }.two { animation-delay: -.1s; animation-duration: .5s; }.three { animation-delay: -.2s; }.four { animation-delay: -.3s; } @keyframes bar-animation { from { height: 2px;} to { height: 10px;} }

 <div class="equalizer"> <div class="bar one"></div> <div class="bar two"></div> <div class="bar three"></div> <div class="bar four"></div> </div>

Answer 3

It's quite simple. All you have to do is add align-items: flex-end; to your .equalizer class. This will align all the bars to the bottom of the div making it start from the bottom rather than from the top. The other solution is you can use transform: scaleY(-1); which will flip the whole thing upside down.

 .equalizer { display: flex; flex-direction: row; height: 10px; align-items: flex-end; }.bar { margin-bottom: auto; background-color: #36D475; width: 2px; height: 2px; margin: 1px; animation-name: bar-animation; animation-direction: alternate; animation-iteration-count: infinite; animation-duration: .25s; }.one { animation-delay: .1s; }.two { animation-delay: -.1s; animation-duration: .5s; }.three { animation-delay: -.2s; }.four { animation-delay: -.3s; } @keyframes bar-animation { from { height: 2px;} to { height: 10px;} }

 <div class="equalizer"> <div class="bar one"></div> <div class="bar two"></div> <div class="bar three"></div> <div class="bar four"></div> </div>