Question

我第一次使用@keyframes，但我无法让它工作。

知道我做错了吗？

如果我将动画放在.scroll_down div上，它会动画，但我希望它内部的div能够生成动画。我有什么理由不能这样做吗？

HTML：

<body>
  <div class="container_first">
    <div class="scroll-down">
      <div id="arrow">&#8681;</div>
    </div>
  </div>

CSS：

.scroll-down {
  display: block;
  height: 80px;
  width: 110px;
  display: block;
  position: absolute;
  bottom: 0px;
  right: 5%;
  background-color: #222;
  text-align: center;
  z-index: 6;
}

#arrow {
  color: #FFF;
  font-size: 36px;
  padding-right: 2px;
  padding-top: 10px;
  animation: bounce 1.2s linear infinite;
}

#arrow { padding-top: 0px; }
@keyframes bounce {
    0%   {top: 10px;}
    25%  {top: 15px;}
    75%  {top: 20px;}
    100% {top: 25px;}
}

Answer 1

你需要让#arrow位置相对。

http://jsfiddle.net/myvvwb4m/

#arrow {
  color: #FFF;
  font-size: 36px;
  position: relative;
  padding-right: 2px;
  padding-top: 10px;
  animation: bounce 1.2s linear infinite;
}

属性top不适用于静态定位的元素。

@keyframes不适用于div中的div

1 个答案: