CSSを使って背景色を透過するアニメーションを作りたい

CSSを使用して右上から左下に向かって丸が広がり、背景色が消えていくアニメーションを作りたいです。

色をつければ思っているような動きをするのですが、background-color: rgba(255, 255, 255, 0);やbackground-color: transparent;だとうまく動きません。

どうすれば背景色が消えるアニメーションが作れるのでしょうか？
（op3で消えるアニメーションを入れたいです。）

お手数ですがどなたか教えていただけますと幸いです。

現状

HTML
1<div class="shutter">
2        <div class="first_shutter"></div>
3        <div class="second_shutter"></div>
4        <div class="third_shutter"></div>
5    </div>

CSS
1.first_shutter{
2    position: fixed;
3    top: 0;
4    left: 0;
5    right: 0;
6    bottom: 0;
7    z-index: 9997;
8    animation: op 2s linear forwards;
9}
10
11.second_shutter{
12    position: fixed;
13    top: 0;
14    left: 0;
15    right: 0;
16    bottom: 0;
17    z-index: 9998;
18    animation: op2 3s linear 0.8s forwards;
19}
20
21.third_shutter{
22    position: fixed;
23    top: 0;
24    left: 0;
25    right: 0;
26    bottom: 0;
27    z-index: 9999;
28    animation: op3 2.5s linear 1s forwards;
29}
30
31@keyframes op{
32    0%{
33        top: 150%;
34        left: -50%;
35        bottom: -50%;
36        right: 150%;
37        width: 0;
38        height: 0;
39        border-radius: 50%;
40    }
41    40%{
42        top: -50%;
43        left: -100%;
44        bottom: -50%;
45        right: -50%;
46        width: 300%;
47        height: 300%;
48        border-radius: 50%;
49        background-color: yellowgreen;
50    }
51    99%{
52        background-color: yellowgreen;
53    }
54    100%{
55        display: none;
56    }
57}
58
59@keyframes op2{
60    0%{
61        top: 150%;
62        left: 150%;
63        bottom: -50%;
64        right: -50%;
65        width: 0;
66        height: 0;
67        border-radius: 50%;
68    }
69    40%{
70        top: -50%;
71        left: -50%;
72        bottom: -50%;
73        right: -100%;
74        width: 300%;
75        height: 300%;
76        border-radius: 50%;
77        border-radius: 50%;
78        background-color: rgb(154, 118, 240);
79    }
80    99%{
81        background-color: rgb(154, 118, 240);
82    }
83    100%{
84        display: none;
85    }
86}
87
88@keyframes op3{
89    0%{
90        top: -50%;
91        left: 150%;
92        bottom: 150%;
93        right: -50%;
94        width: 0;
95        height: 0;
96        display: none;
97    }
98    48%{
99        display: none;
100    }
101    49%{
102        background-color: rgb(154, 118, 240);
103    }
104    50%{
105        top: -80%;
106        left: 150%;
107        bottom: 150%;
108        right: -50%;
109        width: 0;
110        height: 0;
111        border-radius: 50%;
112        background-color: rgba(255, 255, 255, 0);
113    }
114    100%{
115        top: -50%;
116        left: -50%;
117        bottom: -50%;
118        right: -100%;
119        width: 300%;
120        height: 300%;
121        border-radius: 50%;
122        background-color: rgba(255, 255, 255, 0);
123    }
124}

Lhankor_Mhy

2020/02/17 03:25

これは間違いでは？ 49%{ background-color: rgb(154, 118, 240); } 50%{ /* ... */ background-color: rgba(255, 255, 255, 0); }

hatena19

2020/02/17 03:42

「背景色が消えるアニメーション」というのが具体的に何を意味しているのか分かりづらい。親要素（.shutter)のコンテンツ(画像？テキスト？)が円形の内側に透けて見えるイメージでしょうか。

退会済みユーザー

2020/02/17 04:14 編集

説明がわかりづらくすみません。 1. first_shutterが左下から右上にかけて円形に広がり色がつく 2. second_shutterが右下から左上にかけて円形に広がり色がつく（first_shutterをsecond_shutterで塗りつぶす） 3. third_shutterが右上から左下にかけて円形に広がり最終的にはshutter全て消えるという流れにしたいです。なので現状は first_shutterで色がつき、second_shutterで別の色がついたときにはfirst_shutterが消え、third_shutterでfirst_shutterと同じ色を全面につけたときにはfirst_shutterが消えるという流れになっています。 first_shutterが消えたあと、残ったthird_shutterが消えて欲しいです。

hatena19

2020/02/17 04:27

親要素（.shutter)には何かコンテンツ（画像とかテキスト）がありますか。それが円形に広がって徐々に見えてくるというイメージですか。

退会済みユーザー

2020/02/17 04:52 編集

親要素（.shutter)には何もありません。 shutterの下に重なるようにコンテンツがあり、それが徐々に見えてくるイメージです。 <div class="shutter">/* ... */</div> <div>見えてくるコンテンツ</div> という状態です。

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

回答1件

ベストアンサー

下記のようなことでしょうか。

css
1.first_shutter{
2    position: fixed;
3    top: 0;
4    left: 0;
5    right: 0;
6    bottom: 0;
7    z-index: 9997;
8    animation: op 2s linear forwards;
9}
10
11.second_shutter{
12    position: fixed;
13    top: 0;
14    left: 0;
15    right: 0;
16    bottom: 0;
17    z-index: 9998;
18    animation: op2 1.2s linear 0.8s forwards;
19}
20
21.third_shutter {
22  position: fixed;
23  background: radial-gradient(rgba(154, 118, 240, 0) 25%, rgba(154, 118, 240, 1) 25%);
24  animation: op3 1.2s linear 1.9s;
25}
26
27@keyframes op{
28    0%{
29        top: 150%;
30        left: -50%;
31        bottom: -50%;
32        right: 150%;
33        width: 0;
34        height: 0;
35        border-radius: 50%;
36    }
37    40%{
38        top: -50%;
39        left: -100%;
40        bottom: -50%;
41        right: -50%;
42        width: 300%;
43        height: 300%;
44        border-radius: 50%;
45        background-color: yellowgreen;
46    }
47    99%{
48        background-color: yellowgreen;
49    }
50    100%{
51        display: none;
52    }
53}
54
55@keyframes op2{
56    0%{
57        top: 150%;
58        left: 150%;
59        bottom: -50%;
60        right: -50%;
61        width: 0;
62        height: 0;
63        border-radius: 50%;
64    }
65    98%{
66        top: -50%;
67        left: -50%;
68        bottom: -50%;
69        right: -100%;
70        width: 300%;
71        height: 300%;
72        border-radius: 50%;
73        border-radius: 50%;
74        background-color: rgb(154, 118, 240);
75    }
76    99%{
77        background-color: rgb(154, 118, 240);
78    }
79    100%{
80        display: none;
81    }
82}
83
84@keyframes op3{
85  0%{
86    width: 300%;
87    height: 300%;
88    top: -200%;
89    right: -200%;
90  }
91  
92  100%{
93  width: 500%;
94  height: 500%;
95  top: -200%;
96  right: -200%;
97  }
98}