兩個單獨的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>