我创建了一个CSS背景动画，在Chrome和Firefox中运行良好，但在IE Edge和IE 11中只有背景颜色动画。在 Safari 浏览器中，只有左上角的图像会动画化。我不确定问题是什么。我的代码在下面，我的 JS 提琴手示例 https://jsfiddle.net/3vq7L9g2/
我更新了我的代码，但它仍然不起作用
<div class="my-group">
</div>
div {
width: 500px;
height: 300px;
}
.my-group {
animation: animatedBackgroundfrom 0.3s ease-in-out forwards;
-webkit-animation: animatedBackgroundfrom 0.3s ease-in-out forwards;
-moz-animation: animatedBackgroundfrom 0.3s ease-in-out forwards;
background-repeat: no-repeat;
}
.my-group:hover {
animation: animatedBackgroundto 0.3s ease-in-out forwards;
-webkit-animation: animatedBackgroundto 0.3s ease-in-out forwards;
-moz-animation: animatedBackgroundto 0.3s ease-in-out forwards;
background-repeat: no-repeat;
}
@keyframes animatedBackgroundfrom {
from {
background: url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -6% -2% no-repeat,
url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 109% -2% no-repeat,
url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -6% 100% no-repeat,
url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 104% 100% no-repeat;
background-color: #fbaf5d;
}
to {
background:
url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -30% -1% no-repeat,
url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 130% 0% no-repeat,
url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -30% 100% no-repeat,
url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 130% 100% no-repeat;
background-color: #448ccb;
}
}
@keyframes animatedBackgroundto {
from {
background:
url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -30% -1% no-repeat,
url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 130% 0% no-repeat,
url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -30% 100% no-repeat,
url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 130% 100% no-repeat;
background-color: #448ccb;
}
to {
background:
url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -6% -2% no-repeat,
url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 109% -2% no-repeat,
url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -6% 100% no-repeat,
url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 104% 100% no-repeat;
background-color: #fbaf5d;
}
}
@-moz-keyframes animatedBackgroundfrom {
from {
background:
url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -6% -2% no-repeat,
url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 109% -2% no-repeat,
url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -6% 100% no-repeat,
url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 104% 100% no-repeat;
background-color: #fbaf5d;
}
to {
background:
url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -30% -1% no-repeat,
url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 130% 0% no-repeat,
url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -30% 100% no-repeat,
url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 130% 100% no-repeat;
background-color: #448ccb;
}
}
@-moz-keyframes animatedBackgroundto {
from {
background:
url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -30% -1% no-repeat,
url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 130% 0% no-repeat,
url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -30% 100% no-repeat,
url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 130% 100% no-repeat;
background-color: #448ccb;
}
to {
background:
url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -6% -2% no-repeat,
url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 109% -2% no-repeat,
url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -6% 100% no-repeat,
url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 104% 100% no-repeat;
background-color: #fbaf5d;
}
}
@-webkit-keyframes animatedBackgroundfrom {
from {
background:
url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -6% -2% no-repeat,
url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 109% -2% no-repeat,
url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -6% 100% no-repeat,
url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 104% 100% no-repeat;
background-color: #fbaf5d;
}
to {
background:
url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -30% -1% no-repeat,
url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 130% 0% no-repeat,
url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -30% 100% no-repeat,
url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 130% 100% no-repeat;
background-color: #448ccb;
}
}
@-webkit-keyframes animatedBackgroundto {
from {
background:
url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -30% -1% no-repeat,
url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 130% 0% no-repeat,
url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -30% 100% no-repeat,
url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 130% 100% no-repeat;
background-color: #448ccb;
}
to {
background:
url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -6% -2% no-repeat,
url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 109% -2% no-repeat,
url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -6% 100% no-repeat,
url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 104% 100% no-repeat;
background-color: #fbaf5d;
}
}
@-o-keyframes animatedBackgroundfrom {
from {
background:
url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -6% -2% no-repeat,
url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 109% -2% no-repeat,
url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -6% 100% no-repeat,
url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 104% 100% no-repeat;
background-color: #fbaf5d;
}
to {
background:
url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -30% -1% no-repeat,
url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 130% 0% no-repeat,
url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -30% 100% no-repeat,
url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 130% 100% no-repeat;
background-color: #448ccb;
}
}
@-o-keyframes animatedBackgroundto {
from {
background:
url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -30% -1% no-repeat,
url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 130% 0% no-repeat,
url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -30% 100% no-repeat,
url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 130% 100% no-repeat;
background-color: #448ccb;
}
to {
background:
url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -6% -2% no-repeat,
url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 109% -2% no-repeat,
url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -6% 100% no-repeat,
url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 104% 100% no-repeat;
background-color: #fbaf5d;
}
}
我想通了。当我定义背景图像时，背景位置背景在动画的div中重复，而不仅仅是调用动画名称，这解决了问题。现在我的动画可以在IE 11，IE Edge和Safari中工作
.my-group {
background-image:
url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg),
url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg),
url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg),
url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg);
background-position: -6% -2%, 109% -2%, -6% 100%, 104% 100%;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
animation: coreanimatedBackgroundfrom 0.3s ease-in-out forwards;
-moz-animation: coreanimatedBackgroundfrom 0.3s ease-in-out forwards;
-webkit-animation: coreanimatedBackgroundfrom 0.3s ease-in-out forwards;
animation: animatedBackgroundfrom 0.3s ease-in-out forwards;
-webkit-animation: animatedBackgroundfrom 0.3s ease-in-out forwards;
-moz-animation: animatedBackgroundfrom 0.3s ease-in-out forwards;
background-repeat: no-repeat;
}
.my-group:hover {
animation: animatedBackgroundto 0.3s ease-in-out forwards;
-webkit-animation: animatedBackgroundto 0.3s ease-in-out forwards;
-moz-animation: animatedBackgroundto 0.3s ease-in-out forwards;
background-repeat: no-repeat;
}
@keyframes animatedBackgroundfrom {
from {
background: url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -6% -2% no-repeat,
url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 109% -2% no-repeat,
url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -6% 100% no-repeat,
url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 104% 100% no-repeat;
background-color: #fbaf5d;
}
to {
background:
url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -30% -1% no-repeat,
url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 130% 0% no-repeat,
url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -30% 100% no-repeat,
url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 130% 100% no-repeat;
background-color: #448ccb;
}
}
@keyframes animatedBackgroundto {
from {
background:
url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -30% -1% no-repeat,
url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 130% 0% no-repeat,
url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -30% 100% no-repeat,
url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 130% 100% no-repeat;
background-color: #448ccb;
}
to {
background: url(https://cdn2.dustygroove.com/images/products/h/haines_nath_zootallur_101s.jpg) -6% -2% no-repeat,
url(https://cdn2.dustygroove.com/images/products/n/nufsaid~~~~_rise~~~~~_101s.jpg) 109% -2% no-repeat,
url(https://cdn2.dustygroove.com/images/products/g/gainsb_serg_lepacha20_101s.jpg) -6% 100% no-repeat,
url(https://cdn2.dustygroove.com/images/products/r/rempis_dave_ithra~~~~_101s.jpg) 104% 100% no-repeat;
background-color: #fbaf5d;
}
}
GSAP(绿袜子动画平台(就是为这种情况而设计的。
你可以使用时间轴光来解决这个问题，使用一些js代码。 https://greensock.com/docs/TimelineLite