Wie negiere ich eine Bewegung in CSS

Question

Ich würde gerne wissen, wie die Bewegung eines Elements zu berechnen oder zu negieren, wenn das übergeordnete Element einen Übergang hat.

Zum Beispiel habe ich ein Karussell, das die folgende Auszeichnungs hat:

<ul class="carousel" style="position:relative;"> 
<li class="item active"> 
    text content 1. Will move with the slide. 
    <div class="fixed-content"> 
    I want to remain where I am and I have the exact same content as the fixed element below 
    </div> 
<li> 
<li class="item"> 
    text content 2. Will move with the slide. 
    <div class="fixed-content"> 
    I want to remain where I am and I have the exact same content as the fixed element above 
    </div> 
<li> 
</ul> 

dann während des Übergangs, wenn aktive Schalter von Element zu Element, das eine Klasse links/rechts ergänzt prev/next, je nachdem, welches div wird als nächstes aktiv sein. entfernt dann diese Klassen danach.

Wenn es diese Klassen hat, wendet es eine CSS-Transformation an: translateX (-100%) [oder transform: translateX (100%)] in das .item-Element und hat eine Übergangsdauer von .6s und eine Leichtigkeit -Out-Option.

Jetzt möchte ich CSS-Animation zu dem .fixed-Inhalt verwenden, damit es "statisch" oder "fest" aussieht. Wie schreibe ich das in den Animations-Keyframe? und welche Formel wird verwendet, um zu berechnen, ob sich die Übergangsdauer geändert hat?

PS. Ich weiß, ich könnte die Elemente einfach neu anordnen, so dass ich .fixed-content außerhalb der .items platzieren und ihm eine Position zuweisen kann: absolute property, aber tun wir einfach so, als ob ich das nicht kann. ;)

Answer 1

Ich mag dieses Markup nicht und es ist nur ein Kick-Hover-Effekt (nicht Carroussel), aber ich glaube, dass etwas so ist.

http://codepen.io/joaosaro/pen/oLZmRr

<ul class="carousel" style="position:relative;"> 
    <div class="wrap"> 
    <li class="item one">text content 1. Will move with the slide.</li> 
    <li class="item two">text content 2. Will move with the slide.</li> 
    <div class="fixed-content">I want to remain where I am and I have the exact same content as the fixed element above</div> 
    </div> 
</ul> 


ul { 
    position: fixed; 
    margin: 50px auto; 
    width: 300px; 
    height: 300px; 
    cursor: pointer; 
} 
ul .wrap { 
    position: relative; 
    background: pink; 
    height: 100%; 
    width: 100%; 
    border: 2px solid black; 
    overflow: hidden; 
} 
ul .wrap li { 
    height: 100%; 
    width: 100%; 
    -webkit-transition: all 0.5s; 
    transition: all 0.5s; 
} 
ul .wrap li.one { 
    background-color: yellow; 
} 
ul .wrap li.two { 
    background-color: red; 
} 
ul .wrap .fixed-content { 
    position: absolute; 
    z-index: 100; 
    bottom: 0; 
    background: blue; 
} 
ul:hover .wrap li { 
    -webkit-transform: translateY(-100%); 
      transform: translateY(-100%); 
}