css - 两个独立的 CSS 动画做同样的事情

Question

我正在设置一些预定义的动画类以在滚动时设置动画。它们都可以工作，除了我称为 slideUp 的一个，它的行为似乎与 slideDown 完全一样。动画看起来和听起来一模一样，并且正在使用这样的变换:

@keyframes slideUp {
  from {
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
  }
  to {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes slideDown {
  from {
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

似乎无论如何，调用 slideUp 都会生成一个看起来像 slideDown 的动画，而且我在关键帧和执行过程中都看不到任何错误。

执行示例:

animation: slideUp 600ms $transition-ease-in 1 forwards, fadeIn 500ms linear 1 forwards;

谢谢!

编辑:我将名称 slideUp 更改为 slideup 并且它开始工作了。这是一个从头开始的元素，所以我可以保证我的代码中不会出现冲突。有什么想法吗？

Answer 1

这是一个可能对您有所帮助的示例。我用你的动画做到了。希望这会有所帮助。 https://jsfiddle.net/ssr3axtr/2/

HTML :

<div class="box box--1">

</div>

<div class="box box--2">

</div>

CSS:

@keyframes slideUp {
  from {
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
  }
  to {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes slideDown {
  from {
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.box{
  display:inline-block;
  width:50px;
  height:50px;
  background:blue;
  transform:translateY(0);
}

.box--1{
   animation: slideUp 1s linear 0s infinite forwards;
}

.box--2{
   animation: slideDown 1s linear 0s infinite forwards;
}