Animate.css Experiment

HAML
.wrapper - (1..24).each do |i| .col.animated.bounceInUp
SCSS
body { background: linear-gradient(to left, #2c3e50 , #3498db); height: 100%; overflow: hidden; } @for $i from 1 through 24 { $colors: #1abc9c, #f1c40f, #e74c3c, #2c3e50, #3498db, #40d47e, #16a085, #c0392b, #8e44ad, #5677fc, #8bc34a, #673ab7, #1abc9c, #f1c40f, #e74c3c, #2c3e50, #3498db, #40d47e, #16a085, #c0392b, #8e44ad, #5677fc, #8bc34a, #673ab7; .animated:nth-child(#{$i}) { -webkit-animation-delay: ($i * 0.2) + s; animation-delay: ($i * 0.2) + s; background: nth($colors, $i) } } .col { background: #000; width: 100px; height: 300px; float: left; margin: 10px auto; box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12); } .wrapper { height: 100vh; display: flex; justify-content: space-around; align-items: center; text-align: center; // you can delete this line if u want // flex-direction: column; }
JAVASCRIPT
Expand for more options Login