Javascript css绝对位置动画，溢出隐藏

我有一个id为流星的动画短片：

我的html：

.shootingstar{
宽度：4px；
高度：4px；
边界半径：50%；
背景：#fff；
位置：绝对位置；
变换原点：100%0；
动画迭代次数：1；
不透明度：0；
}
.shootingstar动画对吗{
动画：拍摄明星右下放松；
}
.shootingstar动画左{
动画：射击明星左下轻出；
}
.shootingstar动画右：后{
内容：''；
位置：绝对位置；
边框：2px实心#f00；
边框宽度：2px150px 2px150px；
边框颜色：透明#fff；
变换：旋转（-45度）平移3d（1px，2px，0）；
变换原点：0%100%；
}
.shootingstar动画左：后{
内容：''；
位置：绝对位置；
边框：2px实心#f00；
边框宽度：2px150px 2px150px；
边框颜色：透明#fff；
变换：旋转（-135度）平移3d（1px，5px，0）；
变换原点：0%100%；
}
@-webkit关键帧直接向下拍摄Star{
0% {
不透明度：0；
变换：缩放（0）旋转（0）平移3D（0,0,0）；
}
50% {
不透明度：1；
变换：缩放（1）旋转（0）平移3D（-100px，100px，0）；
}
100% {
不透明度：0；
变换：缩放（1）旋转（0）平移3D（-150px，150px，0）；
}
}
@-webkit关键帧拍摄Star left down{
0% {
不透明度：0；
变换：缩放（0）旋转（0）平移3D（0,0,0）；
}
50% {
不透明度：1；
变换：缩放（1）旋转（0）平移3d（200px，200px，0）；
}
100% {
不透明度：0；
变换：缩放（1）旋转（0）平移3d（300px，300px，0）；
}
}

在我的js文件中，我克隆了元素，并随机创建顶部和宽度，以便在天空中有多颗流星：

var sky = document.getElementById('sky')

function createShootingStar () {
        var time = Math.floor(Math.random() * (1000 - 800) + 800) / 1000
        var finalTime = time.toFixed(2)
        var random = Math.round(Math.random())

        var tx = Math.floor(Math.random() * finalW)
        var ty = Math.random() * (finalH * 0.25 - 0) + 0

        var element = document.getElementById('shootingstar')
        var cln = element.cloneNode(true)
        cln.classList.add('shootingstar')
        random == 1
          ? cln.classList.add('shootingstar-animation-right')
          : cln.classList.add('shootingstar-animation-left')
        cln.style.animationDuration = finalTime + 's'
        cln.style.right = tx + 'px'
        cln.style.top = ty  + 'px'
        sky.appendChild(cln)
        setTimeout(function () {
          sky.removeChild(cln)
        }, 3000)
}

setInterval(createShootingStar, 1000)

问题是，有时候，我的流星会在溢出中开始或结束（这就是我想要的），但是，水平滚动条会激活，我想阻止它

我想把屏幕上所有的星星都隐藏起来，但是

溢出：隐藏不起作用

编辑：这发生在mobile dimension上

我在
finalH
和
finalW
未定义方面出错。所以他们在给定一个随机的起始位置。
应用
overflow:hidden
到天空，您可以看到结果。我真的很喜欢这样的效果，也很喜欢这样一个事实：流星并非只来自一个方向，而且并非所有的星星都在视口中溶解


var sky=document.getElementById（'sky'））
函数createShootingStar（）{
var finalW=Math.random（）*window.outerWidth；
var finalH=Math.random（）*window.outerHeight；
var time=Math.floor（Math.random（）*（1000-800）+800）/1000
var finalTime=固定时间（2）
var random=Math.round（Math.random（））
var tx=Math.floor（Math.random（）*finalW）
var ty=Math.random（）*（finalH*0.25-0）+0
var element=document.getElementById（'shootingstar'）
var cln=element.cloneNode（真）
cln.classList.add（'shootingstar'）
随机==1？
cln.classList.add（'shootingstar-animation-right'）：
cln.classList.add（'shootingstar-animation-left'）
cln.style.animationDuration=最终时间+'s'
cln.style.right=tx+'px'
cln.style.top=ty+'px'
天空之子（cln）
setTimeout（函数（）{
天空移动儿童（cln）
}, 3000)
}
设置间隔（createShootingStar，1000）
.shootingstar{
宽度：4px；
高度：4px；
边界半径：50%；
背景：#fff；
位置：绝对位置；
变换原点：100%0；
动画迭代次数：1；
不透明度：0；
}
#天空{
背景色：#000；
位置：固定；
宽度：100%；
身高：100%；
溢出：隐藏；
}
.shootingstar动画对吗{
动画：拍摄明星右下放松；
}
.shootingstar动画左{
动画：射击明星左下轻出；
}
.shootingstar动画右：后{
内容：''；
位置：绝对位置；
边框：2px实心#f00；
边框宽度：2px150px 2px150px；
边框颜色：透明#fff；
变换：旋转（-45度）平移3d（1px，2px，0）；
变换原点：0%100%；
}
.shootingstar动画左：后{
内容：''；
位置：绝对位置；
边框：2px实心#f00；
边框宽度：2px150px 2px150px；
边框颜色：透明#fff；
变换：旋转（-135度）平移3d（1px，5px，0）；
变换原点：0%100%；
}
@-webkit关键帧直接向下拍摄Star{
0% {
不透明度：0；
变换：缩放（0）旋转（0）平移3D（0,0,0）；
}
50% {
不透明度：1；
变换：缩放（1）旋转（0）平移3D（-100px，100px，0）；
}
100% {
不透明度：0；
变换：缩放（1）旋转（0）平移3D（-150px，150px，0）；
}
}
@-webkit关键帧拍摄Star left down{
0% {
不透明度：0；
变换：缩放（0）旋转（0）平移3D（0,0,0）；
}
50% {
不透明度：1；
变换：缩放（1）旋转（0）平移3d（200px，200px，0）；
}
100% {
不透明度：0；
变换：缩放（1）旋转（0）平移3d（300px，300px，0）；
}
}
我会尝试在sky div上应用
溢出：隐藏。
var sky=document.getElementById（'sky'）；
函数createShootingStar（）{
var finalW=window.outerWidth；
var finalH=window.outerHeight；
var-time=Math.floor（Math.random（）*（1000-800）+800）/1000；
var finalTime=固定时间（2）；
var random=Math.round（Math.random（））；
var tx=Math.round（Math.random（）*finalW）；
var ty=Math.round（Math.random（）*（finalH*0.25-0）+0）；
var元素=document.getElementById（'shootingstar'）；
var cln=element.cloneNode（真）；
cln.classList.add（'shootingstar'）；