Javascript Css动画在第一次触发后运行2次

我试图制作一个透明的导航栏，当你在页面顶部，当你向下移动时，导航栏的背景会出现，但是当动画第一次触发时，它看起来像是被触发了两次。我怎样才能解决这个问题

window.onscroll=函数（）{
var scroll=getScrollTop（）；
var navbar=document.getElementById（'navbar'）；
如果（滚动>20）{
navbar.classList.remove（'onTop'）；
navbar.classList.add（'moved'）；
}
否则{
navbar.classList.remove（'moved'）；
navbar.classList.add（'onTop'）；
}
}
函数getScrollTop（）{
如果（页面偏移的类型！=“未定义”）{
返回页面偏移；
}
否则{
var B=document.body；
var D=document.documentElement；
D=（D.clientHeight）？D:B；
返回D.scrollTop；
}
}

正文{
背景：线性梯度（215度，d55724度，5259e2度）；
背景大小：400%400%；
保证金：0；
填充：0；
高度：1000px；
}
navbar先生{
位置：固定；
排名：0；
宽度：100%；
高度：50px；
}
奥托普先生{
位置：固定；
排名：0；
宽度：100%；
高度：50px；
动画迭代次数：1；
动画：导航栏onTop.3s；
}
.搬家{
背景色：白色；
位置：固定；
排名：0；
宽度：100%；
高度：50px；
动画迭代次数：1；
动画：导航栏移动。6秒；
}
@导航栏移动的关键帧{
来自{背景色：rgba（255，255，255，0）；}
至{背景色：rgb（255，255，255）；}
}
@导航栏onTop的关键帧{
来自{背景色：rgb（255，255，255）；}
至{背景色：rgba（255，255，255，0）；}
}

示例导航栏

我已经修好了

$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动<300）{
$（'.navbar'）.css（'background'，'transparent'）；
}否则{
$（'.navbar'）.css（'background'，'white'）；
}
});
函数getScrollTop（）{
如果（页面偏移的类型！=“未定义”）{
//除IE 9之前的浏览器外的大多数浏览器
返回页面偏移；
}
否则{
var B=document.body；//即“怪癖”
var D=document.documentElement；//具有doctype的IE
D=（D.clientHeight）？D:B；
返回D.scrollTop；
}
}

正文{
背景：线性梯度（-250度，#1E3B70，#29539B）；
背景大小：400%400%；
保证金：0；
填充：0；
高度：10000px；
}
navbar先生{
页边距顶部：0！重要；
位置：固定！重要；
顶部：0！重要；
宽度：100%；
高度：50px；
过渡时间：500ms；
背景色：透明；
}
.navbar.scrolled{
背景：白色；
}

测试

看起来像是

onscroll

最初发射了多次。