css - 使 CSS 动画在离开可见屏幕后停止

Question

使用 css 动画，我有一个从屏幕左侧移动到右侧的对象。但是，我注意到动画在退出屏幕右侧后实际上仍在继续，这会导致出现 Chrome 水平滚动条。

如果向右滚动，它只会显示动画对象不再移动和白色背景屏幕。

如何在动画离开可视屏幕后立即终止动画？

可以在这里看到实际的动画。 http://crea8tion.com/ChristmasMessage/index.html

对象的CSS代码是

.santa {
    width: 1000px;
    position: absolute;
    top: -14%;
    left: -55%;
    -webkit-animation: santa-move 1s 1s ease-out forwards;
    -webkit-animation-delay:5s;animation-delay:5s;                   
    -webkit-animation-duration: 25s;
}

@-webkit-keyframes santa-move {
    100% { left: 100%;}
} 

Answer 1

有一种简单的方法可以删除这个额外的滚动条。

您可以添加一个简单的 overlay: hidden 到父 div。在你的情况下:

.columns {
    overflow: hidden;
}

在这种情况下，圣诞老人动画不再添加水平滚动条。