两个单独的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; 
} 

Answer 2

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

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

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