Question

我想制作一个箭头移动的图像，以便读者知道他们可以向下滚动以阅读更多内容。我尝试用CSS中的动画做到这一点，但它没有用。

＆＃13;

section.scrollDownContainer {
  width: 100%;
  position: absolute;
  top: 65px;
}

section.scrollDownContainer img {
  display: block;
  box-shadow: 5px 5px 5px #333333;
  margin: auto;
  -webkit-animation: arrowmove 0.5s forwards;
  -moz-animation: arrowmove 0.5s forwards;
  -ms-animation: arrowmove 0.5s forwards;
  -o-animation: arrowmove 0.5s forwards;
  animation: arrowmove 0.5s forwards;
}

@-webkit-keyframes arrowmove {
  0% {
    left: 0px;
    top: 0px;
  }
  50% {
    left: 0px;
    top: 50px;
  }
  100% {
    left: 0px;
    top: 0px;
  }
}

@-moz-keyframes arrowmove {
  0% {
    left: 0px;
    top: 0px;
  }
  50% {
    left: 0px;
    top: 50px;
  }
  100% {
    left: 0px;
    top: 0px;
  }
}

@-ms-keyframes arrowmove {
  0% {
    left: 0px;
    top: 0px;
  }
  50% {
    left: 0px;
    top: 50px;
  }
  100% {
    left: 0px;
    top: 0px;
  }
}

@-o-keyframes arrowmove {
  0% {
    left: 0px;
    top: 0px;
  }
  50% {
    left: 0px;
    top: 50px;
  }
  100% {
    left: 0px;
    top: 0px;
  }
}

@keyframes arrowmove {
  0% {
    left: 0px;
    top: 0px;
  }
  50% {
    left: 0px;
    top: 50px;
  }
  100% {
    left: 0px;
    top: 0px;
  }
}

＆＃13;

<section class="scrollDownContainer">
  <img src="./image/arrow.png">
</section>

＆＃13;

谁能告诉我为什么？谢谢。

Answer 1

您可以在关键帧中使用transform: translateY(...)

＆＃13;

section.scrollDownContainer {
  width: 100%;
  position: absolute;
  top: 65px;
}

section.scrollDownContainer img {
  display: block;
  margin: auto;
  animation: arrowmove 0.5s infinite;
}

@keyframes arrowmove {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(0%);
  }
}

＆＃13;

<section class="scrollDownContainer">
  <img src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png" width="50px" height="50px">
</section>

＆＃13;

Answer 2

动画的left:和top:属性对您的图片没有影响，因为图片CSS不包含position属性。

将position: relative;或position: absolute;添加到图片的CSS ...

section.scrollDownContainer img {
  position: relative; /* <------------------- added */
  display: block;
  box-shadow: 5px 5px 5px #333333;
  margin: auto;
  -webkit-animation: arrowmove 0.5s forwards;
  -moz-animation: arrowmove 0.5s forwards;
  -ms-animation: arrowmove 0.5s forwards;
  -o-animation: arrowmove 0.5s forwards;
  animation: arrowmove 0.5s forwards;
}

然后动画应该起作用。

在CSS 中使用left:，right:，top:或bottom:要求该元素还具有position属性

CSS动画移动没有用

2 个答案: