使用animation替换background-image实现一些动画效果

最新推荐文章于 2025-01-09 09:00:00 发布

IAM史努比

最新推荐文章于 2025-01-09 09:00:00 发布

阅读量7k

点赞数

分类专栏：问题解决文章标签： css animation

本文链接：https://blog.youkuaiyun.com/sinat_34682450/article/details/82665177

版权

问题解决专栏收录该内容

2 篇文章

订阅专栏

使用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;
  } 
}

这样就好啦～