CSS加关键帧动画切换背景图片闪烁问题修复

最新推荐文章于 2024-10-10 21:29:13 发布

疯狂的夏铭予

最新推荐文章于 2024-10-10 21:29:13 发布

阅读量3.1k

点赞数 2

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_42356513/article/details/123327558

版权

css 专栏收录该内容

3 篇文章

订阅专栏

问题描述

给一个div加个关键帧动画,动态改变背景图片,会出现首次进入页面这个div背景图片出现抖动问题

css示例

// 这样会出现抖动    
.demo {
      width: 100px;
       height: 100px;
      animation: demo 2s linear infinite;
    }
	@keyframes demo {
  0% {
    background: url('1.png')
      no-repeat;
    background-position: 0 -88px;
    background-size: 420px 1080px;
  }
  50% {
    background: url('2.png')
      no-repeat;
    background-position: 0 -88px;
    background-size: 420px 1080px;
  }
  100% {
    background: url('3.png')
      no-repeat;
    background-position: 0 -88px;
    background-size: 420px 1080px;
  }
}

解决方案

给该div一个background属性,提前把图片丢进去

    .demo {
      width: 100px;
       height: 100px;
      animation: demo 2s linear infinite;
        background: url('1.png'),
            url('2.png'),
            url('3.png');
    }
	@keyframes demo {
  0% {
    background: url('1.png')
      no-repeat;
    background-position: 0 -88px;
    background-size: 420px 1080px;
  }
  50% {
    background: url('2.png')
      no-repeat;
    background-position: 0 -88px;
    background-size: 420px 1080px;
  }
  100% {
    background: url('3.png')
      no-repeat;
    background-position: 0 -88px;
    background-size: 420px 1080px;
  }
}