html - 简单的背景更改 CSS 动画不起作用

标签 html css animation

我有一个小动画可以改变 div 的背景图像,但只适用于 google chrome(没有 safari 和边缘)。 我真的不知道为什么请帮助。

@keyframes backAnimM1
{

0%
{
    background-image: url(../medias/portada/1.jpg);
    background-size: 100% 100%;
}

45%
{
     background-image: url(../medias/portada/2.jpg);
     background-size: 100% 100%;
}
50%
{
    background-image: url(../medias/portada/3.jpg);
    background-size: 100% 100%;
}
75%
{
    background-image: url../medias/portada/4.jpg);
    background-size: 100% 100%;
}
80%
{
    background-image: url(../medias/portada/5.jpg);
    background-size: 100% 100%;
}
100%
{
    background-image: url(../medias/portada/1.jpg);
    background-size: 100% 100%;
}
}

还有这个:

#backAnimationMod1
{
animation: backAnimM1 10s infinite;
-webkit-animation:backAnimM1 10s infinite;
-moz-animation:backAnimM1 10s infinite;
-o-animation:backAnimM1 10s infinite;
}

谢谢

最佳答案

您只需为 webkit 浏览器(Chrome、Safari、Opera)的关键帧添加一个前缀:

@-webkit-keyframes backAnimM1
{...

基本上,保留您拥有的内容,然后使用 webkit- 前缀为 webkit 浏览器制作一份副本。

关于html - 简单的背景更改 CSS 动画不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34141147/

相关文章:

html - 居中 div 中被垂直滚动条覆盖的内容的右边缘

javascript - onclick 事件切换在不同 div 中存在超过 1 个的 div

css - !important 或 !notimportant 在 IE6 和 7 中?

ios - 在 UIView 动画 block 中调用 layoutIfNeeded 会导致 subview 更早移动

animation - RealityKit:更改 ModelEntity 的比例而不改变其位置

html - 如果元素的文本内容太长,如何在布局网格中强制换行?

javascript - <输入类 ="btn btn-default btn-sm users-btn"> 带下划线的文本问题

php - 用户 session 和显示用户信息

带有搜索图标的 HTML 按钮?

jquery - 在 DOM 上可视化地交换两个 HTML 元素,然后将其全部动画化?