html 中 div 切换背景图片事件是否有办法绑定过度动画？

資深大佬 : LeeReamond 0

如题，菜鸡使用 vue 搭建简单前端项目中。

现在有这么个需求，现有一 div 如下

<div style="background-image: url(a.jpg)"> </div>

目前实现了以一个按钮事件触发，更换这个 background-image 的图片地址。但是因为图片一瞬间切换，重复几次以后感觉非常生硬。请问是否有办法以 css 绑定动画，让图片在切换时渐变地替换，比如在 0.5 秒时间内渐变。

或者是以别的什么方式，不是以 url 切换为事件，而是直接切换 div ？请前端大佬解惑，谢谢。

大佬有話說 (5)

資深大佬 : phy25

https://stackoverflow.com/questions/9483364/css3-background-image-transition

資深大佬 : Quarter

我看了一下阿里云的动画，他们把所有帧放到一张图里，然后往下一帧一帧切，就形成动画了，直接过渡形成动画不太现实的

資深大佬 : cpstar

把背景变前景

資深大佬 : zuiluo

transition 支持 background-images 属性

transition:background-image 1s linear;

資深大佬 : meepo3927

https://www.zhangxinxu.com/wordpress/2020/08/background-image-animation/

参考一下啊