Javascript HTML模式弹出动画第二次不工作

我已经创建了下面的代码来显示弹出窗口，它可以很好地与我后来添加的具有弹出效果的动画配合使用。但是，如果我关闭它并尝试重新打开它，动画不会显示吗？模态立即出现。 我怎么修理它

您希望用户看到的内容放在此处

单击此处以[]
#覆盖层{
可见性：隐藏；
位置：绝对位置；
左：0px；
顶部：0px；
宽度：100%；
身高：100%；
文本对齐：居中；
z指数：1000；
}
#覆盖分区{
宽度：300px；
保证金：100像素自动；
背景色：#fff；
边框：1px实心#000；
填充：15px；
文本对齐：居中；
}
popout先生{
动画：弹出1s轻松；
-webkit动画：弹出1s轻松；
}
@关键帧弹出{
来自{transform:scale（0）}
80%{transform:scale（1.2）}
到{变换：比例（1）}
}
@-webkit关键帧弹出窗口{
来自{-webkit变换：缩放（0）}
80%{-webkit转换：比例（1.2）}
到{-webkit转换：缩放（1）}
}
函数覆盖（）{
el=document.getElementById（“覆盖”）；
el.style.visibility=（el.style.visibility=“可见”）？“隐藏”：“可见”；
}

请看这个

<div id="overlay">
  <div>
    <p>Content you want the user to see goes here.</p>
    Click here to [<a href='#' onclick='overlay()'>close</a>]
  </div>
</div>

<style>
  #overlay {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 1000;
  }

  #overlay div {
    width: 300px;
    margin: 100px auto;
    background-color: #fff;
    border: 1px solid #000;
    padding: 15px;
    text-align: center;
  }

  .popout {
    visibility: visible !important;
    animation: popout 1s ease;
    -webkit-animation: popout 1s ease;
    -moz-animation: popout 1s ease;
    -ms-animation: popout 1s ease;
  }

  @keyframes popout {
    from {
      transform: scale(0)
    }
    80% {
      transform: scale(1.2)
    }
    to {
      transform: scale(1)
    }
  }

  @-webkit-keyframes popout {
    from {
      -webkit-transform: scale(0)
    }
    80% {
      -webkit-transform: scale(1.2)
    }
    to {
      -webkit-transform: scale(1)
    }
  }

  @-moz-keyframes popout {
    from {
      -moz-transform: scale(0)
    }
    80% {
      -moz-transform: scale(1.2)
    }
    to {
      -moz-transform: scale(1)
    }
  }


  @-ms-keyframes popout {
    from {
      -ms-transform: scale(0)
    }
    80% {
      -ms-transform: scale(1.2)
    }
    to {
      -ms-transform: scale(1)
    }
  }
</style>

<script>
  function overlay() {
    el = document.getElementById("overlay");
    var clases = el.className;
    if (clases.indexOf('popout') == -1) {
      el.className = 'popout';
    } else {
      el.className = '';
    }
  }

</script>

<a href='#' onclick='overlay()'>Click here to show the overlay</a>

您希望用户看到的内容放在此处

单击此处以[]
#覆盖层{
可见性：隐藏；
位置：绝对位置；
左：0px；
顶部：0px；
宽度：100%；
身高：100%；
文本对齐：居中；
z指数：1000；
}
#覆盖分区{
宽度：300px；
保证金：100像素自动；
背景色：#fff；
边框：1px实心#000；
填充：15px；
文本对齐：居中；
}
popout先生{
可见性：可见！重要；
动画：弹出1s轻松；
-webkit动画：弹出1s轻松；
-moz动画：弹出1s轻松；
-ms动画：弹出1s轻松；
}
@关键帧弹出{
从{
变换：缩放（0）
}
80% {
变换：比例（1.2）
}
到{
变换：缩放（1）
}
}
@-webkit关键帧弹出窗口{
从{
-webkit变换：缩放（0）
}
80% {
-webkit转换：缩放（1.2）
}
到{
-webkit转换：缩放（1）
}
}
@-moz关键帧弹出{
从{
-moz变换：缩放（0）
}
80% {
-moz变换：比例（1.2）
}
到{
-moz变换：比例（1）
}
}
@-ms关键帧弹出窗口{
从{
-ms变换：缩放（0）
}
80% {
-ms变换：比例（1.2）
}
到{
-ms变换：比例（1）
}
}
函数覆盖（）{
el=document.getElementById（“覆盖”）；
var clases=el.className；
if（clases.indexOf（'popout'）=-1）{
el.className='popout'；
}否则{
el.className=''；
}
}

---

我应该注意我使用的是firefox，这段代码第一次甚至没有动画。我发布了一个错误的JSFIDLE链接，你能检查更新的吗？在Firefox对我有用，谢谢。这是有效的-有没有办法让它以与单击关闭时相同的方式淡出？你可以在关闭时添加另一个类，使用相同的动画但动画方向：反转；或者创建另一个用于关闭的动画