Zwei separate CSS-Animationen, die dasselbe tun

Question

Ich richte einige vordefinierte Animationsklassen ein, um auf Scroll zu animieren. Sie alle funktionieren, außer einem, den ich slideUp genannt habe, der sich genau wie slideDown zu verhalten scheint. Die Animationen genau so aussehen wie sie klingen, und verwenden Transformationen wie folgt:

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

Es scheint, dass, egal was, ruft slideUp eine Animation erzeugt, die wie slideDown aussieht, und ich kann nicht alle Fehler in meinem Keyframes sehen, noch in der Ausführung.

Beispiel für die Ausführung:

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

Dank!

Bearbeiten: Ich änderte den Namen slideUp zu slideup und es begann zu arbeiten. Dies ist ein Projekt von Grund auf, so dass ich keine Konflikte in meinem Code garantieren kann, die das verursacht hätten. Irgendwelche Ideen?

Answer 1

Hier ist ein Beispiel, das Ihnen helfen kann. Ich habe es mit deiner Animation gemacht. Hoffe, das wird helfen. 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. Versuchen Sie folgendes:

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