Jquery 动画计时未正确执行

我正在建立一个小型的个人网站用于练习，我遇到了一些我无法解决的问题

我有一个div，点击翻转，展开大小并向左移动。 但有一个严重的小故障只发生在刚开始的时候，我不知道为什么

下面是代码笔。如果一切正常，请再次刷新，直到看到动画中的小故障

在codepen中时，转到完整站点视图即可查看。

这就是我有时会遇到的问题

这是我的密码

$(document).ready(function(){
$("#card").click(function(){
    var container= $("section.container");

            $("div#card").addClass("flipped").one(transitionEvent,function(event){
                container.animate({height: '100%'}).animate({marginLeft: '0',width: '300px'});;  
            });
       });
});

更新

---

我注意到它主要发生在我第一次加载页面时。如果我重新启动页面，动画将正常播放

无法再现。OS X，Chrome版本66.0.3359.117（官方版本）（64位）你没有看到这个小故障吗？没有。我更新了10次。真奇怪。我会等着看其他人是否能复制它。当你尝试使用codepen时，请转到完整的站点视图，否则你将看不到故障

    .wrapper{
  height: 100%;
  background-image: url("bcgImg.jpg");
  background-size: cover;
  display: none;

}

section.container { 
  position: relative;
  top:50%;
  transform: translateY(-50%);
  width: 40%;
  height: 200px;
  perspective: 500px;
  margin-left: -100%;
}

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;

}

#card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  backface-visibility: hidden;
  transition: 0.6s;
  height: 100%;
}

#card .front {
  border: 2px solid #ffeedd;
  text-align: center;
  background-color: rgba(85, 85, 51,0.5);
  transition: 0.8s;

}
#card .back {
  background: #ddbb33;
  transform: rotateY( 180deg );
  box-shadow: 0 0 20px black;
}

#card.flipped {
  transform: rotateY( 180deg );
}

#backOfCard.flipped{
 transform: rotateY( 0deg ); 
}

#card figure.front:hover{
    box-shadow: 10px 10px 30px black;
  transition: box-shadow 0.6s;
}

$(document).ready(function(){
$("#card").click(function(){
    var container= $("section.container");

            $("div#card").addClass("flipped").one(transitionEvent,function(event){
                container.animate({height: '100%'}).animate({marginLeft: '0',width: '300px'});;  
            });
       });
});