Javascript 将动画添加到更改背景图像幻灯片

我使用以下示例代码创建了带有缩略图的背景幻灯片：

<div class="my-background-cover uk-animation-fade and uk-animation-kenburns" style="background-image: url({$product.cover.bySize.ats_large.url});">

但是，我尝试淡入淡出，以及在背景图像更改时将任何动画应用于背景图像。例如，下面的css样式使用类

uk animation fade

和

uk animation kenburns

应用于div

    'animation-name': 'uk-scale-kenburns';
    'animation-duration': '15s';
    'animation-direction': 'reverse';
    'animation-timing-function': 'ease-in'; 
    'animation-fill-mode': 'both';  

但是，动画仅在页面加载和第一个图像出现时才起作用。单击缩略图并更改图像时，动画不适用。

---

单击缩略图时，使每个背景图像淡入淡出的正确方法是什么

我相信您感兴趣的是css转换，而不是css动画。在线资源丰富，但这里有一个例子：

    'animation-name': 'uk-scale-kenburns';
    'animation-duration': '15s';
    'animation-direction': 'reverse';
    'animation-timing-function': 'ease-in'; 
    'animation-fill-mode': 'both';