使用Javascript更改CSS动画可见性

我一直遵循的方向从添加一些CSS动画到我的网站。它很好地组合在一起，看起来相当简单。然而，我一直有一个重大问题触发入口动画

作为一个新手，我理解这个问题可能完全是空洞的，但我在过去几天一直在玩弄它，但没有成功

要创建入口，元素的可见性最初设置为“隐藏”。然后javascript应该通过添加.pullUp类来触发动画，该类会使元素变得可见并具有动画效果。这看起来很简单，但我的所有元素在页面加载或保持不可见时就开始具有动画效果

我真的需要一些帮助。这是一个

.拉起{
动画名称：上拉；
-webkit动画名称：pullUp；
动画持续时间：1.1s；
-webkit动画持续时间：1.1s；
动画计时功能：放松；
-webkit动画计时功能：轻松输出；
变换原点：50%100%；
-ms转换来源：50%100%；
-webkit转换来源：50%100%；
可见性：可见！重要；
}
$（窗口）。滚动（函数（）{
$（'#apple'）。每个（函数（）{
var imagePos=$（this）.offset（）.top；
var topOfWindow=$（window.scrollTop（）；
如果（图像位置

基本上，我只需要我的图像成为可见和动画时，图像滚动到

---

我的站点的引导框架可能是问题的根源，但我不明白为什么会这样。另外，请知道我使用外部样式表，只是为了方便起见在这里包含了所有代码。非常感谢您提供的任何见解或帮助！

我注意到您的CSS中有浮动，您没有指定位置（即位置：相对或位置：绝对）。这对于这类事情至关重要（编辑：显然不是，如下面的答案所示）

添加位置后：相对于这些元素，它似乎可以工作，但是您可能需要修改动画，因为效果似乎非常小。

I

代码块末尾缺少了

}）；

，这就是jQuery无法工作的原因

您的图像已经添加了

pullUp

类，因此动画立即开始

---

谢谢。我已经指定了位置，动画仍在运行。不幸的是，它会在我加载页面时立即运行。当元素滚动到时，应该触发动画的javascript部分似乎不起作用。你认为这是JS代码中的某个内容吗？很有可能，尽管我只是假设。我会看看这个测试ple:试着处理这个问题。这个JavaScript代码：也做了与上面相同的事情，但是检测ie6/IE7最初我对以后添加pullUp类的想法是正确的，但是因为它不起作用（由于缺少分号）我放弃了。至少我知道我没有完全偏离正轨，但仍然是一个愚蠢的错误。我会确保下次更仔细地检查我的结束括号。再次感谢！@Nolakat如果答案令人满意，您可以单击答案左侧的箭头将其标记为correct@Zeaklous我一读到评论就试了一下，但这说明我做得太多了ng me还需要15点声望点。我想我的感激之情现在已经足够了：（@Nolakat，这是向上投票。我正在引用那些箭头下面的复选标记。这样做甚至会给你2点声望！@Zeaklous Gotcha！谢谢你的帮助！

   <img src="img/apple.png" id="apple" class="pullUp" /> 

   <script= "text/css">

.pullUp{
    animation-name: pullUp;
    -webkit-animation-name: pullUp; 

    animation-duration: 1.1s;   
    -webkit-animation-duration: 1.1s;

    animation-timing-function: ease-out;    
    -webkit-animation-timing-function: ease-out;    

    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%; 

    visibility: visible !important;             
    }
</script>

<script>

$(window).scroll(function() {
  $('#apple').each(function(){
  var imagePos = $(this).offset().top;

  var topOfWindow = $(window).scrollTop();
    if (imagePos < topOfWindow+150) {
      $(this).addClass(".pullUp");
    }
  });
</script>