css - 使用 CSS :after selector starts out hidden in CSS3 animation 放置的元素

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 重新计算过滤器，不知何故这是问题的根源。