用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重新计算过滤器，这在某种程度上是问题的根源。