如何防止CSS动画使页面滚动？

我有一个CSS动画，它坐在页面上关注自己的业务。动画通过更改第一个单词的margin-top值来循环浏览某些单词。

如果滚动网页以使动画的中心接触视口的顶部，则页面将随着动画的移动而开始滚动。Nb该页面上还有其他项目，因此需要滚动条。

实际操作中（在带有div的动画中模拟可滚动页面）：https : //jsfiddle.net/jtde9rxo/

如何使页面忽略此动画，而不是尝试滚动动画的内容？

这是JSFiddle中使用的代码：

<div class="page">
  <h1>
    <span class="word-swap-container">
      <span class="word-swap-mask">
        <span class="word-swap word-1">Apple</span>
        <span class="word-swap word-2">Orange</span>
        <span class="word-swap word-3">Pear</span>
        <span class="word-swap word-4">Apple</span>
      </span>
      <span class="word-swap-append">is a fruit</span>
    </span>
  </h1>
</div>

.page {
  padding: 150px 0 1000px;
}

.word-swap-container {
    display: block;
    overflow: hidden;
}

.word-swap-mask {
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    text-align: right;
    height: 1.1em;
    line-height: 1;
}

.word-swap {
    display: block;
    height: 1.1em;
    line-height: 1;
}

.word-swap-append {
    display: inline-block;
    vertical-align: top;
    line-height: 1;
}

.word-swap.word-1 {
    animation: word-swap-move-1 3s linear infinite;
}
.word-swap.word-2 {
    animation: word-swap-move-2 3s linear infinite;
}
.word-swap.word-3 {
    animation: word-swap-move-3 3s linear infinite;
}
.word-swap.word-4 {
    animation: word-swap-move-4 3s linear infinite;
}

@keyframes word-swap-move-1 {
     0% {margin-top: 0em}
    27% {margin-top: 0em;opacity:1}
    33% {margin-top: -1.1em;opacity:0}
    60% {margin-top: -1.1em}
    66% {margin-top: -2.2em}
    93% {margin-top: -2.2em;opacity:0}
   100% {margin-top: -3.3em;opacity:1}
}

@keyframes word-swap-move-2 {
    27% {opacity:0}
    33% {opacity:1}
    60% {opacity:1}
    66% {opacity:0}
}

@keyframes word-swap-move-3 {
    60% {opacity:0}
    66% {opacity:1}
    93% {opacity:1}
   100% {opacity:0}
}

@keyframes word-swap-move-4 {
    93% {opacity:0}
   100% {opacity:1}
}