使用animation替换背景图片来实现动画效果时,如果直接替换背景图片来实现,ie是不能兼容的
比如:
.d-pro1{
width: 641px;
height: 767px;
background-size: 641px auto;
background-repeat: no-repeat;
background-position: center;
background-image: url(../img/d-pro1.png);
-webkit-animation:d-pro1 4s infinite;
-moz-animation: d-pro1 4s infinite;
-o-animation: d-pro1 4s infinite;
-ms-animation: d-pro1 4s infinite;
animation:d-pro1 4s infinite;
}
@keyframes d-pro1 {
0% {
background-image: url(../img/d-pro1.png);
}
6% {
background-image: url(../img/d-pro1-active.png);
}
12% {
background-image: url(../img/d-pro1.png);
}
18% {
background-image: url(../img/d-pro1-active.png);
}
24% {
background-image: url(../img/d-pro1.png);
}
100% {
background-image: url(../img/d-pro1.png);
}
}
在IE浏览器下是没有效果的
解决办法:将实现效果的图片整合成一张雪碧图,然后通过background-position属性来替换不同图片
如下:
.d-pro1{
width: 641px;
height: 767px;
background-position: 0 0;
background-size: 1282px auto;
background-repeat: no-repeat;
background-image: url(../img/d/sprite-d-pro1.png);
-webkit-animation:d-pro1 4s infinite;
-moz-animation: d-pro1 4s infinite;
-o-animation: d-pro1 4s infinite;
-ms-animation: d-pro1 4s infinite;
animation:d-pro1 4s infinite;
}
@keyframes d-pro1 {
0% {
background-position: 0 0;
}
6% {
background-position: -641px 0;
}
12% {
background-position: 0 0;
}
18% {
background-position: -641px 0;
}
24% {
background-position: 0 0;
}
100% {
background-position: 0 0;
}
}
但是这样还有一个问题,就是背景图片位置变换的过程肉眼可见
解决办法:
.d-pro1{
width: 641px;
height: 767px;
background-position: 0 0;
background-size: 1282px auto;
background-repeat: no-repeat;
background-image: url(../img/d/sprite-d-pro1.png);
-webkit-animation:d-pro1 4s steps(1) infinite;
-moz-animation: d-pro1 4s steps(1) infinite;
-o-animation: d-pro1 4s steps(1) infinite;
-ms-animation: d-pro1 4s steps(1) infinite;
animation:d-pro1 4s steps(1) infinite;
}
@keyframes d-pro1 {
0% {
background-position: 0 0;
}
6% {
background-position: -641px 0;
}
12% {
background-position: 0 0;
}
18% {
background-position: -641px 0;
}
24% {
background-position: 0 0;
}
100% {
background-position: 0 0;
}
}
这样就好啦~