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}
これは間違いでは?
49%{
background-color: rgb(154, 118, 240);
}
50%{
/* ... */
background-color: rgba(255, 255, 255, 0);
}
「背景色が消えるアニメーション」というのが具体的に何を意味しているのか分かりづらい。
親要素(.shutter)のコンテンツ(画像?テキスト?)が円形の内側に透けて見えるイメージでしょうか。
![退会済みユーザー](https://ddjkaamml8q8x.cloudfront.net/profileImages/deletedUser/icnUserSample.jpeg)
説明がわかりづらくすみません。
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が消えて欲しいです。
親要素(.shutter)には何かコンテンツ(画像とかテキスト)がありますか。
それが円形に広がって徐々に見えてくるというイメージですか。
![退会済みユーザー](https://ddjkaamml8q8x.cloudfront.net/profileImages/deletedUser/icnUserSample.jpeg)
親要素(.shutter)には何もありません。
shutterの下に重なるようにコンテンツがあり、それが徐々に見えてくるイメージです。
<div class="shutter">/* ... */</div>
<div>見えてくるコンテンツ</div>
という状態です。
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー