Question

transform:translateY无法使用background-attachment:fixed图片。任何人都可以检查下面的CSS。

.fixed-bg {
  background-image: url(Life.jpeg);
  min-height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: mymove 5s alternate ;
  -webkit-animation: mymove 5s alternate ;  
}
@-webkit-keyframes mymove {
  from {
    transform: translateY(0);
    -webkit-transform: translateY(10);
  }
  to {
    transform: translateY(0);
    -webkit-transform: translateY(10);
  }
} 
@keyframes mymove {
  from {
    transform: translateY(0);
    -webkit-transform: translateY(10);
  }
  to {
    transform: translateY(0);
    -webkit-transform: translateY(10);
  }
}

有人可以帮我这个吗？

Answer 1

我认为你在关键帧上犯了一个错误。以下代码正常运行 - div向下移动。在body元素上，代码无效！

作为替代方案，您也可以使用animate.css。有一个名为slideOutDown的动画。

＆＃13;

.fixed-bg {
  background-image: url(http://placehold.it/100x100);
  min-height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: mymove 5s alternate ;
  -webkit-animation: mymove 5s alternate ;  
}
@-webkit-keyframes mymove {
  from {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  to {
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
  }
} 
@keyframes mymove {
  from {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  to {
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
  }
}

＆＃13;

<div class="fixed-bg"></div>

＆＃13;

为什么要转换：translateY不能使用背景附件：固定图像

1 个答案: