隐藏png图像，直到其显示在用户屏幕中

Question

目前我有一个css动画，它从屏幕外开始（如下所示）并向右移动。（请参见此处http://crea8tion.com/ChristmasMessage/index.html)

在测试过程中，我注意到在一些屏幕上，在动画开始之前，它仍然显示在屏幕的左侧。

有没有其他我可以做的事情可以根据用户的屏幕大小隐藏png？

这是我现在所拥有的，你可以看到它只是向左偏移。

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

Answer 1

您必须使用对象本身的维度来隐藏屏幕外的内容。左边的值应该是宽度的负值，在这种情况下是left:-100px

.santa {
    left:-1000px;
    top:-200px; /* However tall santa is */
    ...
}