How to get an input set to display block to fade in with css

Question

I am stuck and have looked all over for a solution for this. On page load I have my inputs opacity: 0 and then full opacity later, but I need the inputs to display as block in order for them to go down the page instead of inline. Doing this is counteracting the fade in I have with the .block class. Is there anyway I can get the inputs to be in a block fashion and still fade in with css?

Also, is there a way in my example to get the labels/inputs to display block so that the label is over the input and they are centered on the page?

This fiddle demonstrates it best

$(function() {
  var elems = $('.intro input').on('keypress', function() {

    if ($(this).val().trim().length > 2) {
      $(this).parent().next('label').addClass('block');
    }


    $('#intro-button').toggle(
      elems.filter(function() {
        return this.value.trim() !== "";
      }).length === elems.length
    )

  });
});

.intro {
	opacity: 0;
}
.info-input {
	padding: 10px 15px;
	margin: 40px auto;
}
.intro:first-child {
	display: block;
	opacity: 1;
}
.block {
	display: block;
	visability: visible;
	opacity: 1;
   -webkit-animation: fadein 1s ease-in;
   -moz-animation: fadein 1s ease-in;
    animation: fadein 1s ease-in;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="intro">What is your name?
				<input id="name" type="text" class="info-input">
			</label>
			<label class="intro">What is your email address?
				<input id="email" type="email" class="info-input">
			</label>	
			<label class="intro">What is your title?
				<input id="title" type="text" class="info-input">
			</label>

Answer 1

Change "animation" to "transition" on ".block"

    .block {
      display: block;
      visability: visible;
      opacity: 1;
      -webkit-transition: opacity 1s ease-in;
      -moz-transition: opacity 1s ease-in;
      transition: opacity 1s ease-in;
    }

fiddle