CSS动画重叠div

Question

我想要将一个段落中的滚动文本进行动画处理，使其从底部向上移动到一个 div 的顶部，然后滚出 div（变得不可见），最后循环播放。以下是相关的 CSS：

@keyframes showAndScroll {
            0% {opacity: 0;}
            10% {opacity: 0.85;}
            50% {opacity: 0.85;}
            60% {opacity: 0;}
            100% {opacity: 0;}

        }

        .infobar {
            position: absolute;
            width: 100%;
            height: 30%;
            bottom: 0%;
            color: white;
            background-color: red;
            opacity: 0.75;
            text-indent: 30px;
            font-size: 200%;


            pointer-events: none;

            animation-name: showAndScroll;
            animation-duration: 40s;
            animation-iteration-count: infinite;
        }

        @keyframes scroll {
            0% {
                transform: translateY(600%); color: red;
                }
            50% {
                transform: translateY(-200%); color: blue;
                }
        }

        .infobar p {
            position: absolute;
            width: 100%;
            overflow: hidden;
            display: inline-block;
            animation-name: scroll;
            animation-duration: 40s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

并且HTML代码：

<div class="infobar">
        <p>
            Infobar test
        <p>
    </div>

我有两个问题:

1. 文字重叠在文档的其余部分上。如何使段落在触及其父div的边缘时变为不可见？我正在寻找这种效果：http://media02.hongkiat.com/marquee-css3-animation//demo/index2.html

2. 由于某种原因，将段落放置在div的100%处似乎没有将其放置在div的“底部”（我目前将其放置在600%的位置）。为什么会这样？

欢迎提供任何意见。这是我的JSfiddle链接：https://jsfiddle.net/essi/oqh6ok00/1/

- essi

---

你正在将p标签从600%缩小到-200%，当然会超出边界并重叠父容器。尝试将-200替换为0。 - Ron.Basco

Answer 1

将.infobar类添加overflow：hidden;。这样可以剪切溢出的内容，并且您的动画元素将在边缘内可见，类似于您在链接示例中展示的方式。

@keyframes showAndScroll {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.85;
  }
  50% {
    opacity: 0.85;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.infobar {
  position: absolute;
  width: 100%;
  height: 30%;
  bottom: 0%;
  color: white;
  background-color: red;
  opacity: 0.75;
  text-indent: 30px;
  font-size: 200%;
  pointer-events: none;
  animation-name: showAndScroll;
  animation-duration: 40s;
  animation-iteration-count: infinite;
  overflow: hidden;
}

@keyframes scroll {
  0% {
    transform: translateY(600%);
    color: red;
  }
  50% {
    transform: translateY(-200%);
    color: blue;
  }
}

.infobar p {
  position: absolute;
  width: 100%;
  overflow: hidden;
  display: inline-block;
  animation-name: scroll;
  animation-duration: 40s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

<div class="infobar">
  <p>
    Infobar test
    <p>
</div>

- GibboK