Question

你好我想让我的背景移动，但动画不活跃。为什么？

@keyframes anima {
    0% {
        background-position-y: 0px;
    } 100% {
      background-position-y: -150px;
    }
}

#bando {
    border-radius: 4px;
    background-image: url(neon.jpg);
    background-size: 130%;
    width: 600px;
    padding-top:40px;
    padding-bottom:40px;
    margin-bottom: 10px;
    font-size: 30px;
    height:150px;
    animation-name: anima;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate-reverse;
}

先谢谢你帮助我，因为自4小时后我就被封锁了

在https://jsfiddle.net/526vttyg/

中试试

Answer 1

你错过了animation-duration，你必须指明这一点，否则动画不会做任何事情。默认animation-duration为0

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration

＆＃13;

#bando {
  border-radius: 4px;
  background-image: url(http://kenwheeler.github.io/slick/img/fonz1.png);
  background-size: 130%;
  width: 600px;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-bottom: 10px;
  font-size: 30px;
  height: 150px;
  animation-name: anima;
  animation-duration: 2s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate-reverse;
}

@keyframes anima {
  0% {
    background-position-y: 0;
  }
  100% {
    background-position-y: -150px;
  }
}

＆＃13;

<div id="bando"></div>

＆＃13;

为什么我的动画不活跃？

1 个答案: