同じことをしている2つの別々の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>