Transition / fade in effect

[phppup]

I somehow got hooked on a stylish form that was broken into stages that click thru three steps.

It uses CSS and hidden checkboxes to activate an effect that has each section transition into a visible opacity (a fade-in effect).

I was hoping to use the code as a template, but discovered that the FIRST page (which does not have an associated checkbox in the HTML) does not at any point "fade-in" (it just remains visible).

This makes the entire form seem 'clumsy' bc the effect should occur with NEXT or PREVIOUS button clicks.

I've included the pertinent code.

I'm also not sure of whether or not using CSS is the best route for this. I'm sure JavaScript can do this; is one approach better than the other?

Thanks.

input[type=checkbox] {
	position: absolute;
	opacity: 0;
}
#part1, #part2, #part3 {
	z-index: 2;
	display: block;
	height: auto;
	opacity: 1;
	transition: opacity 1s ease-in-out;
}
#part2, #part3 {
	opacity: 0;
	height: 0;
	overflow: hidden;
}
#step2:checked ~ #part2 {
	opacity: 1;
	height: auto;
}
#step2:checked ~ #part1 {
	opacity: 0;
	height: 0;
	display: none;
}
#step3:checked ~ #part3 {
	opacity: 1;
	height: auto;
}
#step3:checked ~ #part2 {
	opacity: 0;
	width: 0;
	height: 0;
}

 

 

Edited March 7 by phppup

[phppup]

RESOLVED.

I couldn't find a CSS solution to having page 1 on the form "fade in" either initially or when coming BACK from page 2.

However, I implemented a JavaScript function that is accomplishing the task.