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

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

您可以添加一个简单的叠加：隐藏到父div。在你的情况下：

.columns {
    overflow: hidden;
}

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

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

1 个答案: