Can CSS' transition-delay be disabled/changed for when the transition reverses?

Question

I am currently trying to make a drop down menu of sorts. The idea is that when you hover it, the width increases and 0.5s later the height increases. However the delay also applies to the "rollback" part of the transition, ruining everything. So I was wondering if it was possible to change the delay so that height reverts before width.

CODE:

/*General NOT IMPORTANT*/

* {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  background-color: black;
}


/*dropdown menu*/

.drop-down {
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  transition-property: height, width;
  transition-duration: 500ms, 500ms;
  transition-delay: 500ms, 0ms;
}

.droplist {
  height: 50px;
  width: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border-radius: 50% 50% 10% 10%;
  transition-property: width, height, background-color;
  transition-duration: 500ms, 500ms, 0ms;
  transition-delay: 0ms, 500ms, 500ms;
}

.lidiv {
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.li:first-child {
  background-color: #6830b5;
  border-radius: 10%;
}

.li:nth-child(2) {
  margin-top: -50px;
}

.lidiv,
.li:first-child {
  transition: width 500ms, border-radius 500ms;
}

.drop-down:hover .droplist,
.drop-down:hover {
  height: 250px;
}

.drop-down:hover .droplist {
  border-radius: 4%;
  background-color: #f7f7f7;
}

.drop-down:hover .li:first-child,
.droplist {
  border-radius: 4% 4% 0 0;
}

.drop-down:hover .droplist,
.drop-down:hover .lidiv,
.drop-down:hover {
  width: 250px;
}

user_11151040 · Answer

Yes, this is possible. You just have to define the transition effects to the action that will occur.

So if it will wait 1 second on the return, you should write "transition-delay: 1s" to the class that does not contain ":hover". It looks like the opposite of the other, but that's actually true.

Example

/*General NOT IMPORTANT*/
*  {
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

body {
  background-color: black;
}

/*dropdown menu*/
.drop-down {
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    transition-property: height, width;
    transition-duration: 500ms, 500ms;
    transition-delay: 1000ms, 0ms;
}

.drop-down:hover
{
    transition-delay: 500ms, 0ms;
}

.droplist {
    height: 50px;
    width: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    border-radius: 50% 50% 10% 10%;
    transition-property: width, height, background-color;
    transition-duration: 500ms, 500ms, 0ms;
    transition-delay: 0ms, 500ms, 500ms;
}

.lidiv {
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.li:first-child  {
    background-color: #6830b5;
    border-radius: 10%;
}

.li:nth-child(2) {
    margin-top: -50px;
}

.lidiv, .li:first-child {
    transition: width 500ms, border-radius 500ms;
}

.drop-down:hover .droplist, .drop-down:hover {
    height: 250px;
}

.drop-down:hover .droplist{
    border-radius: 4%;
    background-color:#f7f7f7;
}

.drop-down:hover .li:first-child, .droplist{
    border-radius: 4% 4% 0 0;
}

.drop-down:hover .droplist, .drop-down:hover .lidiv, .drop-down:hover{
    width: 250px;
}

Can CSS' transition-delay be disabled/changed for when the transition reverses?

1 Answers