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

Answer 2

I think your animation shorthand lists properties in the wrong order.试试这个：

＆＃13;

@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);
  }
}
.btn {
  background: green;
  color: white;
  padding: 2em;
  display: inline-block;
  animation: 600ms cubic-bezier(0.1, 0.7, 1.0, 0.1) 1 forwards slideUp;
}

＆＃13;

<div class="btn">button</div>

＆＃13;

两个单独的CSS动画做同样的事情

2 个答案: