I want to run a css animation on button click. I have an animation that is run when another animation ends after that I want that animation to be run on a button click. Right now I have the animation running the first when the preceding animation ends.

These are the few things are tried:

  1. I tried removing the class and re-adding it.// didn't work.
  2. I saw somewhere mentioning to set

    void element offSetWdith = 0;/ // didn't work.

  3. I took the element off the DOM and re-added it by setting

    <template if:true={condition}> // didn't work.

Here is the code I have now:

 <div class="cities-section">
    //animation played out on the cities-section element
.cities-section {
    margin-left: 10px;
    opacity: 0;
.cities-list-animation {
    animation: citiesLoadAnimation 0.4s forwards 0s ease;
@keyframes citiesLoadAnimation {
0% {
    opacity: 0;

100% {
    opacity: 1;

  mapAnimationEnds() {

1 Answer 1


Browsers calculate a sort of "delta", as does Lightning, so you just need a small render delay to allow the first set of changes to finish rendering before starting more. The following works for me in this playground:

    setTimeout(() =>

This is basically "option 1" from your answer, but keeping in mind that you need to introduce a render cycle to make this work.

  • Thanks @sfdcfox, the above is working. also thanks to the Playground linked, that helped.
    – sumchans
    Commented Apr 13, 2020 at 19:17

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .