Как это тело fadeIn анимация сделано?

Question

Я обнаружил «http://thegoodman.cc/». Это абсолютно потрясающий сайт.

Я просто действительно очень любопытно, о том, как тело этого документа немного утрачен в и слайд вверх на этой странице:

http://thegoodman.cc/about/

Answer 1

Это делается с помощью CSS анимации. При взгляде на the source, вы найдете эту строку кода:

.sup { 
    animation:sup 1.8s backwards; 
} 
@keyframes sup { 
    0% { 
     opacity:0; 
     transform:translateY(50px); 
    } 
    30% { 
     opacity:0; 
    } 
    100% { 
     opacity:1; 
     transform:translateY(0); 
    } 
} 

Это будет затухать в тексте (с помощью opacity) и переместить его вверх с помощью translateY.

JSFiddle example.

Обратите внимание, что не использует в Prefix Free библиотеку JS для предотвращения того, чтобы добавить префиксы -webkit-, -moz- и т.д.