Добавить эффект перехода, когда элемент станет видимым?

Question

Я несколько полей ввода, скрытые в моем HTML, как это:

<input type="text" class="hidden" /> 
<button class="hidden">click me!</button> 

Повсеместно JQuery отобразить такие элементы управления таким образом:

$('input').removeClass('hidden'); 

Это работает очень хорошо, но я хочу добавить замирание когда элемент становится видимым. Возможно ли это сделать через css? Так автоматически, когда элемент виден, появляется эффект затухания?

Answer 1

$('#show').click(function(){ 
 
    $('.hidden').fadeIn(1000).removeClass('hidden'); 
 
})

.hidden{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="hidden" /> 
 
<button class="hidden">click me!</button> 
 

 
<button id='show'>CLICK TO SHOW</button>