I am experimenting with animating three separate divs one by one, each moving down 50px as a test.
Here is the SCSS code I am using:
.action {
margin: 20px 0;
text-align: center;
transform: translate(0,0);
transition: all .5s;
&.animate {
transform: translate(0, 50px);
}
&.animate-delay-1 {animation-delay: 1s;}
&.animate-delay-2 {animation-delay: 2s;}
}
And here is the corresponding HTML:
<div class="actions">
<div class="action animate animate-delay-0">
<i class="fa fa-envelope-o"></i>
<span class="person"></span> receives her questions by email
</div>
<div class="action animate animate-delay-1">
<span class="person"></span> fills in the answers to her questions
</div>
<div class="action animate animate-delay-2">
<span class="person"></span> receives the results by email
</div>
</div>
The animations are not behaving as expected and seem to be occurring simultaneously without any delay. Any suggestions or insights on what might be causing this issue? Thank you for your help!