css - CSS で配置された要素: CSS3 アニメーションで隠されているセレクターの開始後

Question

ブラウザー ウィンドウの上部からドロップダウンし、一時停止してから引っ込める文字列に、クリスマス ラベルの CSS3 アニメーションがあります。:afterラベルの文字列は現在、 CSS セレクターを介してラベル画像に追加される別の画像です。

これは、トラブルシューティングの目的で何度も実行するように設定された Codepen http://codepen.io/KurtWM/full/KAxpkの例です。

10 回のうち 9 回は、アニメーションが初めて実行されるときに、文字列のイメージが非表示になります。欠落しているのではなく、表示されないだけです。しかし、ウィンドウのサイズを変更したり、右クリックして [Inspect Element] を選択したり (Developer Tools を実行している場合) すると、文字列が突然表示されます。

以下は、文字列を非表示にしたページの最初の実行です。

ウィンドウのサイズを変更すると、次の文字列が表示されます。

文字列が最初に表示されない理由がわかりません。遅れて突然表示されることもありますが、通常は何らかの方法でブラウザを「微調整」して表示させる必要があります。

おそらく文字列画像を手動で追加する必要があるでしょうが、なぜこれが起こっているのか本当に困惑しています. どんな解決策も高く評価されます。

簡略化されたコード (一部のアニメーション ステップが削除され、-webkit- プロパティのみを使用):

/* ************************************* */
/* Animations
/* ************************************* */
@-webkit-keyframes fade-out {
  0% {
    opacity: 0;
    filter: alpha(Opacity=0);
  }
  40% {
    opacity: 0;
    filter: alpha(Opacity=0);
  }
  55% {
    opacity: 1;
    filter: alpha(Opacity=100);
  }
  100% {
    opacity: 1;
    filter: alpha(Opacity=100);
  }
}

@-webkit-keyframes swing {
  0% {
    -webkit-transform: rotate(0);
    -webkit-transform: translate(0, -460px);
  }
  16% {
    -webkit-transform: translate(0, 0);
  }
  92% {
    -webkit-transform: translate(0, 0);
  }
  100% {
    -webkit-transform: rotate(0);
    -webkit-transform: translate(0, -460px);
  }
}

/* ************************************* */
/* Element styles */
/* ************************************* */
#stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.swing:after {
  position: absolute;
  top: -110px;
  left: 46%;
  z-index: 20;
  content: url(http://www.johnsonferry.org/portals/0/assets/newsevents/images/CP-string.png);
  -webkit-filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
  filter: url(#drop-shadow);
  -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2, Color='rgba(0, 0, 0, 0.5)')";
  filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2, Color='rgba(0, 0, 0, 0.5)')";
}

.swing:before {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 10;
  content: url(http://www.johnsonferry.org/portals/0/assets/newsevents/images/CP-gift-label-back.png);
  -webkit-animation: fade-out 8.5s ease 5s infinite normal;
}

.swing {
  position: absolute;
  top: 100px;
  left: 50%;
  width: 250px;
  margin-left: -125px;
  -webkit-transform: translate(0, -460px);
  /* animate the swing with pendulum-style easing */
  -webkit-animation: swing 8.5s ease-in-out 5s infinite normal;
  animation: swing 8.5s ease-in-out 5s infinite normal;
  -webkit-transform-origin: 46% -110px 0;
  -webkit-transform-style: preserve-3d;
}

.shadowed {
  -webkit-filter: drop-shadow(6px 9px 4px rgba(0, 0, 0, 0.5));
  filter: url(#drop-shadow);
  -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=9, Color='rgba(0, 0, 0, 0.5)')";
  filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=9, Color='rgba(0, 0, 0, 0.5)')";
}