[data-reveal] { transition-property: opacity, transform; transition-duration: 1.5s; transition-timing-function: cubic-bezier(0.2, 1, 0.2, 1); &[data-reveal*='no'] { opacity: 0; } &[data-reveal*='bottom'] { transform: translateY(100px); } &[data-reveal*='left'] { transform: translateX(-100px); } } [class*='entries'] { @for $i from 2 through 12 { article[data-reveal*='#{$i}'] { transition-delay: #{($i - 1) * 0.3}s; } } }