Javascript ：CSS关键帧元素仅在视口中可见时才设置动画？

在“熟练程度”下的“关于”部分中，我有一个用CSS制作的“技能进度条”列表，该列表应该使用关键帧制作动画，但动画可能无法在我的页面上看到，因为它在页面加载后立即运行

是否只有在单击“熟练程度”标题/幻灯片时，或者只有在视口中可以看到带有技能栏的容器时，才可以延迟或触发关键帧动画

我知道各种各样的技术只在页面滚动到某一点时运行动画，但在这个例子中，显然这不是我想要的

相关代码（适用于Krish）：

CSS

jQuery

$('a.proficiencies').click(function(){
  $('.skills-list').toggleClass('html5');
});

---

查看代码后，单击

a

链接，jquery

addClass

会很好地使用它

HTML结构

    <a class="proficiencies">Proficiencies(click)</a>
    <ul>
      <li><em>HTML5</em><span class="skills-expand html5anim"></span></li>
      <li><em>CSS3</em><span class="skills-expand css3anim"></span></li>
    </ul>

---

实时演示：

当元素可见时，使用javascript添加一个类。您确实希望动画在滚动到某个点时运行—当到达该部分时。在这方面有很多问题。另外，请在问题本身中包含相关代码，因为问题解决后，问题将不再显示。这是您想要的。嘿，我遵循了您的示例-它似乎在做一些事情，但有点搞砸了-请您看看这里的示例：看看我可能做错了什么？我也用相关代码更新了我的帖子。@FuManchuNZ我不知道更多。

    <a class="proficiencies">Proficiencies(click)</a>
    <ul>
      <li><em>HTML5</em><span class="skills-expand html5anim"></span></li>
      <li><em>CSS3</em><span class="skills-expand css3anim"></span></li>
    </ul>

$('a.proficiencies').click(function(){
  $('.html5anim').addClass('html5');

  $('.css3anim').addClass('css3');
});