html - css transition effects on show/hide element using css3

I have used this bunch of code, which works perfect, but I am unable to add transition when showing/hiding more content. Can somebody please tell me how can I do that? I would like to use pure CSS, no JS. Thanks all in forward!

.showMore{
  font-size: 14px;
  display:block;
  text-decoration: underline;  
  cursor: pointer;
  
}
.showMore + input{
  display:none;
}
.showMore + input + *{
  display:none;
}
.showMore + input:checked + *{
  display:block;
    
}

Heading 1
  
  
Hidden 1
  
  Heading 2
  
  
Hidden2

Live demo: http://jsbin.com/xufepopume/edit?html,css,js,output

Answer

for a transition you need 2 values (start/end) that can be divided by steps, numbers.

none and block can't and can only switch from one to another, you could eventually delay it.

A compromise could be to use max-height and set an overflow in case value is to short.

.showMore {
  font-size: 14px;
  display: block;
  text-decoration: underline;
  cursor: pointer;
}
.showMore + input {
 display:none;
}
.showMore + input + * {
 
  max-height: 0;
  /*and eventually delay an overflow:auto; */
  overflow:hidden;
  transition: max-height 0.5s, overflow 0s;
}
.showMore + input:checked + * { 
  /* here comes the compromise, set a max-height that would for your usual contents*/
   max-height: 5em;
  overflow:auto;
  transition: max-height 0.5s, overflow 0.5s 0.5s;
}

Heading 1

Hidden 1 Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1

Heading 2

Hidden2