CSSアニメーション

やりたいこと
-　画像のようなフレームを作成

-　ページローディング時のような色が変化するCSSアニメーション作成
（グレーの色が左から右へ流れるような変化）

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="utf-8">
6  <title>Class 6 チャレンジ</title>
7  <link rel="stylesheet" href="styles.css" />
8</head>
9
10<body>
11  <div class="card-wrapper is-loading">
12    <div class="card-upper">
13      <div class="avatar">
14        <div class="avatar-placeholder"></div>
15      </div>
16      <div class="name-date-wrapper">
17        <div class="name-wrapper"></div>
18        <div class="date-wrapper"></div>
19      </div>
20    </div>
21    <div class="card-lower">
22      <div class="content-wrapper">
23        <div class="content"></div>
24        <div class="content-placeholder-wrapper">
25          <div class="content-placeholder p1"></div>
26          <div class="content-placeholder p2"></div>
27          <div class="content-placeholder p3"></div>
28        </div>
29      </div>
30    </div>
31  </div>
32</body>
33</html>

CSS
1@charset "UTF-8";
2
3* {
4  box-sizing: border-box;
5}
6
7body {
8  margin: 0;
9  border: 0;
10  padding: 0;
11  background: #e9ebee;
12}
13
14.card-wrapper {
15  width: 400px;
16  height: 300px;
17  padding: 12px;
18  border: 1px solid #ECE9E3;
19  background: #fff;
20  margin: 30px;
21  display: flex;
22  flex-direction: column;
23}
24
25.card-upper {
26  display: flex;
27}
28
29.avatar {
30  margin-right: 10px;
31}
32
33.avatar-placeholder {
34  height: 40px;
35  width: 40px;
36  border-radius: 50%;
37}
38
39.content-placeholder.p1 {
40  width: 100%;
41}
42
43.content-placeholder.p2 {
44  width: 60%;
45}
46
47.content-placeholder.p3 {
48  width: 80%;
49}
50
51@keyframes gradient-transition {}

行動規範の内容に同意します

回答1件

ベストアンサー

そのアニメーションは「スケルトンスクリーン」といいます。
実装の仕方については、参考がたくさんあるので、好みのものを探して真似してみてください。

参考URL: 「スケルトンスクリーン実装」でGoogle 検索した結果

例えば、以下のような形で実装できるのでは、と思います。

CSS
1/* 汎用的なクラス名をつけたほうがいいと思いますが、とりあえずベタ書きしています。 */
2.avatar-placeholder,
3.name-wrapper,
4.date-wrapper,
5.content-placeholder {
6  position: relative;
7  overflow: hidden;
8}
9.avatar-placeholder::before,
10.name-wrapper::before,
11.date-wrapper::before,
12.content-placeholder::before {
13  content: "";
14  display: block;
15  height: 100%;
16  width: 100%;
17  background:  linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
18  position: absolute;
19  top: 0;
20  left: 0;
21  animation: skeleton-animation 1.2s linear infinite;
22}
23    
24@keyframes skeleton-animation {
25  0% {
26    transform: translateX(-100%);
27  }
28  100% {
29    transform: translateX(100%);
30  }
31}

また、以下はアニメーションとは関係がないのですが、なければおそらく要素がつぶれて表示されないと思います。

CSS
1.card-lower {
2  flex: 1 1 0%;
3}
4.avatar-placeholder {
5   background: #ddd;
6}
7.name-wrapper,
8.date-wrapper {
9  margin-bottom: 1em;
10  height: 1em;
11  background: #ddd;
12}
13.content-placeholder {
14  margin-bottom: 1em;
15  height: 1em;
16  background: #ddd;
17}