用CSS放置元素：選擇器開始後隱藏在CSS3動畫

Question

我有一個聖誕節標籤的CSS3動畫，從瀏覽器窗口頂部下拉，暫停，然後縮回。標籤的字符串當前是通過:after CSS選擇器添加到標籤圖像的單獨圖像。

這裏是Codepen http://codepen.io/KurtWM/full/KAxpk一個例子，它被設置一遍又一遍，以排除故障運行。

十次中的九次，動畫第一次運行，字符串圖像被隱藏。它不會丟失，它只是不顯示。但是如果你對窗口做了一些改變，比如重新調整它的大小，或者右鍵單擊並選擇「Inspect Element」（如果你正在運行開發工具），字符串將會突然出現：

這裏是以字符串的頁面隱藏：

這裏的字符串出現在窗口的尺寸重新調整：

我想不通爲什麼字符串將不顯示最初。有時它會在延遲後突然顯示出來，但通常你必須以某種方式「調整」瀏覽器才能讓它顯示出來。

我可能會最終不得不手動添加一個字符串的形象，但我，爲什麼發生這種情況實在不明白。任何解決方案將不勝感激。

簡化的代碼（一些動畫步驟刪除，只使用-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)')"; 
} 

Answer 1

我認爲我已經分離出的問題涉及到動畫，僞元素和錯誤過濾。

我讓它使用這個CSS（通過動畫改變屬性）。我只顯示變化！

.swing:after { 

    -webkit-animation: shadow 0.5s infinite; 
/* 
    -webkit-filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); 
*/ 
} 

@-webkit-keyframes shadow { 
    0% { -webkit-filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));} 
    100% { -webkit-filter: drop-shadow(2px 2px 4px rgba(0, 0, 1, 0.5));} 
} 

注意，動畫是非常假的（我的意思是，它並沒有太多的動畫），但看起來像它的工作。我想這會讓Chrome重新計算過濾器，這在某種程度上是問題的根源。