BLOG ブログ

ホームページ制作
BLOG
動きをつけてワンランクアップ！ページ遷移アニメーションまとめ【デモ付き】

動きをつけてワンランクアップ！ページ遷移アニメーションまとめ【デモ付き】

更新日：2022/12/02

ページ遷移アニメーションとは、ホームページを訪れた時やページを移動した時などの、ページが切り替わるタイミングに付けるアニメーション演出のことです。
移動という単調な動きにスライドやフェードなどのアクセントをつけることで、Webサイトならではのリッチな表現を楽しむことができます。

例えば、以下のようなものを作ることが出来ます。
【デモ】上から下へ背景色が移動する

Webサイトを作成していく中で、「もう少し動きが欲しいな…」と感じることがありませんか？
スクロールしたら要素がふわっと表示されたり、背景に図形がふわふわと舞っているような動きがありますが、デザインによっては実装が難しい場合があります。
例えば、「ニューモーフィズム」で作成されているデザインのWebサイトに動きを付けてしまうとその良さが消えてしまうことがありますよね。

しかし、ページ遷移ならばデザインに左右されることなく、実装することが出来ます。またページ遷移にアニメーションを付けることでWebサイトのクオリティを上げることが出来ます。
本記事では初級・中級・上級編と三段階の難易度に分けてデモをご紹介していきますので、ぜひご覧ください。

1 【準備】HTML・CSS・jQueryを用意
2 【初級編】シンプルなページ遷移アニメーション
3 【中級編】ワンポイント加えておしゃれなページ遷移アニメーション
4 【上級編】完全に自由なアニメーションを作れるページ遷移アニメーション
- 4.1 Lottieを使って特殊型ページ遷移アニメーション
5 ページ遷移前にもアニメーションを付けるやり方
6 まとめ
7 参考サイト

【準備】HTML・CSS・jQueryを用意

まず、基本となるHTML・CSS・jQueryを用意します。
今回は、初級・中級・上級と三段階に分けてご紹介するので、違いが分かりやすいように色分けをしています。

HTML

トップページ風に調整します。
.animation-bgはページ遷移に使用する要素です。

ソースの表示


<html>
<head>
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
  <title>ページ遷移アニメーション</title>
  <link href="../css/style.css" rel="stylesheet" media="all">

</head>
<body class="move">
  <div class="animation-bg"></div>

  <div class="content">
    <header>
      <div class="black-bg"></div>
      <div class="c-header">
        <div class="inner-block">
          <div class="logo">
            LOGO
          </div>
          <button type="button" class="c-menu-btn">
            <span class="inn">
              <span class="line"></span>
              <span class="line"></span>
              <span class="line"></span>
            </span>
          </button>
          <nav class="c-menu">
            <ul>
              <li><a href="">TOP</a></li>
              <li><a href="">ABOUT</a></li>
              <li><a href="">PRODUCT</a></li>
              <li><a href="">NEWS</a></li>
              <li><a href="">BLOG</a></li>
              <li><a href="">CONTACT</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </header>
    <div class="mv-section">
      <div class="mv-img">
        <img src="../img/mv-img.jpg" alt="">
        <span class="mv-text">
          ページ遷移アニメーション
        </span>
      </div>
    </div>
  </div>

  <script src="../js/jquery-3.6.0.min.js"></script>
  <script src="../js/common.js"></script>

</body>
</html>

<html>

<head>

<title>ページ遷移アニメーション</title>

</head>

LOGO

</div>

</span>

</button>

<ul>

<li><a href="">ABOUT</a></li>

<li><a href="">PRODUCT</a></li>

<li><a href="">CONTACT</a></li>

</ul>

</nav>

</div>

</header>

ページ遷移アニメーション

</span>

</div>

</body>

</html>

CSS

※必要な部分だけ記載しています。

ソースの表示


/* ↓ 共通の記述 */
/* 全体 */
.content {
  opacity: 0;
  pointer-events: none;
}
body.appear .content {
  animation-name: PageAnime-content;
  animation-duration: 0.55s;
  animation-delay: 0.55s;
  animation-fill-mode: forwards;
  opacity: 0;
  pointer-events: auto;
}
.animation .content {
  opacity: 1;
  pointer-events: auto;
}
@keyframes PageAnime-content {
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}


/* ヘッダー */
.c-header {
  height: 100px;
}
.c-header {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.c-header .logo {
  color: #75bec2;
  font-size: 50px;
  font-weight: bold;
}
.c-header .logo.level02 {
  color: #ff97bd;
}
.c-header .logo.level03 {
  color: #77ebda;
}
.c-menu ul {
  display: flex;
}
.c-menu li {
  margin-left: 40px;
}
.c-menu li a {
  font-size: 18px;
  font-weight: 500;
  position: relative;
  transition: 0.2s ease-in-out;
}
.c-menu li a::before {
  background: transparent;
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  position: absolute;
  bottom: -3px;
  left: 0;
  transition: 0.2s ease-in-out;
}
@media screen and (min-width:762px) {
  .c-menu li a:hover {
    color: #75bec2;
  }
  .c-menu li a:hover::before {
    background: #75bec2;
    transition: 0.2s ease-in-out;
  }
  .c-menu.level02 li a:hover {
    color: #ff97bd;
  }
  .c-menu.level02 li a:hover::before {
    background: #ff97bd;
    transition: 0.2s ease-in-out;
  }
  .c-menu.level03 li a:hover {
    color: #77ebda;
  }
  .c-menu.level03 li a:hover::before {
    background: #77ebda;
    transition: 0.2s ease-in-out;
  }
}
@media screen and (min-width:926px) {
  .c-menu-btn {
    display: none;
  }
}
@media screen and (max-width:925px) {
  .c-header {
    height: 70px;
  }
  .c-header .logo {
    font-size: 30px;
  }
  .c-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: .3s ease-in-out;
    transform: translateY(-70px);
    z-index: 999;
  }
  .c-menu ul {
    display: block;
    width: 100%;
  }
  .c-menu li {
    background: #fff;
    margin-left: 0;
  }
  .c-menu li a {
    display: block;
    padding: 15px 30px;
  }
  .c-menu li + li {
    border-top: 1px solid #ddd;
  }
  .c-menu li a {
    font-size: 16px;
  }
  .c-menu.is-open {
    opacity: 1;
    display: block;
    transform: translateY(70px);
  }
  .c-menu li a:hover {
    color: #333;
  }
  .c-menu li a:hover::before {
    content: none;
  }
  .c-menu.level02 li a:hover {
    color: #333;
  }
  .c-menu.level02 li a:hover::before {
    content: none;
  }
}

.c-menu-btn {
  cursor: pointer;
  width: 30px;
  height: 22px;
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0;
  margin: auto;
  z-index: 999;
}
.c-menu-btn .inn {
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.c-menu-btn .inn .line {
  position: absolute;
  display: inline-block;
  background-color: #333;
  height: 2px;
  left: 0;
  width: 100%;
  transition: 0.3s;
}
.c-menu-btn .inn .line:nth-of-type(1) {
  top: 0;
}
.c-menu-btn .inn .line:nth-of-type(2) {
  top: 10px;
}
.c-menu-btn .inn .line:nth-of-type(3) {
  top: 20px;
}

.c-menu-btn.is-open .inn .line:nth-of-type(1) {
  top: 45%;
  transform: rotate(45deg);
}
.c-menu-btn.is-open .inn .line:nth-of-type(2) {
  opacity: 0;
}
.c-menu-btn.is-open .inn .line:nth-of-type(3) {
  top: 45%;
  transform: rotate(-45deg);
  bottom: auto;
}

.black-bg {
  position: fixed;
  left: 0;
  top: 70px;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
  transition: all .6s;
  cursor: pointer;
}
.black-bg.is-open {
  display: block;
}

/* メインビジュアル */
.mv-section {
  text-align: center;
}
.mv-img {
  position: relative;
}
.mv-text {
  color: #fff;
  font-size: 42px;
  font-weight: bold;
  position: absolute;
  top: 40px;
  left: 110px;
  text-align: left;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width:925px) {
  .mv-text {
    font-size: 5.625vw;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

/* ↓ 共通の記述 */

/* 全体 */

.content {

opacity: 0;

pointer-events: none;

}

body.appear .content {

animation-name: PageAnime-content;

animation-duration: 0.55s;

animation-delay: 0.55s;

animation-fill-mode: forwards;

opacity: 0;

pointer-events: auto;

}

.animation .content {

opacity: 1;

pointer-events: auto;

}

@keyframes PageAnime-content {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

/* ヘッダー */

.c-header {

height: 100px;

}

.c-header {

height: 100%;

display: flex;

flex-wrap: wrap;

justify-content: space-between;

align-items: center;

position: relative;

}

.c-header .logo {

color: #75bec2;

font-size: 50px;

font-weight: bold;

}

.c-header .logo.level02 {

color: #ff97bd;

}

.c-header .logo.level03 {

color: #77ebda;

}

.c-menu ul {

display: flex;

}

.c-menu li {

margin-left: 40px;

}

.c-menu li a {

font-size: 18px;

font-weight: 500;

position: relative;

transition: 0.2s ease-in-out;

}

.c-menu li a::before {

background: transparent;

content: "";

display: block;

height: 2px;

width: 100%;

position: absolute;

bottom: -3px;

left: 0;

transition: 0.2s ease-in-out;

}

@media screen and (min-width:762px) {

.c-menu li a:hover {

color: #75bec2;

}

.c-menu li a:hover::before {

background: #75bec2;

transition: 0.2s ease-in-out;

}

.c-menu.level02 li a:hover {

color: #ff97bd;

}

.c-menu.level02 li a:hover::before {

background: #ff97bd;

transition: 0.2s ease-in-out;

}

.c-menu.level03 li a:hover {

color: #77ebda;

}

.c-menu.level03 li a:hover::before {

background: #77ebda;

transition: 0.2s ease-in-out;

}

@media screen and (min-width:926px) {

.c-menu-btn {

display: none;

}

@media screen and (max-width:925px) {

.c-header {

height: 70px;

}

.c-header .logo {

font-size: 30px;

}

.c-menu {

display: none;

position: absolute;

top: 0;

left: 0;

width: 100%;

opacity: 0;

transition: .3s ease-in-out;

transform: translateY(-70px);

z-index: 999;

}

.c-menu ul {

display: block;

width: 100%;

}

.c-menu li {

background: #fff;

margin-left: 0;

}

.c-menu li a {

display: block;

padding: 15px 30px;

}

.c-menu li + li {

border-top: 1px solid #ddd;

}

.c-menu li a {

font-size: 16px;

}

.c-menu.is-open {

opacity: 1;

display: block;

transform: translateY(70px);

}

.c-menu li a:hover {

color: #333;

}

.c-menu li a:hover::before {

content: none;

}

.c-menu.level02 li a:hover {

color: #333;

}

.c-menu.level02 li a:hover::before {

content: none;

}

.c-menu-btn {

cursor: pointer;

width: 30px;

height: 22px;

position: absolute;

top: 0;

right: 20px;

bottom: 0;

margin: auto;

z-index: 999;

}

.c-menu-btn .inn {

margin: auto;

position: absolute;

top: 0;

bottom: 0;

right: 0;

left: 0;

}

.c-menu-btn .inn .line {

position: absolute;

display: inline-block;

background-color: #333;

height: 2px;

left: 0;

width: 100%;

transition: 0.3s;

}

.c-menu-btn .inn .line:nth-of-type(1) {

top: 0;

}

.c-menu-btn .inn .line:nth-of-type(2) {

top: 10px;

}

.c-menu-btn .inn .line:nth-of-type(3) {

top: 20px;

}

.c-menu-btn.is-open .inn .line:nth-of-type(1) {

top: 45%;

transform: rotate(45deg);

}

.c-menu-btn.is-open .inn .line:nth-of-type(2) {

opacity: 0;

}

.c-menu-btn.is-open .inn .line:nth-of-type(3) {

top: 45%;

transform: rotate(-45deg);

bottom: auto;

}

.black-bg {

position: fixed;

left: 0;

top: 70px;

width: 100vw;

height: 100vh;

z-index: 100;

background-color: rgba(0, 0, 0, 0.4);

display: none;

transition: all .6s;

cursor: pointer;

}

.black-bg.is-open {

display: block;

}

/* メインビジュアル */

.mv-section {

text-align: center;

}

.mv-img {

position: relative;

}

.mv-text {

color: #fff;

font-size: 42px;

font-weight: bold;

position: absolute;

top: 40px;

left: 110px;

text-align: left;

text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);

}

@media screen and (max-width:925px) {

.mv-text {

font-size: 5.625vw;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

display: flex;

align-items: center;

justify-content: center;

}

@keyframes PageAnime-content の部分でフェードインのアニメーションを作成しています。
初期状態では .content を opacity: 0 にしておき、ページ読み込みが完了して body に .appear というクラス名がついたら、 PageAnime-content を適用させて opacity: 1 にする、という形です。

jQuery

ソースの表示


(function ($) {
  'use strict';
  $(window).on('load',function(){
    $('body').addClass('appear');
   });
   // バーガーメニューの開閉
     $('.c-menu-btn').click(function(){
    $(this).toggleClass('is-open');
    $(this).siblings('.c-menu').toggleClass('is-open');
    $('.black-bg').toggleClass('is-open');
  });
})(jQuery);

(function ($) {

'use strict';

$(window).on('load',function(){

$('body').addClass('appear');

});

// バーガーメニューの開閉

$('.c-menu-btn').click(function(){

$(this).toggleClass('is-open');

$(this).siblings('.c-menu').toggleClass('is-open');

$('.black-bg').toggleClass('is-open');

});

})(jQuery);

ページが読み込まれたら（$(window).on(‘load’）、body に .appear というクラス名を追加します。
それをトリガーとしてアニメーションが走る形になります。

これで準備完了です。
ここまでで以下のようになります。
「PageAnime-content」のフェードインアニメーションだけが適用されている状態です。
【デモ】ページ遷移アニメーション下準備
次からページ遷移アニメーションを紹介していきます。

【初級編】シンプルなページ遷移アニメーション

まず初めに、シンプルなページ遷移アニメーションからご紹介いたします。

フェードイン・フェードアウト

ふわっと消えたり、出てきたりするページ遷移アニメーションです。

「.fade」をbodyに追加し、「.animation-bg」にアニメーションを設定します。
まず、デモはこちらになります。
【デモ】フェードアウト・イン

キーフレームはこちらです。

　
.fade .animation-bg {
  background: #75bec2;
  content: "";
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  animation-name: PageAnime-fade;
  animation-duration: 0.3s;
  animation-delay: 0.8s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  pointer-events: none;
}

@keyframes PageAnime-fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

.fade .animation-bg {

background: #75bec2;

content: "";

position: fixed;

z-index: 999;

top: 0;

left: 0;

width: 100%;

height: 100vh;

animation-name: PageAnime-fade;

animation-duration: 0.3s;

animation-delay: 0.8s;

animation-timing-function: ease-in-out;

animation-fill-mode: forwards;

pointer-events: none;

}

@keyframes PageAnime-fade {

0% {

opacity: 1;

}

100% {

opacity: 0;

display: none;

}

100%になるにつれて透明度が0になるように、opacityを指定します。
透明度を下げて非表示にしているだけなのでdisplay: noneを追加しないとクリックなどが効かなくなってしまうので、追加します。

背景色が動く

背景色が動くページ遷移アニメーションはスタンダードな形と言えますね。
本記事では動く方向別に全8種類のデモをご用意しました。

上から下へ・下から上へ
左から右へ・右から左へ
左上から右下へ・右下から左上へ
右上から左下へ・左下から右上へ

HTML

基本的な記述は同じです。
今回は、分かりやすいようにそれぞれにクラスをつけていますが、実際に使うときは、環境にあった書き方で大丈夫です。

ソースの表示


<html>
<head>
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
  <title>背景色が動く | ページ遷移アニメーション</title>
  <link href="../css/style.css" rel="stylesheet" media="all">

</head>
<body class="move"> // .move以外にもそれぞれに対応したクラスを追加する
  <div class="animation-bg"></div>

  <div class="content">
    <header>
      <div class="black-bg"></div>
      <div class="c-header">
        <div class="inner-block">
          <div class="logo">
            LOGO
          </div>
          <button type="button" class="c-menu-btn">
            <span class="inn">
              <span class="line"></span>
              <span class="line"></span>
              <span class="line"></span>
            </span>
          </button>
          <nav class="c-menu">
            <ul>
              <li>
                <a href="">
                  TOP
                </a>
              </li>
              <li>
                <a href="">
                  ABOUT
                </a>
              </li>
              <li>
                <a href="">
                  PRODUCT
                </a>
              </li>
              <li>
                <a href="">
                  NEWS
                </a>
              </li>
              <li>
                <a href="">
                  BLOG
                </a>
              </li>
              <li>
                <a href="">
                  CONTACT
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </header>
    <div class="mv-section">
      <div class="mv-img">
        <img src="../img/mv-img.jpg" alt="">
        <span class="mv-text">
          上から下へ背景色が動く<br>ページ遷移アニメーション
        </span>
      </div>
    </div>
  </div>

  <script src="../js/jquery-3.6.0.min.js"></script>
  <script src="../js/common.js"></script>

</body>
</html>

<html>

<head>

<title>背景色が動く | ページ遷移アニメーション</title>

</head>

<body class="move"> // .move以外にもそれぞれに対応したクラスを追加する

LOGO

</div>

</span>

</button>

<ul>

<li>

TOP

</a>

</li>

<li>

ABOUT

</a>

</li>

<li>

PRODUCT

</a>

</li>

<li>

NEWS

</a>

</li>

<li>

BLOG

</a>

</li>

<li>

CONTACT

</a>

</li>

</ul>

</nav>

</div>

</header>

上から下へ背景色が動く<br>ページ遷移アニメーション

</span>

</div>

</body>

</html>

CSS

画面いっぱいにanimation-bgを広げ、背景色を指定します。
あとで個別に指定する animation-name を除き、それ以外の共通のアニメーションを指定しておきます。
今回は、アニメーションが完了するまでに1秒かかり、最後のキーフレーム（100%）のスタイルが適用される形です。
※animation-durationの時間は環境に合わせて適宜変更してください。

ソースの表示


.move .animation-bg {
  background: #75bec2;
  display: block;
  content: "";
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.move .animation-bg {

background: #75bec2;

display: block;

content: "";

position: fixed;

z-index: 999;

width: 100%;

height: 100vh;

top: 0;

left: 0;

animation-duration: 1s;

animation-timing-function: ease-in-out;

animation-fill-mode: forwards;

}

上から下へ・下から上へ

まず、デモはこちらになります。
【デモ】上から下へ
 【デモ】下から上へ
それぞれのキーフレームはこちらです。
※追記部分だけ記載しています。

上から下へ

「.ttb（top to bottom）」をbodyに追加し、それぞれの「.animation-bg」にアニメーションを設定します。


.ttb .animation-bg {
  animation-name: PageAnime-ttb;
}
@keyframes PageAnime-ttb {
  0% {
    transform-origin: top;
    transform: scaleY(0);
  }
  50% {
    transform-origin: top;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: bottom;
  }
  100% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
}

.ttb .animation-bg {

animation-name: PageAnime-ttb;

}

@keyframes PageAnime-ttb {

0% {

transform-origin: top;

transform: scaleY(0);

}

50% {

transform-origin: top;

transform: scaleY(1);

}

50.001% {

transform-origin: bottom;

}

100% {

transform-origin: bottom;

transform: scaleY(0);

}

使用するプロパティは以下です。

transform-origin
要素の中心位置（アニメーションの開始位置）を指定します。
left・rightでx座標、top・bottomでy座標の指定です。
transform
要素をどのように変形するのかを指定します。
今回「背景色が動く」で使用するのは、translate・scale・skewです。

今回は上から下に向かって動くので、位置は0%の時はtopと設定し、100%の時はbottomと設定します。
動く方向は縦（y座標）なので、scaleYを指定して上から下に向かって変形するように0%と100%の時はscaleY(0)を指定します。
50%にtransform:scaleY(1)と指定して、背景色が動いて消えるような挙動にします。
50%の時に背景色を表示させて、50.001%で位置をbottomに切り替え、100%になるにつれて消えていくという動きです。

下から上へ

「.btt（bottom to top）」をbodyに追加し、それぞれの「.animation-bg」にアニメーションを設定します。


.btt .animation-bg {
  animation-name: PageAnime-btt;
}
@keyframes PageAnime-btt {
  0% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
  50% {
    transform-origin: bottom;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: top;
  }
  100% {
    transform-origin: top;
    transform: scaleY(0);
  }
}

.btt .animation-bg {

animation-name: PageAnime-btt;

}

@keyframes PageAnime-btt {

0% {

transform-origin: bottom;

transform: scaleY(0);

}

50% {

transform-origin: bottom;

transform: scaleY(1);

}

50.001% {

transform-origin: top;

}

100% {

transform-origin: top;

transform: scaleY(0);

}

こちらは「上から下へ」の方向を逆にしただけです。
「下から上へ」なのでtransform-originの設定を逆にするだけです。
0%・50％の時はbottomと設定し、50.001％・100%の時はtopと設定します。

左から右へ・右から左へ

まず、デモはこちらになります。
【デモ】左から右へ
 【デモ】右から左へ
それぞれのキーフレームはこちらです。
※追記部分だけ記載しています。

左から右へ

「.ltr（left to right）」をbodyに追加し、それぞれの「.animation-bg」にアニメーションを設定します。


.ltr .animation-bg {
  animation-name: PageAnime-ltr;
}
@keyframes PageAnime-ltr {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}

.ltr .animation-bg {

animation-name: PageAnime-ltr;

}

@keyframes PageAnime-ltr {

0% {

transform-origin: left;

transform: scaleX(0);

}

50% {

transform-origin: left;

transform: scaleX(1);

}

50.001% {

transform-origin: right;

}

100% {

transform-origin: right;

transform: scaleX(0);

}

先程紹介した「上から下へ・下から上へ」は縦の動きでしたが、こちらは「左から右へ」なので動く方向は横（x座標）です。
transform-originでは、leftもしくはrightを指定し、transformではscaleXを指定します。
左から開始するので、transform-originは、0%の時はleftを指定し、100%の時はrightを指定します。
横移動なので、transformは0%の時はscaleX(0)を指定し、100%の時はscaleX(1)を指定します。

右から左へ

「.rtl（right to left）」をbodyに追加し、それぞれの「.animation-bg」にアニメーションを設定します。


.rtl .animation-bg {
  animation-name: PageAnime-rtl;
}
@keyframes PageAnime-rtl {
  0% {
    transform-origin: right;
    transform: scaleX(0);
  }
  50% {
    transform-origin: right;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: left;
  }
  100% {
    transform-origin: left;
    transform: scaleX(0);
  }
}

.rtl .animation-bg {

animation-name: PageAnime-rtl;

}

@keyframes PageAnime-rtl {

0% {

transform-origin: right;

transform: scaleX(0);

}

50% {

transform-origin: right;

transform: scaleX(1);

}

50.001% {

transform-origin: left;

}

100% {

transform-origin: left;

transform: scaleX(0);

}

「左から右へ」の開始位置を逆にしただけです。
「右から左へ」なので、transform-originの設定を0%・50％の時はrightと設定し、50.001％・100%の時はleftと設定します。

左上から右下へ・右下から左上へ

まず、デモはこちらになります。
左上から右下へ
 右下から左上へ
それぞれのキーフレームはこちらです。
※追記部分だけ記載しています。

左上から右下へ

「.top」と「.ltr」をbodyに追加し、それぞれの「.animation-bg」にアニメーションを設定します。

　
.top.ltr .animation-bg {
  animation-name: PageAnime-top-ltr;
  animation-duration: 1.5s;
}
@keyframes PageAnime-top-ltr {
  0% {
    transform-origin: center left;
    transform: scale(2,2) translateX(-300%) skewX(-45deg);
  }
  50% {
    transform-origin: center left;
    transform: scale(2,2) translateX(-17%) skewX(-45deg);
  }
  50.001% {
    transform-origin: center left;
    transform: scale(2,2) translateX(-17%) skewX(-45deg);
  }
  100% {
    transform-origin: center left;
    transform: scale(2,2) translateX(500%) skewX(-45deg);
  }
}

.top.ltr .animation-bg {

animation-name: PageAnime-top-ltr;

animation-duration: 1.5s;

}

@keyframes PageAnime-top-ltr {

0% {

transform-origin: center left;

transform: scale(2,2) translateX(-300%) skewX(-45deg);

}

50% {

transform-origin: center left;

transform: scale(2,2) translateX(-17%) skewX(-45deg);

}

50.001% {

transform-origin: center left;

transform: scale(2,2) translateX(-17%) skewX(-45deg);

}

100% {

transform-origin: center left;

transform: scale(2,2) translateX(500%) skewX(-45deg);

}

ここから、開始位置が少しだけ特殊です。
今まで上下左右、一か所から始まっていましたが、今回は上下左右からではないのでtransform-originに2つ設定する必要があります。
「左上から右下へ」なので、左（left）上（top）を設定する必要があります。ですが、今回は片側に余白が生まれないように上下は中央揃え（center）にします。

またここまで紹介した上下左右からの動きは、要素の高さを広げたり、縮めたりして表示していましたが、斜めの動きでは同じような書き方で対応することができません。そのため、今回は要素のサイズは変更せずに、画面外から要素を動かし再び画面外に消える、という動きになっています。

また、今回からscaleとskewを使用します。
animation-bgは画面幅いっぱいに広げて表示しているので、形が垂直・水平になっています。なので、skewで変形させて斜めになるように指定します。
そのままの大きさだと余白が生まれてしまうので、全体を覆えるようにscaleで拡大します。

translateXを使って要素全体が画面外→画面内→画面外となるように指定して完成です。
0%でtranslateX(-300%)を指定しているのは、画面外に表示させるためです。

右下から左上へ

「.bottom」と「.rtl」をbodyに追加し、それぞれの「.animation-bg」にアニメーションを設定します。

　
.bottom.rtl .animation-bg {
  animation-name: PageAnime-bottom-rtl;
  animation-duration: 1.5s;
}
@keyframes PageAnime-bottom-rtl {
  0% {
    transform-origin: center right;
    transform: scale(2,2) translateX(300%) skewX(-45deg);
  }
  50% {
    transform-origin: center right;
    transform: scale(2,2) translateX(17%) skewX(-45deg);
  }
  50.001% {
    transform-origin: center right;
    transform: scale(2,2) translateX(17%) skewX(-45deg);
  }
  100% {
    transform-origin: center right;
    transform: scale(2,2) translateX(-500%) skewX(-45deg);
  }
}

.bottom.rtl .animation-bg {

animation-name: PageAnime-bottom-rtl;

animation-duration: 1.5s;

}

@keyframes PageAnime-bottom-rtl {

0% {

transform-origin: center right;

transform: scale(2,2) translateX(300%) skewX(-45deg);

}

50% {

transform-origin: center right;

transform: scale(2,2) translateX(17%) skewX(-45deg);

}

50.001% {

transform-origin: center right;

transform: scale(2,2) translateX(17%) skewX(-45deg);

}

100% {

transform-origin: center right;

transform: scale(2,2) translateX(-500%) skewX(-45deg);

}

基本的に「左上から右下へ」と同じ記述です。
違う点は、transform-originの左右の開始位置がleftからrightに変更になったことと、0%と100%の時のtranslateXの数値の+-が逆になったことです。

右上から左下へ・左下から右上へ

まず、デモはこちらになります。
右上から左下へ
 左下から右上へ

それぞれのキーフレームはこちらです。
※追記部分だけ記載しています。

右上から左下へ

「.top」と「.rtl」をbodyに追加し、それぞれの「.animation-bg」にアニメーションを設定します。

　
.top.rtl .animation-bg {
  animation-name: PageAnime-top-rtl;
  animation-duration: 1.5s;
}
@keyframes PageAnime-top-rtl {
  0% {
    transform-origin: center right;
    transform: scale(2,2) translateX(300%) skewX(45deg);
  }
  50% {
    transform-origin: center right;
    transform: scale(2,2) translateX(17%) skewX(45deg);
  }
  50.001% {
    transform-origin: center right;
    transform: scale(2,2) translateX(17%) skewX(45deg);
  }
  100% {
    transform-origin: center right;
    transform: scale(2,2) translateX(-500%) skewX(45deg);
  }
}

.top.rtl .animation-bg {

animation-name: PageAnime-top-rtl;

animation-duration: 1.5s;

}

@keyframes PageAnime-top-rtl {

0% {

transform-origin: center right;

transform: scale(2,2) translateX(300%) skewX(45deg);

}

50% {

transform-origin: center right;

transform: scale(2,2) translateX(17%) skewX(45deg);

}

50.001% {

transform-origin: center right;

transform: scale(2,2) translateX(17%) skewX(45deg);

}

100% {

transform-origin: center right;

transform: scale(2,2) translateX(-500%) skewX(45deg);

}

「右下から左上へ」のコードとほぼ同じです。違いはskewXの数値にマイナスを追加した点です。

左下から右上へ

「.bottom」と「.ltr」をbodyに追加し、それぞれの「.animation-bg」にアニメーションを設定します。

　
.bottom.ltr .animation-bg {
  animation-name: PageAnime-bottom-ltr;
  animation-duration: 5s;
}
@keyframes PageAnime-bottom-ltr {
  0% {
    transform-origin: center left;
    transform: scale(2,2) translateX(-300%) skewX(45deg);
  }
  50% {
    transform-origin: center left;
    transform: scale(2,2) translateX(-17%) skewX(45deg);
  }
  50.001% {
    transform-origin: center left;
    transform: scale(2,2) translateX(-17%) skewX(45deg);
  }
  100% {
    transform-origin: center left;
    transform: scale(2,2) translateX(500%) skewX(45deg);
  }
}

.bottom.ltr .animation-bg {

animation-name: PageAnime-bottom-ltr;

animation-duration: 5s;

}

@keyframes PageAnime-bottom-ltr {

0% {

transform-origin: center left;

transform: scale(2,2) translateX(-300%) skewX(45deg);

}

50% {

transform-origin: center left;

transform: scale(2,2) translateX(-17%) skewX(45deg);

}

50.001% {

transform-origin: center left;

transform: scale(2,2) translateX(-17%) skewX(45deg);

}

100% {

transform-origin: center left;

transform: scale(2,2) translateX(500%) skewX(45deg);

}

「左上から右下へ」のコードとほぼ同じです。違いはskewXの数値にマイナスを追加した点です。

背景色が拡大縮小

上下左右に動かすだけではなく、拡大縮小もするページ遷移アニメーションになります。

中央に向かって円形で縮小

背景色が中央に向かって円形に縮小していくページ遷移アニメーションです。
「.circle」をbodyに追加し、「.animation-bg」にアニメーションを設定します。
まず、デモはこちらになります。
【デモ】中央に向かって円形で縮小

キーフレームはこちらです。

　
.circle .animation-bg {
  background: #75bec2;
  display: none;
  content: "";
  position: fixed;
  transform: scale(100);
  z-index: 999;
  top: calc(50% - 1rem);
  left: calc(50% - 1rem);
  width: 2rem;
  height: 2rem;
  display: block;
  border-radius: 50%;
  animation-name: PageAnime-circle;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes PageAnime-circle {
  0% {
    transform: scale(100);
  }
  100% {
    transform: scale(0);
  }
}

.circle .animation-bg {

background: #75bec2;

display: none;

content: "";

position: fixed;

transform: scale(100);

z-index: 999;

top: calc(50% - 1rem);

left: calc(50% - 1rem);

width: 2rem;

height: 2rem;

display: block;

border-radius: 50%;

animation-name: PageAnime-circle;

animation-duration: 0.8s;

animation-timing-function: ease-in-out;

animation-fill-mode: forwards;

}

@keyframes PageAnime-circle {

0% {

transform: scale(100);

}

100% {

transform: scale(0);

}

同じ比率で縮小するために、こちらではwidthとheightの数値を指定します。transformのscaleで画面全体に表示されるようにします。
中央に向かって消えていくために、要素を中央に配置するようにtopとleftをします。
このままだと四角のまま縮小されてしまうので、border-radiusをかけて要素を円形にします。

アニメーションでscaleを100から0にするだけで完成です。

ひし形で背景色を抜き、拡大

ひし形で背景色を抜き、ひし形を拡大してページを表示するページ遷移アニメーションです。
「.rhombus」をbodyに追加しますが、こちらでは「.animation-bg」は使用しません。
まず、デモはこちらになります。
【デモ】ひし形で背景色を抜き、拡大

CSSは以下になります。
※追記部分だけ記載しています。

CSS

　
.rhombus {
  background-color: #75bec2;
  --size: 12vh;
  clip-path: polygon(50% calc(50% - var(--size)), calc(50% + var(--size)) 50%, 50% calc(50% + var(--size)), calc(50% - var(--size)) 50%);
  min-height: 100vh;
}
.rhombus::before {
  background: #fff;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.rhombus.is-hidden {
  --size: 1000vh;
  transition: clip-path 2s .5s ease-in-out, background-color 1s .5s;
}

.rhombus {

background-color: #75bec2;

--size: 12vh;

clip-path: polygon(50% calc(50% - var(--size)), calc(50% + var(--size)) 50%, 50% calc(50% + var(--size)), calc(50% - var(--size)) 50%);

min-height: 100vh;

}

.rhombus::before {

background: #fff;

content: "";

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 100%;

}

.rhombus.is-hidden {

--size: 1000vh;

transition: clip-path 2s .5s ease-in-out, background-color 1s .5s;

}

clip-pathを使って、画面全体をひし形にくり抜きます。

clip-path
要素のどの部分を表示するかを設定するクリッピング領域を作るCSSプロパティ

polygonの点の取り方は以下の画像のようになっています。
上⇒右⇒下⇒左の順で、各頂点の位置を指定しています。
50%は中央の座標を指し示し、そこから各頂点の位置に向かって、x軸・y軸を（--size: 12vh）分、ずらしています。

ひし形のサイズを変えたい場合は、--sizeの数値を変更することで変えることが出来ます。

また、.rhombus自体をひし形にくり抜いてアニメーションを行っているので、そのままだとアニメーション終了後に背景色が青色のままになってしまいます。そのため、疑似要素で白背景を追加しています。

jQueryは以下になります。
※追記部分だけ記載しています。

jQuery

　
setTimeout(function() {
  $('body.rhombus').addClass('appear');
}, 500);
setTimeout(function() {
  $('body.rhombus').addClass('is-hidden');
}, 1000);

setTimeout(function() {

$('body.rhombus').addClass('appear');

}, 500);

setTimeout(function() {

$('body.rhombus').addClass('is-hidden');

}, 1000);

ひし形が拡大され終わるタイミングで「.is-hidden」を追加します。
これでひし形にくり抜く、ページ遷移アニメーションの完成です。

グラデーションで消えていく

グラデーションで消えていくページ遷移アニメーションです。
「.gradation」をbodyに追加し、「.animation-bg」にアニメーションを設定します。
まず、デモはこちらになります。

【デモ】グラデーションがかかる

それぞれのキーフレームはこちらです。
※追記部分だけ記載しています。

CSS

　
.gradation .animation-bg {
  --color01: 255,255,255;
  background: linear-gradient(180deg, rgba(var(--color01),1) 0%, rgba(var(--color01),0) 100%);
  background-size: 200% 200%;
  content: "";
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  animation-name: PageAnime-gradation;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  pointer-events: none;
}

@keyframes PageAnime-gradation {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 100% 100%;
  }
}

.gradation .animation-bg {

--color01: 255,255,255;

background: linear-gradient(180deg, rgba(var(--color01),1) 0%, rgba(var(--color01),0) 100%);

background-size: 200% 200%;

content: "";

position: fixed;

z-index: 999;

top: 0;

left: 0;

width: 100%;

height: 100vh;

animation-name: PageAnime-gradation;

animation-duration: 1s;

animation-delay: 1s;

animation-timing-function: ease-in-out;

animation-fill-mode: forwards;

pointer-events: none;

}

@keyframes PageAnime-gradation {

0% {

background-position: 100% 0;

}

100% {

background-position: 100% 100%;

}

jQuery

　
setTimeout(function() {
  $('body .animation-bg').fadeOut();
}, 1300);

setTimeout(function() {

$('body .animation-bg').fadeOut();

}, 1300);

linear-gradientには、transitionが効かないのでbackground-positionを使ってグラデーションが徐々に消えていく動作を実装します。
CSSだけだと上の方にグラデーションが残ったままになってしまうので、jQueryにfadeOutの記述を追加します。
アニメーションが終わるタイミングで.animation-bgをフェードアウトすることによって自然にグラデーションが消えていくような動きになります。

【中級編】ワンポイント加えておしゃれなページ遷移アニメーション

少しだけレベルアップして、ワンポイントを足したページ遷移アニメーションです。
初級編は、「.animation-bg」だけを使用していましたが、中級編からは少しHTMLに要素を追加します。

カーテンのようなページ遷移アニメーション

背景色が中央から2つに分かれて、カーテンが開いていくようなページ遷移アニメーションです。

「.curtain」をbodyに追加し、「.animation-bg」にアニメーションを設定します。
まず、デモはこちらになります。
【デモ】カーテンのようなページ遷移アニメーション

HTML

　
  <div class="animation-bg"></div>
  <div class="animation-bg02"></div>

「.animation-bg」、「.animation-bg02」のアニメーションに使用する要素を2つ用意します。

CSS

キーフレームはこちらです。

ソースの表示


.curtain .animation-bg, .curtain .animation-bg02 {
  display: none;
}
body.appear.curtain .animation-bg, body.appear.curtain .animation-bg02 {
  display: block;
}
.curtain .animation-bg, .curtain .animation-bg02 {
  background:  #ff97bd;
  content: "";
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 0;
  transform: scaleX(1);
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.curtain .animation-bg {
  left: 50%;
  animation-name: PageAnime-curtain01;
}
.curtain .animation-bg02 {
  right: 50%;
  animation-name: PageAnime-curtain02;
}
/* カーテン左 キーフレーム */
@keyframes PageAnime-curtain01 {
  0% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}
/* カーテン右 キーフレーム */
@keyframes PageAnime-curtain02 {
  0% {
    transform-origin: right;
    transform: scaleX(1);
  }
  50% {
    transform-origin: left;
  }
  100% {
    transform-origin: left;
    transform: scaleX(0);
  }
}

.curtain .animation-bg, .curtain .animation-bg02 {

display: none;

}

body.appear.curtain .animation-bg, body.appear.curtain .animation-bg02 {

display: block;

}

.curtain .animation-bg, .curtain .animation-bg02 {

background: #ff97bd;

content: "";

position: fixed;

z-index: 999;

width: 100%;

height: 100vh;

top: 0;

transform: scaleX(1);

animation-duration: 1.2s;

animation-timing-function: ease-in-out;

animation-fill-mode: forwards;

}

.curtain .animation-bg {

left: 50%;

animation-name: PageAnime-curtain01;

}

.curtain .animation-bg02 {

right: 50%;

animation-name: PageAnime-curtain02;

}

/* カーテン左キーフレーム */

@keyframes PageAnime-curtain01 {

0% {

transform-origin: left;

transform: scaleX(1);

}

50% {

transform-origin: right;

}

100% {

transform-origin: right;

transform: scaleX(0);

}

/* カーテン右キーフレーム */

@keyframes PageAnime-curtain02 {

0% {

transform-origin: right;

transform: scaleX(1);

}

50% {

transform-origin: left;

}

100% {

transform-origin: left;

transform: scaleX(0);

}

今回、カーテンが開くように背景色が左右に分割するので、左側と右側、それぞれのアニメーションが必要です。
まず、bodyに「.appear」が追加されたら、アニメーション用要素を表示させます。

アニメーションと要素の表示位置以外は、左右同じ内容なので合わせて指定します。
アニメーションの内容は、「左から右へ・右から左へ」と同じです。

順番に閉じるページ遷移アニメーション

背景色が分割し順番に閉じていくようなページ遷移アニメーションです。

「.move-order」をbodyに追加し、「.animation-bg」にアニメーションを設定します。
まず、デモはこちらになります。
【デモ】順番に閉じるページ遷移アニメーション

キーフレームはこちらです。
今回は10個に分割するので指定数が多くなります。

HTML

　
  <div class="animation-bg">
    <div class="animation-bg-element"></div>
    <div class="animation-bg-element"></div>
    <div class="animation-bg-element"></div>
    <div class="animation-bg-element"></div>
    <div class="animation-bg-element"></div>
    <div class="animation-bg-element"></div>
    <div class="animation-bg-element"></div>
    <div class="animation-bg-element"></div>
    <div class="animation-bg-element"></div>
    <div class="animation-bg-element"></div>
  </div>

</div>

「animation-bg-element」は、今回動かす要素です。
個数は実装する環境に合わせて適宜変えてください。

CSS

ソースの表示


.move-order .animation-bg .animation-bg-element {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(100% / 10);
  z-index: 999;
  animation-name: PageAnime-move-order;
  animation-duration: 0.5s;
  animation-delay: 0.1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.move-order .animation-bg .animation-bg-element:nth-child(2) {
  left: 10%;
  animation-delay: 0.2s;
}
.move-order .animation-bg .animation-bg-element:nth-child(3) {
  left: 20%;
  animation-delay: 0.3s;
}
.move-order .animation-bg .animation-bg-element:nth-child(4) {
  left: 30%;
  animation-delay: 0.4s;
}
.move-order .animation-bg .animation-bg-element:nth-child(5) {
  left: 40%;
  animation-delay: 0.5s;
}
.move-order .animation-bg .animation-bg-element:nth-child(6) {
  left: 50%;
  animation-delay: 0.6s;
}
.move-order .animation-bg .animation-bg-element:nth-child(7) {
  left: 60%;
  animation-delay: 0.7s;
}
.move-order .animation-bg .animation-bg-element:nth-child(8) {
  left: 70%;
  animation-delay: 0.8s;
}
.move-order .animation-bg .animation-bg-element:nth-child(9) {
  left: 80%;
  animation-delay: 0.9s;
}
.move-order .animation-bg .animation-bg-element:nth-child(10) {
  left: 90%;
  animation-delay: 1s;
}
.move-order .animation-bg .animation-bg-element::before {
  background: #ff97bd;
  box-shadow: 0 0 0 1px #ff97bd;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 順番に閉じる キーフレーム */
@keyframes PageAnime-move-order {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

.move-order .animation-bg .animation-bg-element {

position: fixed;

top: 0;

left: 0;

height: 100%;

width: calc(100% / 10);

z-index: 999;

animation-name: PageAnime-move-order;

animation-duration: 0.5s;

animation-delay: 0.1s;

animation-timing-function: ease-in-out;

animation-fill-mode: forwards;

}

.move-order .animation-bg .animation-bg-element:nth-child(2) {

left: 10%;

animation-delay: 0.2s;

}

.move-order .animation-bg .animation-bg-element:nth-child(3) {

left: 20%;

animation-delay: 0.3s;

}

.move-order .animation-bg .animation-bg-element:nth-child(4) {

left: 30%;

animation-delay: 0.4s;

}

.move-order .animation-bg .animation-bg-element:nth-child(5) {

left: 40%;

animation-delay: 0.5s;

}

.move-order .animation-bg .animation-bg-element:nth-child(6) {

left: 50%;

animation-delay: 0.6s;

}

.move-order .animation-bg .animation-bg-element:nth-child(7) {

left: 60%;

animation-delay: 0.7s;

}

.move-order .animation-bg .animation-bg-element:nth-child(8) {

left: 70%;

animation-delay: 0.8s;

}

.move-order .animation-bg .animation-bg-element:nth-child(9) {

left: 80%;

animation-delay: 0.9s;

}

.move-order .animation-bg .animation-bg-element:nth-child(10) {

left: 90%;

animation-delay: 1s;

}

.move-order .animation-bg .animation-bg-element::before {

background: #ff97bd;

box-shadow: 0 0 0 1px #ff97bd;

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

/* 順番に閉じるキーフレーム */

@keyframes PageAnime-move-order {

0% {

transform: translateY(0);

}

100% {

transform: translateY(100%);

}

widthをcalc(100% / 10)とし、画面内にすべて収まるように一つ当たりの横幅を決めます。

左から順番に閉じていく動きを表現するには、「animation-delay」の数値をそれぞれで変更します。
今回は0.1sずつアニメーションが走るまでの時間に差を付けました。

translateYを指定して、下に向かって画面幅から見えなくなる位置に移動させて完成です。

4つに色を分割するページ遷移アニメーション

背景色を4つに分割しバラバラな方向に閉じてページを表示するページ遷移アニメーションです。

「.four-color」をbodyに追加し、「.animation-bg」にアニメーションを設定します。
まず、デモはこちらになります。

【デモ】4つに色を分割するページ遷移アニメーション

キーフレームはこちらです。
今回は4つそれぞれ別方向にアニメーションが走るので、キーフレームも4つになります。

HTML

　
  <div class="animation-bg">
    <div class="animation-bg-element"></div>
    <div class="animation-bg-element"></div>
    <div class="animation-bg-element"></div>
    <div class="animation-bg-element"></div>
  </div>

</div>

CSS

ソースの表示


.four-color .animation-bg .animation-bg-element {
  position: fixed;
  top: 0;
  left: 0;
  height: calc(100% / 2);
  width: calc(100% / 2);
  z-index: 999;
  animation-name: PageAnime-four-color-ttb;
  animation-duration: 0.6s;
  animation-delay: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.four-color .animation-bg .animation-bg-element:nth-child(2) {
  left: inherit;
  right: 0;
  animation-name: PageAnime-four-color-rtl;
}
.four-color .animation-bg .animation-bg-element:nth-child(3) {
  top: inherit;
  bottom: 0;
  animation-name: PageAnime-four-color-ltr;
}
.four-color .animation-bg .animation-bg-element:nth-child(4) {
  top: inherit;
  left: inherit;
  right: 0;
  bottom: 0;
  animation-name: PageAnime-four-color-btt
}
.four-color .animation-bg .animation-bg-element::before {
  background: #ff97bd;
  box-shadow: 0 0 0 1px #ff97bd;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 四隅から色を表示する-上から下 キーフレーム */
@keyframes PageAnime-four-color-ttb {
  0% {
    transform-origin: bottom;
    transform: scaleY(1);
  }
  100% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
}
/* 四隅から色を表示する-左から右 キーフレーム */
@keyframes PageAnime-four-color-ltr {
  0% {
    transform-origin: right;
    transform: scaleX(1);
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}
/* 四隅から色を表示する-下から上 キーフレーム */
@keyframes PageAnime-four-color-btt {
  0% {
    transform-origin: top;
    transform: scaleY(1);
  }
  100% {
    transform-origin: top;
    transform: scaleY(0);
  }
}
/* 四隅から色を表示する-右から左 キーフレーム */
@keyframes PageAnime-four-color-rtl {
  0% {
    transform-origin: left;
    transform: scaleX(1);
  }
  100% {
    transform-origin: left;
    transform: scaleX(0);
  }
}

.four-color .animation-bg .animation-bg-element {

position: fixed;

top: 0;

left: 0;

height: calc(100% / 2);

width: calc(100% / 2);

z-index: 999;

animation-name: PageAnime-four-color-ttb;

animation-duration: 0.6s;

animation-delay: 1s;

animation-timing-function: ease-in-out;

animation-fill-mode: forwards;

}

.four-color .animation-bg .animation-bg-element:nth-child(2) {

left: inherit;

right: 0;

animation-name: PageAnime-four-color-rtl;

}

.four-color .animation-bg .animation-bg-element:nth-child(3) {

top: inherit;

bottom: 0;

animation-name: PageAnime-four-color-ltr;

}

.four-color .animation-bg .animation-bg-element:nth-child(4) {

top: inherit;

left: inherit;

right: 0;

bottom: 0;

animation-name: PageAnime-four-color-btt

}

.four-color .animation-bg .animation-bg-element::before {

background: #ff97bd;

box-shadow: 0 0 0 1px #ff97bd;

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

/* 四隅から色を表示する-上から下キーフレーム */

@keyframes PageAnime-four-color-ttb {

0% {

transform-origin: bottom;

transform: scaleY(1);

}

100% {

transform-origin: bottom;

transform: scaleY(0);

}

/* 四隅から色を表示する-左から右キーフレーム */

@keyframes PageAnime-four-color-ltr {

0% {

transform-origin: right;

transform: scaleX(1);

}

100% {

transform-origin: right;

transform: scaleX(0);

}

/* 四隅から色を表示する-下から上キーフレーム */

@keyframes PageAnime-four-color-btt {

0% {

transform-origin: top;

transform: scaleY(1);

}

100% {

transform-origin: top;

transform: scaleY(0);

}

/* 四隅から色を表示する-右から左キーフレーム */

@keyframes PageAnime-four-color-rtl {

0% {

transform-origin: left;

transform: scaleX(1);

}

100% {

transform-origin: left;

transform: scaleX(0);

}

左上・右上・左下・右下と画面を4つに分割して、配置します。
動きとしては、全体的に反時計回りに消えるような動きを実装します。
キーフレームで指定している内容は、「背景色が動く」で紹介した内容と同じなります。

wavify.jsを使ってゆらゆら揺れる波のページ遷移アニメーション

wavify.jsは、jQueryのプラグインです。
波がゆらゆらと揺れるような動きを実装することが出来ます。

「.motif」をbodyに追加し、「.animation-bg」にアニメーションを設定します。
まず、デモはこちらになります。
【デモ】wavify.jsを使ってゆらゆら揺れる波のページ遷移アニメーション

キーフレームはこちらです。

HTML

　
<div class="animation-bg">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path id="wave" d=""/>
    <path id="wave02" d=""/>
    <path id="wave03" d=""/>
    </svg>
</div>

</svg>

</div>

pathを使って波を表現します。
今回は、奥行きがあるような波にしたいので3つのpathを使います。それぞれの色は水色・青緑色・白の三色にしました。
この波の個数は、実装する環境に適宜合わせてください。

CSS

　
.motif .animation-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  z-index: 2;
}
.motif .animation-bg svg {
  width: 100vw;
  height: 100%;
}

.motif .animation-bg {

position: absolute;

bottom: 0;

left: 0;

height: 100%;

z-index: 2;

}

.motif .animation-bg svg {

width: 100vw;

height: 100%;

}

CSSの記載はこれだけです。
波の表示される範囲を画面いっぱいにします。

jQuery

ソースの表示


$(window).on('load',function(){

  setTimeout(function() {
    $('#wave').wavify({
      height: 1000,
      bones: 4,
      amplitude: 40,
      color: 'rgba(43,178,233,0.5)',
      speed: .25,
    });
    $('#wave02').wavify({
      height: 1000,
      bones: 2,
      amplitude: 40,
      color: 'rgba(0,240,237,0.5)',
      speed: .25,
    });
    $('#wave03').wavify({
      height: 1000,
      bones: 5,
      amplitude: 40,
      color: 'rgba(255,255,255,0.3)',
      speed: .25,
    });
  }, 300);
  setTimeout(function() {
    $('#wave').wavify({
      height: 500,
      bones: 4,
      amplitude: 40,
      color: 'rgba(43,178,233,0.5)',
      speed: .25,
    });
    $('#wave02').wavify({
      height: 500,
      bones: 2,
      amplitude: 40,
      color: 'rgba(0,240,237,0.5)',
      speed: .25,
    });
    $('#wave03').wavify({
      height: 500,
      bones: 5,
      amplitude: 40,
      color: 'rgba(255,255,255,0.3)',
      speed: .25,
    });
  }, 1000);
  setTimeout(function() {
    $('#wave').wavify({
      height: 200,
      bones: 4,
      amplitude: 40,
      color: 'rgba(43,178,233,0.5)',
      speed: .25,
    });
    $('#wave02').wavify({
      height: 200,
      bones: 2,
      amplitude: 40,
      color: 'rgba(0,240,237,0.5)',
      speed: .25,
    });
    $('#wave03').wavify({
      height: 200,
      bones: 5,
      amplitude: 40,
      color: 'rgba(255,255,255,0.3)',
      speed: .25,
    });
  }, 1500);
  setTimeout(function() {
    $('#wave').wavify({
      height: -150,
      bones: 4,
      amplitude: 40,
      color: 'rgba(43,178,233,0.5)',
      speed: .25,
    });
    $('#wave02').wavify({
      height: -150,
      bones: 2,
      amplitude: 40,
      color: 'rgba(0,240,237,0.5)',
      speed: .25,
    });
    $('#wave03').wavify({
      height: -150,
      bones: 5,
      amplitude: 40,
      color: 'rgba(255,255,255,0.3)',
      speed: .25,
    });
  }, 1900);
  setTimeout(function() {
    $('body.motif').addClass('appear');
  }, 3000);
});

100

$(window).on('load',function(){

setTimeout(function() {

$('#wave').wavify({

height: 1000,

bones: 4,

amplitude: 40,

color: 'rgba(43,178,233,0.5)',

speed: .25,

});

$('#wave02').wavify({

height: 1000,

bones: 2,

amplitude: 40,

color: 'rgba(0,240,237,0.5)',

speed: .25,

});

$('#wave03').wavify({

height: 1000,

bones: 5,

amplitude: 40,

color: 'rgba(255,255,255,0.3)',

speed: .25,

});

}, 300);

setTimeout(function() {

$('#wave').wavify({

height: 500,

bones: 4,

amplitude: 40,

color: 'rgba(43,178,233,0.5)',

speed: .25,

});

$('#wave02').wavify({

height: 500,

bones: 2,

amplitude: 40,

color: 'rgba(0,240,237,0.5)',

speed: .25,

});

$('#wave03').wavify({

height: 500,

bones: 5,

amplitude: 40,

color: 'rgba(255,255,255,0.3)',

speed: .25,

});

}, 1000);

setTimeout(function() {

$('#wave').wavify({

height: 200,

bones: 4,

amplitude: 40,

color: 'rgba(43,178,233,0.5)',

speed: .25,

});

$('#wave02').wavify({

height: 200,

bones: 2,

amplitude: 40,

color: 'rgba(0,240,237,0.5)',

speed: .25,

});

$('#wave03').wavify({

height: 200,

bones: 5,

amplitude: 40,

color: 'rgba(255,255,255,0.3)',

speed: .25,

});

}, 1500);

setTimeout(function() {

$('#wave').wavify({

height: -150,

bones: 4,

amplitude: 40,

color: 'rgba(43,178,233,0.5)',

speed: .25,

});

$('#wave02').wavify({

height: -150,

bones: 2,

amplitude: 40,

color: 'rgba(0,240,237,0.5)',

speed: .25,

});

$('#wave03').wavify({

height: -150,

bones: 5,

amplitude: 40,

color: 'rgba(255,255,255,0.3)',

speed: .25,

});

}, 1900);

setTimeout(function() {

$('body.motif').addClass('appear');

}, 3000);

});

wavifyで指定しているプロパティはそれぞれ以下を意味しています。

プロパティ	説明	初期値
height	波の高さ	200
bones	波の区切りの数	3
amplitude	波の山と谷の垂直距離	100
color	波の色	rgba(255,255,255, 0.20)
speed	波の動くスピード	0.15

【height】
pathの高さを指定します。数値が低ければ低いほど、要素の高さが高いので初期は1000を指定して、高さを無くし画面外から始まるような動きにします。

【bones】
波の数を変えます。数値が2など低ければ緩やかな波になり、数値が高ければその分細かく波打ちます。

【amplitude】
波の高さを指定します。初期値より低ければ波の高さは低く、数値が高ければ波の高さも高くなります。

【color】
波の色です。今回は不透明度を指定するために、rgbaで書きましたが#ffffffなどの書き方でもきちんと指定されます。ただ、グラデーションは指定出来ないので注意が必要です。

【speed】
波の動くスピードを指定できます。初期値に近いほど、滑らかに動きます。

今回は、下から上に向かって徐々に波が満ちていくような動きにするのでsetTimeoutを使ってその動きを実装します。
setTimeoutに合わせて、heightの数値を変更します。
setTimeoutが1900の時、heightをminus指定しているのは画面上部まで波が満ちさせるためです。マイナスの数値でないと余白がでてしまうのでマイナスを指定します。

またsetTimeoutの経過時間の間隔を一定にしていないのは、波っぽさを出すためです。一定の間隔で満ちるより、ばらばらに満ちていく方が実際の波に近いような気がするのでここでは間隔をバラバラにしています。
ここの時間などは、実装する環境に合わせて適宜変更してください。

animsition.jsを使って遷移アニメーション

animsition.jsは、ページ遷移用のシンプルな動きが簡単に実装出来るjQueryのプラグインです。

animsition.jsは今まで紹介した方法と使い方が異なります。
寧ろ他と比べて、公式サイトにソースが公開されているので簡単に実装することが出来ます。
今回は、「ズーム小」の動きを実装します。

まず、デモはこちらになります。
【デモ】animsition.jsを使ってページ遷移アニメーション

ダウンロード

まず、公式サイトから必要なファイルをダウンロードします。
アニメーション CSS アニメーションページ遷移用のシンプルで使いやすい JQUERY プラグイン。
ダウンロードファイルの中にある以下のファイルをそれぞれ対応するファイルに入れます。

animsition-master ＞ dist ＞ css ＞ animsition.min.css
animsition-master ＞ dist ＞ js ＞ animsition.min.js

HTML

ソースの表示


<html>
<head>
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
  <title>animation.js | ページ遷移アニメーション</title>
  <link href="../css/animsition.min.css" rel="stylesheet" media="all">
  <link href="../css/style.css" rel="stylesheet" media="all">

</head>
<body class="animation animsition"
data-animsition-in-class="zoom-in-sm"
data-animsition-in-duration="1000"
data-animsition-out-class="zoom-out-sm"
data-animsition-out-duration="800">

  <div class="content">
    <header>
      <div class="black-bg"></div>
      <div class="c-header">
        <div class="inner-block">
          <div class="logo level03">
            LOGO
          </div>
          <button type="button" class="c-menu-btn">
            <span class="inn">
              <span class="line"></span>
              <span class="line"></span>
              <span class="line"></span>
            </span>
          </button>
          <nav class="c-menu level03">
            <ul>
              <li>
                <a href="">
                  TOP
                </a>
              </li>
              <li>
                <a href="">
                  ABOUT
                </a>
              </li>
              <li>
                <a href="">
                  PRODUCT
                </a>
              </li>
              <li>
                <a href="">
                  NEWS
                </a>
              </li>
              <li>
                <a href="">
                  BLOG
                </a>
              </li>
              <li>
                <a href="">
                  CONTACT
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </header>
    <div class="mv-section">
      <div class="mv-img">
        <img src="../img/mv-img03.jpg" alt="">
        <span class="mv-text">
          animation.jsを使って<br>ページ遷移アニメーション
        </span>
      </div>
    </div>
  </div>

  <script src="../js/jquery-3.6.0.min.js"></script>
  <script src="../js/animsition.min.js"></script>
  <script src="../js/common.js"></script>

</body>
</html>

<html>

<head>

<title>animation.js | ページ遷移アニメーション</title>

</head>

<body class="animation animsition"

data-animsition-in-class="zoom-in-sm"

data-animsition-in-duration="1000"

data-animsition-out-class="zoom-out-sm"

data-animsition-out-duration="800">

LOGO

</div>

</span>

</button>

<ul>

<li>

TOP

</a>

</li>

<li>

ABOUT

</a>

</li>

<li>

PRODUCT

</a>

</li>

<li>

NEWS

</a>

</li>

<li>

BLOG

</a>

</li>

<li>

CONTACT

</a>

</li>

</ul>

</nav>

</div>

</header>

animation.jsを使って<br>ページ遷移アニメーション

</span>

</div>