ページ全体を下から上にフェードインさせるアニメーション設定をご紹介します。
現在の私のブログにも実装されている設定です。
完成前のイメージ
記事をクリックしても設定をしていないとこのようにフェードインしてきません。このブログは当ブログで愛用しているcocoonの公式ホームページでseasonsのスキンを設定しています。
完成後のイメージ
クリックすると記事が上から下にフェードインして来るイメージです。
カスタマイズ方法
#main{
animation: fadeIn 1s ease-out 0s 1 normal;
}
#sidebar {
animation: fadeIn 1s ease-out 0s 1 normal;
}
@keyframes fadeIn {
from {transform: translateY(10%); opacity: 0;}
100% {transform: translateY(0%); opacity: 1;}
}
#header-container {
animation: Down 1s ease-out 0s 1 normal;
}
@keyframes Down {
from {transform: translateY(-10%); opacity: 0;}
100% {transform: translateY(0%); opacity: 1;}
}
#breadcrumb {
animation: Right 1s ease-out 0s 1 normal;
}
@keyframes Right {
from {transform: translateX(10%); opacity: 0;}
100% {transform: translateX(0%); opacity: 1;}
}
