如何修改CSS过渡延迟并实现鼠标移出时反向收起过渡效果？

一、实现鼠标移开时从最后一个方块依次收起的效果 #

要实现鼠标离开.main时从最后一个方块（J）开始依次收起，需要分别给默认状态和hover状态设置反向的过渡延迟：默认状态用反向延迟（让最后一个元素先触发收起动画），hover状态保留原顺序的延迟（让第一个元素先展开）。修改后的完整代码如下：

CSS代码 #

* {
  margin: 0;
}

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

/* hover时的展开效果，保留原顺序的延迟 */
.main:hover>#t {
  padding: 20px 20px 50px 20px;
  transition-delay: 0s;
}
.main:hover>#r {
  padding: 20px 20px 75px 20px;
  transition-delay: 0.5s;
}
.main:hover>#o {
  padding: 20px 20px 100px 20px;
  transition-delay: 1s;
}
.main:hover>#c {
  padding: 20px 20px 125px 20px;
  transition-delay: 1.5s;
}
.main:hover>#h {
  padding: 20px 20px 150px 20px;
  transition-delay: 2s;
}
.main:hover>#e {
  padding: 20px 20px 175px 20px;
  transition-delay: 2.5s;
}
.main:hover>#j {
  padding: 20px 20px 200px 20px;
  transition-delay: 3s;
}

/* 默认状态的收起效果，设置反向延迟 */
#t {
  background-color: lightcoral;
  transition: padding 500ms 3s;
}
#r {
  background-color: LightSalmon;
  transition: padding 500ms 2.5s;
}
#o {
  background-color: PapayaWhip;
  transition: padding 500ms 2s;
}
#c {
  background-color: PaleGreen;
  transition: padding 500ms 1.5s;
}
#h {
  background-color: LightCyan;
  transition: padding 500ms 1s;
}
#e {
  background-color: LightSkyBlue;
  transition: padding 500ms 0.5s;
}
#j {
  background-color: MediumPurple;
  transition: padding 500ms 0s;
}

HTML代码（无需修改） #

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

二、如何修改CSS transitions的延迟参数 #

CSS transition 属性的完整语法是：

transition: [属性名] [过渡时长] [延迟时长] [过渡曲线];

其中延迟时长就是控制过渡何时开始的参数，单位可以用ms（毫秒）或s（秒），比如500ms或0.5s。

修改规则： #

• 如果要让元素更早触发过渡，就减小延迟值（比如从1s改成0.5s）；
• 如果要让元素更晚触发过渡，就增大延迟值（比如从0s改成1s）；
• 可以在不同状态（比如默认状态、:hover状态）下设置不同的延迟值，实现正反方向的过渡顺序，就像上面的代码那样。

内容的提问来源于stack exchange，提问作者Maria Gureshova