如何反转这些 CSS 动画的顺序？

Question

我想把这个倒过来。我的意思是，当我将光标悬停时，它将从最后一个立方体开始“打包”。但我不知道如何正确地做到这一点。现在我只是在学习 HTML 和 CSS，所以我很乐意看到如何通过一些解释来做到这一点））。它看起来仍然不错，但如果在悬停后反向过渡，那将是完美的。

* {
  margin: 0;
}

.main>div {
  font-family: "Comfortaa";
  border: none;
  margin: auto;
  padding: 25px 25px 25px 25px;
  text-align: center;
  float: left;
}

.main:hover>#t {
  padding: 20px 20px 50px 20px;
}

.main:hover>#r {
  padding: 20px 20px 75px 20px;
}

.main:hover>#o {
  padding: 20px 20px 100px 20px;
}

.main:hover>#c {
  padding: 20px 20px 125px 20px;
}

.main:hover>#h {
  padding: 20px 20px 150px 20px;
}

.main:hover>#e {
  padding: 20px 20px 175px 20px;
}

.main:hover>#j {
  padding: 20px 20px 200px 20px;
}

#t {
  background-color: lightcoral;
  transition: padding 500ms;
}

#r {
  background-color: LightSalmon;
  transition: padding 500ms 0.5s;
}

#o {
  background-color: PapayaWhip;
  transition: padding 500ms 1s;
}

#c {
  background-color: PaleGreen;
  transition: padding 500ms 1.5s;
}

#h {
  background-color: LightCyan;
  transition: padding 500ms 2s;
}

#e {
  background-color: LightSkyBlue;
  transition: padding 500ms 2.5s;
}

#j {
  background-color: MediumPurple;
  transition: padding 500ms 3s;
}

<div class="main">
  <div id="t">T</div>
  <div id="r">R</div>
  <div id="o">O</div>
  <div id="c">C</div>
  <div id="h">H</div>
  <div id="e">E</div>
  <div id="j">J</div>
</div>

Answer 1

您只需要重新排列速记

animation-delay

属性上的

transition

值。请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/transition.

.main>div {
  font-family: "Comfortaa";
  border: none;
  margin: auto;
  padding: 25px 25px 25px 25px;
  text-align: center;
  float: left;
}

.main:hover>#t {
  padding: 20px 20px 50px 20px;
}

.main:hover>#r {
  padding: 20px 20px 75px 20px;
}

.main:hover>#o {
  padding: 20px 20px 100px 20px;
}

#t {
  background-color: lightcoral;
  transition: padding 500ms 1s;
}

#r {
  background-color: LightSalmon;
  transition: padding 500ms 0.5s;
}

#o {
  background-color: PapayaWhip;
  transition: padding 500ms;
}

<div class="main">
  <div id="t">T</div>
  <div id="r">R</div>
  <div id="o">O</div>
</div>

Answer 2

你应该在常规状态和悬停状态之间反转

animation-delay

值（即：

transition

属性的第二次值）：

* {
  margin: 0;
}

.main>div {
  font-family: "Comfortaa";
  border: none;
  margin: auto;
  padding: 25px 25px 25px 25px;
  text-align: center;
  float: left;
}

.main:hover>#t {
  padding: 20px 20px 50px 20px;
  transition: 500ms;
}

.main:hover>#r {
  padding: 20px 20px 75px 20px;
  transition: 500ms 0.5s;
}

.main:hover>#o {
  padding: 20px 20px 100px 20px;
  transition: 500ms 1s;
}

.main:hover>#c {
  padding: 20px 20px 125px 20px;
  transition: 500ms 1.5s;
}

.main:hover>#h {
  padding: 20px 20px 150px 20px;
  transition: 500ms 2s;
}

.main:hover>#e {
  padding: 20px 20px 175px 20px;
  transition: 500ms 2.5s;
}

.main:hover>#j {
  padding: 20px 20px 200px 20px;
  transition: 500ms 3s;
}

#t {
  background-color: lightcoral;
  transition: 500ms 3s;
}

#r {
  background-color: LightSalmon;
  transition: 500ms 2.5s;
}

#o {
  background-color: PapayaWhip;
  transition: 500ms 2s;
}

#c {
  background-color: PaleGreen;
  transition: 500ms 1.5s;
}

#h {
  background-color: LightCyan;
  transition: 500ms 1s;
}

#e {
  background-color: LightSkyBlue;
  transition: 500ms 0.5s;
}

#j {
  background-color: MediumPurple;
  transition: 500ms;
}

<div class="main">
  <div id="t">T</div>
  <div id="r">R</div>
  <div id="o">O</div>
  <div id="c">C</div>
  <div id="h">H</div>
  <div id="e">E</div>
  <div id="j">J</div>
</div>