CSS

【CSS】素敵なページ読み込みエフェクトPage Transition Effects

March 10, 2017
Page Transition Effects

Page Transition Effectsはページトランジションエフェクトを作成するのに使用でき、すべてのアニメーションはanimations.cssファイル内に保存されています。

HTML

ページトランジションとして使用するには、必要なアニメーションクラスをbodyクラスとして使用する。

<body class="fadeIn">

CSS

各トランジションエフェクトは、animations.cssファイル内に保存されたCSSキーフレームアニメーション。

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.fadeIn {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

JavaScript

ページトランジションにはJavaScriptは必要ありませんが、サーバーの速度が遅い場合は、JavaScriptを追加し、'body:'タグを 'display:none;'を使って見えなくし、ページのロードが完了したら表示されます。

$( document ).ready(function() {
   $('body').show();
});