CODEWITHSUNDEEP
htmlcsscss-animations
Vandervals
Vandervals

Reputation: 6054

Is CSS display property animatable using keyframes?

I know I can't transition between display none and block, but I thought that I could do some kind of step animation by doing this:

li:nth-child(1) {
  -webkit-animation: winkle 1s linear;
  animation: winkle 1s linear;
}
li:nth-child(2) {
  -webkit-animation: winkle 1s linear 1s;
  animation: winkle 1s linear 1s;
}
li:nth-child(3) {
  -webkit-animation: winkle 1s linear 2s;
  animation: winkle 1s linear 2s;
}
li:nth-child(4) {
  -webkit-animation: winkle 1s linear 3s;
  animation: winkle 1s linear 3s;
}
li:nth-child(5) {
  -webkit-animation: winkle 1s linear 4s;
  animation: winkle 1s linear 4s;
}
@-webkit-keyframes winkle {
  0%, 100% {
    display: none;
  }
  1%,
  99% {
    display: block
  }
}
@keyframes winkle {
  0%, 100% {
    display: none;
  }
  1%,
  99% {
    display: block
  }
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

But actually this is not working. Can you confirm this is not possible? Is there any other solution? I thought of this but it doesn't work either. If you can come up with something better, it would be greatly appreciated.

li:nth-child(1) {
  -webkit-animation: winkle 1s linear;
  animation: winkle 1s linear;
}
li:nth-child(2) {
  -webkit-animation: winkle 1s linear 1s;
  animation: winkle 1s linear 1s;
}
li:nth-child(3) {
  -webkit-animation: winkle 1s linear 2s;
  animation: winkle 1s linear 2s;
}
li:nth-child(4) {
  -webkit-animation: winkle 1s linear 3s;
  animation: winkle 1s linear 3s;
}
li:nth-child(5) {
  -webkit-animation: winkle 1s linear 4s;
  animation: winkle 1s linear 4s;
}
li {
  overflow: hidden;
}
@-webkit-keyframes winkle {
  0%, 100% {
    height: 0;
    color: red;
  }
  1%,
  99% {
    height: auto;
    color: blue;
  }
}
@keyframes winkle {
  0%, 100% {
    height: 0;
    color: red;
  }
  1%,
  99% {
    height: auto;
    color: blue;
  }
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Upvotes: 0

Views: 645

Answers (3)

leuquim
leuquim

Reputation: 655

CSS animations and transitions work by creating steps between two numeric values, for example:

height: 0px -> height: 100px;

In this case, given the amount of steps and timing, the browser can calculate a transition between both values. It comes down to math.

On the other hand, non numeric CSS properties only have 2 possible states (on / off), and therefore can't have any "inbetween" steps:

display: none -> display: block;

All CSS propeties can be used in an animation or transition, just take into account if that value can take progressive steps between two values.

Upvotes: 0

T&#250;lio Castro
T&#250;lio Castro

Reputation: 1323

That's right, you can't animate something that not exists anymore. So you have to use another way to hide this element, like height or opacity, look this eg to see the differences:

Winkle with Height

This example winkle the li but the list will move because the height changes.

li:nth-child(1) {
  -webkit-animation: winkle 1s linear;
  animation: winkle 1s linear;
}
li:nth-child(2) {
  -webkit-animation: winkle 1s linear 1s;
  animation: winkle 1s linear 1s;
}
li:nth-child(3) {
  -webkit-animation: winkle 1s linear 2s;
  animation: winkle 1s linear 2s;
}
li:nth-child(4) {
  -webkit-animation: winkle 1s linear 3s;
  animation: winkle 1s linear 3s;
}
li:nth-child(5) {
  -webkit-animation: winkle 1s linear 4s;
  animation: winkle 1s linear 4s;
}
@-webkit-keyframes winkle {
  0%, 100% {
    height:0;
  }
  1%,
  99% {
    height:20px;
  }
}
@keyframes winkle {
  0%, 100% {
    height:0;
  }
  1%,
  99% {
    height:20px;
  }
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Winkle with Opacity

This example winkle the li but the list mantain the original height.

li:nth-child(1) {
  -webkit-animation: winkle 1s linear;
  animation: winkle 1s linear;
}
li:nth-child(2) {
  -webkit-animation: winkle 1s linear 1s;
  animation: winkle 1s linear 1s;
}
li:nth-child(3) {
  -webkit-animation: winkle 1s linear 2s;
  animation: winkle 1s linear 2s;
}
li:nth-child(4) {
  -webkit-animation: winkle 1s linear 3s;
  animation: winkle 1s linear 3s;
}
li:nth-child(5) {
  -webkit-animation: winkle 1s linear 4s;
  animation: winkle 1s linear 4s;
}
@-webkit-keyframes winkle {
  0%, 100% {
    opacity:0;
  }
  1%,
  99% {
    opacity:1;
  }
}
@keyframes winkle {
  0%, 100% {
    opacity:0;
  }
  1%,
  99% {
    opacity:1;
  }
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Upvotes: 2

Quentin
Quentin

Reputation: 943661

No, it isn't.

Properties which are not animatable are not animatable period.

There is no state between display: none and display: block (as there is between height: 0 and height: 500px) so you can't animate between them.

Upvotes: 0

Related Questions