Question

我希望图片“眨眼”，即立即改变，但它的工作方式就像一个旋转木马。我在哪里弄错了？

以下是代码：http://cssdeck.com/labs/1o63nrrv3t

body {
background-color: black;
}

.logo {
  height: 850px;
  width: 400px;
  margin: 0 auto;
}
.logo:before {
  content: "";
  display: inline-block;
  position: absolute;
  height: 75px;
  width: 400px;
  top: 400px;
  z-index: 1;
  background: url("https://i.stack.imgur.com/sOemp.png") center top no-repeat;
  font-size: 0;
  line-height: 0;
  animation: play 1s infinite;
}
@keyframes play {
  100% {
    background-position: center -75px;
  }
}

<!DOCTYPE html>
<head>
    <title>Logo</title>
</head>
<body>
<header>
    <div class="logo"></div>
</header>
</body>

Answer 1

如果你想让你的照片闪烁，你只需要使用不透明度

body {
background-color: black;
}

.logo {
  height: 850px;
  width: 400px;
  margin: 0 auto;
}
.logo:before {
  content: "";
  display: inline-block;
  position: absolute;
  height: 75px;
  width: 400px;
  top: 400px;
  z-index: 1;
  background: url("https://i.stack.imgur.com/sOemp.png") center top no-repeat;
  font-size: 0;
  line-height: 0;
  animation: play 1s infinite;
  opacity:0;
}
@keyframes play {
  from{opacity:0;}
  to {opacity:1;}
}

see your example here

Answer 2

您可以使用此css来使其正常工作


    body {
    background-color: black;
    }

    .logo {
      height: 850px;
      width: 400px;
      margin: 0 auto;
    }
    .logo:before {
      content: "";
      display: inline-block;
      position: absolute;
      height: 75px;
      width: 400px;
      top: 400px;
      z-index: 1;
      background: url("https://i.stack.imgur.com/sOemp.png") center top no-repeat;
      font-size: 0;
      line-height: 0;
      animation: play 1s infinite;
    }
    @keyframes play {
      0%{
        background-position:center top;
      }
      50%{
        background-position:center top;
      }
      51%{
        background-position:center bottom;
      }

      100% {
        background-position:center bottom;
        }
    }

为什么精灵图片不会立即改变？

2 个答案: