Html CSS3平滑动画以更改背景图像

我正在尝试使用CSS动画更改div的背景动画，但是，我无法使过渡平滑

你知道怎么做吗？这是我的密码

。封面{
高度：200px；
宽度：200px；
背景图像：url（'https://images.unsplash.com/photo-1582201943021-e8e5cb6dedc2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1562&q=80’；
动画：mymove 5s；
动画延迟：5s；
动画计时功能：轻松进出；
-webkit动画计时功能：轻松输入输出；
}
@关键帧mymove{
从{
背景图像：url（'https://images.unsplash.com/photo-1582201943021-e8e5cb6dedc2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1562&q=80’；
}
到{
背景图像：url（'https://images.unsplash.com/photo-1582480356444-60ca00301659?ixlib=rb-1.2.1&ixid=EYJHCBFAWQIOJEYMDD9&auto=format&fit=crop&w=2001&q=80’；
}

---

正常背景变化没有动画。您可以执行以下操作： 降低背景的不透明度，更改背景图像，然后再次增加不透明度。这将实现淡入淡出效果

。封面{
高度：200px；
宽度：200px；
背景图像：url（'https://images.unsplash.com/photo-1582201943021-e8e5cb6dedc2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1562&q=80’；
动画：mymove 5s；
动画延迟：5s；
动画计时功能：轻松进出；
-webkit动画计时功能：轻松输入输出；
}
@关键帧mymove{
0%{背景图像：url（'https://images.unsplash.com/photo-1582201943021-e8e5cb6dedc2?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=1562&q=80’；}
50%{背景色：rgba（0,0,0,0.5）；}
51%{背景图像：url（'https://images.unsplash.com/photo-1582480356444-60ca00301659?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=2001&q=80’；}
100%{背景色：rgba（0,0,0,1）；}

---

正常背景变化没有动画。您可以执行以下操作： 降低背景的不透明度，更改背景图像，然后再次增加不透明度。这将实现淡入淡出效果

。封面{
高度：200px；
宽度：200px；
背景图像：url（'https://images.unsplash.com/photo-1582201943021-e8e5cb6dedc2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1562&q=80’；
动画：mymove 5s；
动画延迟：5s；
动画计时功能：轻松进出；
-webkit动画计时功能：轻松输入输出；
}
@关键帧mymove{
0%{背景图像：url（'https://images.unsplash.com/photo-1582201943021-e8e5cb6dedc2?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=1562&q=80’；}
50%{背景色：rgba（0,0,0,0.5）；}
51%{背景图像：url（'https://images.unsplash.com/photo-1582480356444-60ca00301659?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=2001&q=80’；}
100%{背景色：rgba（0,0,0,1）；}

---

我认为最好的选择是在背景图像中添加一个过渡，因此如果您更改它，就会出现一个动画。（在本例中，我使用了：hover事件）

。封面{
高度：200px；
宽度：200px；
背景图像：url（'https://images.unsplash.com/photo-1582201943021-e8e5cb6dedc2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1562&q=80’；
过渡：背景图像5s易入易出；
}
.封面：悬停{
背景图像：url（'https://images.unsplash.com/photo-1582480356444-60ca00301659?ixlib=rb-1.2.1&ixid=EYJHCBFAWQIOJEYMDD9&auto=format&fit=crop&w=2001&q=80’；
}

---

我认为最好的选择是在背景图像中添加一个过渡，因此如果您更改它，就会出现一个动画。（在本例中，我使用了：hover事件）

。封面{
高度：200px；
宽度：200px；
背景图像：url（'https://images.unsplash.com/photo-1582201943021-e8e5cb6dedc2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1562&q=80’；
过渡：背景图像5s易入易出；
}
.封面：悬停{
背景图像：url（'https://images.unsplash.com/photo-1582480356444-60ca00301659?ixlib=rb-1.2.1&ixid=EYJHCBFAWQIOJEYMDD9&auto=format&fit=crop&w=2001&q=80’；
}

您可以显示html代码吗？您可以为question@akil如何添加代码段？默认情况下，背景图像不可设置动画（），但可以在Chrome和Safari中工作（仅在Mac上）。通常是使用不透明性更改，正如@Nicicalu所说。您能显示html代码吗？您能为question@akil如何添加代码片段？默认情况下，背景图像不可设置动画（），但它在Chrome和Safari中工作（仅在Mac上）。正如@Nicicalu所说，通常使用不透明度更改。