Element placed with CSS :after selector starts out hidden in CSS3 animation

Question

I have a CSS3 animation of a Christmas label on a string that drops down from the top of the browser window, pauses, and then retracts. The label's string is currently a separate image that is added to the label image via the :after CSS selector.

Here is an example on Codepen http://codepen.io/KurtWM/full/KAxpk that is set up to run over and over for troubleshooting purposes.

Nine times out of ten, the very first time the animation runs, the string image is hidden. It is not missing, it just does not show up. But then if you do something to the window, like re-size it, or right click and select "Inspect Element" (if you are running Developer Tools) the string will suddenly appear:

Here is the initial run of the page with the string hidden:

And here the string appears when the window is re-sized:

I cannot figure out why the string will not show up initially. Sometimes it will suddenly show up after a delay, but usually you have to "tweak" the browser in some way to get it to show up.

I will probably end up having to manually add a string image, but I am really puzzled as to why this is happening. Any solutions will be appreciated.

Simplified Code (some animation steps removed and using only -webkit- properties):

/* ************************************* */
/* 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

I think that I have isolated the problem to a bug related to the animation, the pseudo element and the filter.

I have it working with this CSS (changing a property by an animation). I am showing only the changes !

.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));}
}

Notice that the animation is pretty much a fake (I mean, it doesn't animate much), but looks like it's working. I guess that it makes Chrome recalculate the filter, that somehow was at the root of the problem.