Javascript CSS中的动画

我想知道如何编辑/修改

css

，以便在用户滚动整个动画或

skills bar

可见的页面时启动动画

动画可以工作，但我面临的问题是，它可以在网站的负载上工作，当我到达

技能栏时，动画已经播放，不再存在

请参见下面的示例：


这是一个示例，请参见当用户向下滚动到该页面或部分时动画如何播放？我希望以下代码也会发生同样的情况：


@导入url（'https://fonts.googleapis.com/css2?family=Poppins:wght@200；300；400；500；600；700&display=swap'）；
*{
保证金：0；
填充：0；
框大小：边框框；
字体系列：“Poppins”，无衬线；
}
车身20{
身高：100%；
放置项目：中心；
背景：透明；
}
：：选择{
颜色：#fff；
背景：黑色；
}
.技能栏{
填充：25px 30px；
宽度：97%；
背景：#fff；
盒影：5px 5px 20px rgba（0,0,0,0.2）；
边界半径：10px；
}
.技能棒{
利润率：20px0；
}
酒吧：第一个孩子{
边际上限：0px；
}
.skill bars.bar.info{
边缘底部：5px；
}
.技能栏.信息栏18{
字号：500；
字号：17px；
不透明度：0；
动画：showText 0.5s 1s线性向前；
}
@关键帧显示文本{
100%{
不透明度：1；
}
}
.技能栏.进度栏.进度线{
高度：10px；
宽度：100%；
背景：#f0；
位置：相对位置；
变换：scaleX（0）；
变换原点：左；
边界半径：10px；
方框阴影：插入0 1px 1px rgba（0,0,0,0.05），
0 1pxRGBA（255255,0.8）；
动画：向前设置1s立方贝塞尔（1,0,0.5,1）的动画；
}
@关键帧设置动画{
100%{
变换：scaleX（1）；
}
}
.bar.进度线跨度18{
身高：100%；
位置：绝对位置；
边界半径：10px；
变换：scaleX（0）；
变换原点：左；
背景：黑色；
动画：向前设置1s立方贝塞尔（1,0,0.5,1）的动画；
}
.bar.progress-line.html span18{
宽度：84%；
}
.bar.progress-line.css span18{
宽度：76%；
}
.bar.progress-line.jquery span18{
宽度：91%；
}
.bar.progress-line.python span18{
宽度：59%；
}
.bar.progress-line.18{
宽度：70%；
}
.进度线span18:：之前{
位置：绝对位置；
内容：“；
顶部：-10px；
右：0；
身高：0；
宽度：0；
边框：7px实心透明；
边框底宽：0px；
右边框宽度：0px；
边框顶部颜色：#000；
不透明度：0；
动画：showText2 0.5s 1.5s线性向前；
}
.进度线span18:：之后{
位置：绝对位置；
顶部：-28px；
右：0；
字号：500；
背景：#000；
颜色：#fff；
填充：1px8px；
字体大小：12px；
边界半径：3px；
不透明度：0；
动画：showText2 0.5s 1.5s线性向前；
}
@关键帧showText2{
100%{
不透明度：1；
}
}
.progress-line.html span18:：之后{
内容：“84%”；
}
.progress-line.css span18:：之后{
内容：“76%”；
}
.progress-line.jquery span18:：之后{
内容：“91%”；
}
.progress-line.python span18:：之后{
内容：“59%”；
}
.progress-line.mysql span18:：之后{
内容：“70%”；
}
/*----------------第二个方框-----------------*/
.skill-bars1{
填充：25px 30px；
宽度：97%；
背景：#fff；
盒影：5px 5px 20px rgba（0,0,0,0.2）；
边界半径：10px；
}
.技能-bar1.bar1{
利润率：20px0；
}
1.酒吧1.酒吧1：第一个孩子{
边际上限：0px；
}
.skill-bars1.bar1.info1{
边缘底部：5px；
}
.skill-bars1.bar1.info1 span19{
字号：500；
字号：17px；
不透明度：0；
动画：showText 0.5s 1s线性向前；
}
@关键帧显示文本{
100%{
不透明度：1；
}
}
.skill-bars1.bar1.progress-line1{
高度：10px；
宽度：100%；
背景：#f0；
位置：相对位置；
变换：scaleX（0）；
变换原点：左；
边界半径：10px；
方框阴影：插入0 1px 1px rgba（0,0,0,0.05），
0 1pxRGBA（255255,0.8）；
动画：向前设置1s立方贝塞尔（1,0,0.5,1）的动画；
}
@关键帧设置动画{
100%{
变换：scaleX（1）；
}
}
.bar1.进度线1跨度19{
身高：100%；
位置：绝对位置；
边界半径：10px；
变换：scaleX（0）；
变换原点：左；
背景：黑色；
动画：向前设置1s立方贝塞尔（1,0,0.5,1）的动画；
}
.bar1.progress-line1.html1 span19{
宽度：61%；
}
.bar1.进度线1.css1跨度19{
宽度：50%；
}
.bar1.进度线1.jquery1跨度19{
宽度：68%；
}
.bar1.progress-line1.python1 span19{
宽度：82%；
}
.bar1.progress-line1.mysql1 span19{
宽度：98%；
}
.progress-line1 span19:：之前{
位置：绝对位置；
内容：“；
顶部：-10px；
右：0；
身高：0；
宽度：0；
边框：7px实心透明；
边框底宽：0px；
右边框宽度：0px；
边框顶部颜色：#000；
不透明度：0；
动画：showText2 0.5s 1.5s线性向前；
}
.progress-line1 span19:：之后{
位置：绝对位置；
顶部：-28px；
右：0；
字号：500；
背景：#000；
颜色：#fff；
填充：1px8px；
字体大小：12px；
边界半径：3px；
不透明度：0；
动画：showText2 0.5s 1.5s线性向前；
}
@关键帧showText2{
100%{
不透明度：1；
}
}
.progress-line1.html1 span19:：之后{
内容：“61%”；
}
.progress-line1.css1 span19:：之后{
内容：“50%”；
}
.progress-line1.jquery1 span19:：之后{
内容：“68%”；
}
.progress-line1.python1 span19:：之后{
内容：“82%”；
}
.progress-line1.mysql1 span19:：之后{
内容：“98%”；
}

我在做什么
哈佛CS50课程
Youtube频道（Java教程）
C++
JAVA
Web开发（前端）