如何否定CSS的运动

Question

如果元素的父元素对其进行过渡，我想知道如何计算或否定元素的移动。

例如，我有一个旋转木马，有以下标记：

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

然后在过渡期间，当活动从项目转换为项目时，它会添加一个左/右prev/下一个类，具体取决于下一个DIV会处于活动状态。然后删除这些类。

如果它具有这些类，它将应用CSS转换：Translatex（-100％）[或转换：Translatex（100％）]到.ITEM元素，并且其过渡持续时间为.6s，并且易于频率 - OUT选项。

现在，我想将CSS动画用于.fix-content，以使其看起来"静态"或"固定"。我该如何在动画键盘中写入？如果过渡持续时间发生了变化，可以使用什么公式来计算？

ps。我知道，我可以重新安排元素，以便可以在.Items之外放置.fix-content并为其分配一个位置：绝对属性，但让我们假装我无法做到这一点。;）

Answer 1

我不喜欢这个标记，它只是踢悬停效果（不是carroussel），但我相信是这样的。

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