CSS3 transition max-height : 0 to max-height : 99999px

Question

Hello

I am trying to make a according tabs with pure css3 , I know that transition doesn't work with height : 0 to height : auto so im trying with max-height : 0 to max-height : 99999px . but I dont know why isn't work.

JSFiddle

Answer 1

Try this one.

You have to target a property. If you use the word all, you target all properties. Read about it on MDN.

div {
    transition: <property> <duration> <timing-function> <delay>;
}

Example :

.ac-container article {
  -webkit-transition: 5s all;
  -moz-transition: 5s  all;
  -o-transition: 5s all;
  -ms-transition: 5s all;
  transition: 5s all;
}

Another error, you forget a ; at :

.ac-container input:checked ~ article{
    max-height:999999px !important /* ; */
}

last thing,

If you use a big value (like 999999px) and a small transition (like 0.5s), the transition could work but you could not see it.

By the way, you dont need the keyword !importanthere.