我如何使用CSS为使用JavaScript定位的元素设置动画？

更新：

附言：CSS在小提琴中看起来不稳定，但动画效果很好。我只是想用CSS使动作更流畅，满足使用CSS的要求

我正在为技术技能屏幕编写一个jQuery旋转木马。我都做完了，除了这一部分。我可以在正确的方向上使用提示。本质上，要求是使用CSS为图像导航设置动画。一切都是在JavaScript/jQuery中构建的。以下是事件侦听器/动画：

$('html').on('keydown', function(e) {
  if (e.keyCode === 37 || e.keyCode === 38) {
    first = $('.slider li:first').detach();
    slider.append(first);
  }
  else if (e.keyCode === 39 || e.keyCode === 40) {
    last = $('.slider li:last').detach();
    slider.prepend(last);
  }
});

我以前使用过转换，但从未将它们应用于JavaScript所做的更改。我一直在浏览说明书，但内容相当广泛。有没有可能动画这些动作，因为它们不是被视觉定位，而是在逻辑中被重新排序？如果是，请帮助我确定要设置动画的属性。我尝试使用“all”属性，但我认为它不起作用。以下是我尝试过的CSS：

.slider li {
  display: inline-block;
  transition: all 2s, height 2s, background-color 2s, transform 2s;
}

最后，以防您想看到标记：

<ul class="slider">
  <li>
    <img src="https://lg-devtest.herokuapp.com/images/box_avatar.png">
    <div class="meta">
      <h2>Title: Avatar</h2>
      <p>IMDB Rating: 5.7</p>
    </div>
  </li>
  <li>
    <img src="https://lg-devtest.herokuapp.com/images/box_quantum_of_solace.png">
    <div class="meta">
      <h2>Title: Quantum of Solace</h2>
      <p>IMDB Rating: 5.4</p>
    </div>
  </li>
  <li>
    <img src="https://lg-devtest.herokuapp.com/images/box_breaking_bad.png">
    <div class="meta">
      <h2>Title: Breaking Bad</h2>
      <p>IMDB Rating: 7.4</p>
    </div>
  </li>
  <li>
    <img src="https://lg-devtest.herokuapp.com/images/box_brick_mansions.png">
    <div class="meta">
      <h2>Title: Brick Mansions</h2>
      <p>IMDB Rating: 7.4</p>
    </div>
  </li>
  <li>
    <img src="https://lg-devtest.herokuapp.com/images/box_gangs_of_new_york.png">
    <div class="meta">
      <h2>Title: Gangs of New York</h2>
      <p>IMDB Rating: 7.4</p>
    </div>
  </li>
</ul>

标题：阿凡达
IMDB评级：5.7



标题：安慰的量子
IMDB评级：5.4



标题：打破坏习惯
IMDB评级：7.4



标题：砖砌大厦
IMDB评级：7.4



标题：纽约黑帮
IMDB评级：7.4

本质上，要求是使用CSS在图像中设置导航动画。

要准确地了解您想要的内容以及现在的情况有点困难。你能提供一份工作吗？将需要所有相关的CSS（如

ul

样式）和JS（如

滑块

对象）。您正在使用

detach

、

append

和

prepend

。这些不是CSS属性，这就是为什么没有应用转换；通常，将数字从屏幕的一部分转换为另一部分。对布局的更改并不一定总是能够顺利过渡，并且/或者显然应该如此。我有一些实验性的想法，涉及到绝对定位，从不移除移动的元素，并且由不可见的静态定位元素“创建父对象”，但这仍然是非常理论化的。代码中没有动画，所以没有任何东西可以在其上应用转换