Need to animate/style items exponentially? Why not let the browser calculate the values for you? scss forloops
p {
animation: ptime 2s ease;
animation-fill-mode: forwards;
}
@for $i from 1 through 4 {
&:nth-child(#{$i}) {
animation-delay: $i * (1s /6);
}
}
@keyframes ptime {
0% {
left: -50px;
opacity: 0;
}
100% {
left: 0;
opacity: 1;
}
}
////////////////////
// renders out to :
///////////////////
// p:nth-child(1) {
// animation-delay: .5s;
// }
// p:nth-child(2) {
// animation-delay: 1s;
// }
// p:nth-child(3) {
// animation-delay: 1.5s;
// }
// p:nth-child(4) {
// animation-delay: 2s;
// }
<div>
<p>Help plant 337,000 native trees this season in South America’s Andes Mountains.</p>
<p>Enable local and indigenous communities to plant native forests that store carbon, provide water, and protect biodiversity.</p>
<p>Improve livelihoods: bring food security and health care to villagers growing and planting trees.</p>
<p>$100 starts a new forest!</p>
<p><a class="btn" href="/donate">Act Now!</a></p>
</div>