Как сделать div анимацией на странице загрузки?

Question

обратите внимание, как при загрузке squareup.com форма слева анимируется. Как вы делаете анимацию css3? Требуется ли javascript для добавления какой-либо разгрузки?

Благодаря

Answer 1

Чистый CSS 3 анимация будет лучший способ пойти - так как это чистый, простой и легкий.

Однако старые браузеры не поддерживают чистую анимацию CSS 3, поэтому вам может быть лучше с jQuery на данный момент (пока, возможно, больше людей не поддерживают анимацию CSS 3).

<script> 
$(function(){ 
     // make a basic fadeIn animation 
     $("#divId").fadeIn(); 
}); 
</script> 

Замените #divId на атрибут div id. Не забудьте отобразить: none; div.

Для JQuery анимации просто перейдите

Answer 2

На самом деле, после просмотра исходного кода, что эффект оказывается в основном, если не все, CSS3. Вот отрывок из CSS:

.square-signup-form h1, .square-signup-form .pricing-prop, .square-signup-form p, .square-signup-form .instructions, .square-signup-form .cards-accepted, .cardcase-signup-form h1, .cardcase-signup-form .pricing-prop, .cardcase-signup-form p, .cardcase-signup-form .instructions, .cardcase-signup-form .cards-accepted { 
     color: #fff; 
     -moz-transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98); 
     -webkit-transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98); 
     -o-transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98); 
     transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98); 
} 
.square-scene .square-signup-form { 
    -moz-transform: translate(0pt, 0pt); 
    opacity: 1; 
    z-index: 3; 
} 
.ie8 .square-scene .square-signup-form { 
    display: block; 
} 

Вы можете просмотреть полный CSS в https://d1g145x70srn7h.cloudfront.net/static/db447699c3d01e60cd9b8e1e1c721ce8837f22bd/stylesheets/home.css

Вот копия, что легче читать: http://pastebin.com/gHTn1YuA