Question

我做了什么......

我目前正在编写一个脚本，当元素进入用户视口时会对元素进行动画处理，就像WOW.js一样。

但是，我正在使用我打算制作动画的元素遇到一些奇怪的行为。它不是从关键帧的第一步开始动画，而是忽略未在原始元素上设置的任何样式。

考虑一下：

setTimeout(function() {
  $('#some_element').addClass('animated fade_in_down');
}, 500);

/* The element I intend to animate */
#some_element {
  width: 50px;
  height: 50px;
  background: #000;
  opacity: 0; /* I set the initial opacity */
  /* NOTE - I have not set transform:translateY(-20px); */
}

/* The animation classes */
.animated {
  animation-duration: 1s;
  animation-fill-mode: both /* I think this is the important part */
}

.fade_in_down {
  animation-name: fade_in_down
}

@keyframes fade_in_down {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="some_element">

我的问题......

因此，如果您运行上面的代码段，您会发现动画按预期工作。就像在，它淡入并翻译20px ......

我的问题是，在我的网站上，它忽略了transform属性，除非我在原始#some_element样式中明确设置它。

除非我执行以下操作，否则我只会看到opacity动画：

#some_element {
  width: 50px;
  height: 50px;
  background: #000;
  opacity: 0;
  transform:translateY(-20px); /* I have added the initial transform value */
}

这是为什么？为什么它在其他网站上无需设置初始transform值？任何人都可以详细说明可能造成这种情况的原因吗？

我 使用CSS缩小器 ，它会删除%规则中0之后的@keyframes符号。这可能是原因吗？剥离%符号是否无效？

不幸的是，我无法发布我的整个代码，因为这只是一个非常大的Web应用程序的片段。我希望有人可能知道发生了什么，而无需查看我的整个代码...

Answer 1

<强>原因：

问题在于你是如何编写实际CSS文件（或）中的@keyframes规则的，因为你的缩小器是如何缩小代码的。

以下是我在缩小的CSS文件中可以看到的输出CSS。正如您在@keyframes中看到的那样，%之后缺少0。百分比是强制性的，因为它不存在，UA完全忽略其下设置的属性，因此原始的负translateY永远不会应用于它。由于永远不会应用原始变换，因此它不会向下滑动而只会出现。

来自W3C Specs for Animation :(强调是我的）

请注意，必须在百分比值上使用百分比单位指示符。因此， '0'是无效的关键帧选择器 。

opacity有效，因为您.reveal-on-scroll强制要求元素opacity: 0。

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}
.fade_in_down {
  -webkit-animation-name: fade_in_down;
  animation-name: fade_in_down
}
@-webkit-keyframes fade_in_down {
  0 { /* note the missing % symbol */
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
  }
}
@keyframes fade_in_down {
  0 { /* note the missing % symbol */
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
  }
}

<强>演示：

为了证明这一点，我在下面的演示中添加了两个元素，其中一个在%规则中0之前有@keyframes的动画，而其他没有它（{{ 1}}）。其关键帧被编写为%的人将正确向下滑动而关键帧被写为0%的那个将会出现。

setTimeout(function() {
  $('#some_element').addClass('animated fade_in_down');
  $('#some_element2').addClass('animated fade_in_down2');
}, 500);

#some_element,
#some_element2 {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: #000;
  opacity: 0;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both
}
.fade_in_down {
  animation-name: fade_in_down
}
@keyframes fade_in_down {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* this is how the minified output in your CSS file is */

.fade_in_down2 {
  animation-name: fade_in_down2
}
@keyframes fade_in_down2 {
  0 {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

<强>解决方案：

如果原始CSS中缺少符号，请将其添加。如果缩小器将其删除，请查看如何避免这种情况。不幸的是，我对此并不了解。

动画忽略初始值（动画填充模式）

我做了什么......

我的问题......

1 个答案: