3

我有一个圣诞节标签的 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)')";
}
4

1 回答 1

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

于 2013-10-25T18:32:12.263 回答