Question 43143 in Html Question posted in
Some basic documentation can be found here.

How do I change the delay of CSS transitions? – Html

I would like to make this current CSS code transition in reverse. When I hover with the cursor off, it will start "packing up" from the last cube.

* {
  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>
Tags:

2

Answers


  1. 0

    You just need to rearrange the animation-delay values on your shorthand transition properties. See 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>
    Login or Signup to reply.
  2. 0

    You should reverse the animation-delay values (ie: the second time value of the transition property) between the regular state and the hover state :

    * {
  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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search