Vuesax SCSS animation keyframes not working

Question

I'm trying to put some nice style into my Vuesax table. I want to create an animation that will list data. For now I have created something like this:

<vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data" class="table-open">

and style:

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.table-open{
    animation: 1s ease 0s 1 slideInFromLeft;
}

and this works fine. But I want to list products one by one and I tried something like this:

<vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data" :style="[{animation: (indextr * 0.1) + 's ease 0s 1 slideInFromLeft'}]">

But this is not working. Any ideas how to fix it? Do I need to write keyframes in some other way?