[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*='ct-lazy'] { > picture, > img { transition: opacity 2s ease; } } } [class*='entries'] { @for $i from 2 through 12 { article[data-reveal*='#{$i}'] { transition-delay: #{($i - 1) * 0.3}s; } } }