I need to activate a heartbeat CSS animation on 6 different divs, but I want to do it in a specific sequence.
For instance, let's say I have an array:
self.arraySequence = [0,3,5,3];
In this array, each number represents the position of the div that should receive the heartbeat animation.
https://i.sstatic.net/2L5yC.png
These divs are UI components created using AngularJs:
<div class="grid-cell"
ng-class="{'heartbeat': $ctrl.isActive
}"
></div>
I am attempting to use the controller to activate the HeartBeat animation sequentially at each position. So following the array mentioned earlier, it would look like this:
- The div at position 0 will animate for 1 second
- The div at position 3 will animate for 1 second after the div at position 0
- The div at position 5 will then animate for 1 second after the one at position 3
- Finally, the div at position 3 will animate for 1 second after the one at position 5
This way, all animations will take a total of 4 seconds.
I attempted using $timeout, but both animations executed simultaneously.