全画面表示（テスト運用中）

2024.02.162024.02.18

ggfb

遊び方：キーボードのS,E,F,G,J,I,Lをノーツが赤いラインに重なったタイミングに合わせて押しましょう（EはD、GはH/Space、IはKでも可）
※ゲーム中は[Enter]キーでポーズ／再生できます。
※動画を直接クリックして再生するとキーボード操作を受付けなくなるので動画以外の部分をクリックした上で[Enter]キーで再生してください。

投稿者コメント： body{ overflow-x: hidden; } #popntube{ position: relative; z-index: -1; opacity: 0; pointer-events: none; } #custom_popntube{ filter: grayscale(0) brightness(1); position: relative; z-index: 5; } .effect-base{ position:fixed; top:0; left:0; } .countdown{ position:fixed; top:0; left:0; color: white; z-index: 7; width: 100vw; height: 100vh; opacity: 0; background-color: black; pointer-events: none; } .foreground{ position:fixed; top:0; left:0; color: white; z-index: 7; width: 100vw; height: 100vh; opacity: 0; background-color: white; pointer-events: none; } .background{ position:fixed; top:0; left:0; color: white; z-index: 3; width: 100vw; height: 100vh; opacity: 0; background-color: black; pointer-events: none; } .fg_graphbase{ position:fixed; top:0; left:0; color: white; z-index: 9; width: 100vw; height: 100vh; opacity: 1; background: transparent; pointer-events: none; } .fg_graph0, .fg_graph1, .fg_graph2, .fg_graph3, .fg_graph4, .fg_graph5, .fg_graph6, .fg_graph7, .fg_graph8, .fg_graph9{ opacity: 0; } .doublebuffer_bg{ position:fixed; top:0; left:0; color: white; z-index: 2; width: 100vw; height: 100vh; opacity: 0; background-color: black; pointer-events: none; } .base{ position: relative; top: -1175px; } .base:hover .countdown{ animation: 1s showcount 3s forwards, 1.5s hidecount 9s forwards; } .cd{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 1px !important; height: 1px !important; font-family: serif; font-size: xx-large; opacity:0; z-index: 9999; color: white; align-items: center; justify-content: center; height: 100%; background-color: transparent; pointer-events: none; } .base:hover .cd_5{ animation: 1s countanim backwards; animation-delay: 4s; } .base:hover .cd_4{ animation: 1s countanim backwards; animation-delay: 5s; } .base:hover .cd_3{ animation: 1s countanim backwards; animation-delay: 6s; } .base:hover .cd_2{ animation: 1s countanim backwards; animation-delay: 7s; } .base:hover .cd_1{ animation: 1s countanim backwards; animation-delay: 8s; } .base:hover .cd_0{ animation: 1.5s countanim backwards; animation-delay: 9s; } @keyframes countanim{ 0%{ opacity: 0; } 1%{ opacity: 1; } 95%{ opacity: 1; } 100%{ opacity: 0; } } @keyframes showcount{ 0%{ opacity: 0; } 100%{ opacity: 1; } } @keyframes hidecount{ 0%{ opacity: 1; } 100%{ opacity: 0; } } .caution{ position: relative; top: -1120px; left: 3rem; z-index: 10; background-color: blue; color: white; width:26rem; font-weight: bold; animation: 2s caution_hide 8s forwards; pointer-events: none; } @keyframes caution_hide{ 0%{ opacity: 1; } 100%{ opacity: 0; } } .blur_txt{ filter: blur(5px); position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 20rem !important; height: 1px !important; font-family: serif; font-size: xx-large; opacity: 0; z-index: 9999; color: white; align-items: center; justify-content: center; height: 100%; background-color: transparent; } .centerlize{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: fit-content; height: fit-content; } .fg_textgraph{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 3rem !important; height: 3rem !important; font-family: serif; font-size: xx-large; z-index: 9999; color: white; align-items: center; justify-content: center; height: 100%; background-color: transparent; border: 1.5px solid; border-image: conic-gradient(white, transparent 0deg) 1; } @keyframes showGenkouChar{ 5%{ border-image: conic-gradient(white, transparent 45deg) 1; } 10%{ border-image: conic-gradient(white, transparent 90deg) 1; } 15%{ border-image: conic-gradient(white, transparent 135deg) 1; } 20%{ border-image: conic-gradient(white, transparent 180deg) 1; } 25%{ border-image: conic-gradient(white, transparent 225deg) 1; } 30%{ border-image: conic-gradient(white, transparent 270deg) 1; } 35%{ border-image: conic-gradient(white, transparent 315deg) 1; } 40%{ border-image: conic-gradient(white, transparent 360deg) 1; } 45%{ border-image: conic-gradient(white, transparent 405deg) 1; } 50%{ border-image: conic-gradient(white, transparent 450deg) 1; } 55%{ border-image: conic-gradient(white, transparent 495deg) 1; } 60%{ border-image: conic-gradient(white, transparent 540deg) 1; } 65%{ border-image: conic-gradient(white, transparent 585deg) 1; } 70%{ border-image: conic-gradient(white, transparent 630deg) 1; } 75%{ border-image: conic-gradient(white, transparent 675deg) 1; } 80%{ border-image: conic-gradient(white, transparent 820deg) 1; } 85%{ border-image: conic-gradient(white, transparent 865deg) 1; } 90%{ border-image: conic-gradient(white, transparent 910deg) 1; } 95%{ border-image: conic-gradient(white, transparent 955deg) 1; } 100%{ border-image: conic-gradient(white, white) 1; } } @keyframes showGenkouChar2{ 5%{ border-image: conic-gradient(from 180deg, white, transparent 45deg) 1; } 10%{ border-image: conic-gradient(from 180deg, white, transparent 90deg) 1; } 15%{ border-image: conic-gradient(from 180deg, white, transparent 135deg) 1; } 20%{ border-image: conic-gradient(from 180deg, white, transparent 180deg) 1; } 25%{ border-image: conic-gradient(from 180deg, white, transparent 225deg) 1; } 30%{ border-image: conic-gradient(from 180deg, white, transparent 270deg) 1; } 35%{ border-image: conic-gradient(from 180deg, white, transparent 315deg) 1; } 40%{ border-image: conic-gradient(from 180deg, white, transparent 360deg) 1; } 45%{ border-image: conic-gradient(from 180deg, white, transparent 405deg) 1; } 50%{ border-image: conic-gradient(from 180deg, white, transparent 450deg) 1; } 55%{ border-image: conic-gradient(from 180deg, white, transparent 495deg) 1; } 60%{ border-image: conic-gradient(from 180deg, white, transparent 540deg) 1; } 65%{ border-image: conic-gradient(from 180deg, white, transparent 585deg) 1; } 70%{ border-image: conic-gradient(from 180deg, white, transparent 630deg) 1; } 75%{ border-image: conic-gradient(from 180deg, white, transparent 675deg) 1; } 80%{ border-image: conic-gradient(from 180deg, white, transparent 820deg) 1; } 85%{ border-image: conic-gradient(from 180deg, white, transparent 865deg) 1; } 90%{ border-image: conic-gradient(from 180deg, white, transparent 910deg) 1; } 95%{ border-image: conic-gradient(from 180deg, white, transparent 955deg) 1; } 100%{ border-image: conic-gradient(from 180deg, white, white) 1; } } .base:hover .blur_txt{ animation: 1.5s showcount 82.5s forwards, 0.3s hidecount 84.1s forwards; } .base:hover .fg_graph0{ animation: 3s bg_show 103.4s forwards, 7s bg_hide 110s forwards, 0s bg_show 248.2s forwards, 1s bg_hide 256s forwards, 2s bg_show 257s forwards, 1s bg_hide 263s forwards; } .fg_graph1{ transform: translateY(-15rem); } .fg_graph2{ transform: translateY(-11.5rem); } .fg_graph3{ transform: translateY(-8rem); } .fg_graph4{ transform: translateY(-4.5rem); } .fg_graph5{ transform: translateY(-1rem); } .fg_graph6{ transform: translateY(2.5rem); } .fg_graph7{ transform: translateY(6rem); } .fg_graph8{ transform: translateY(9.5rem); } .fg_graph9{ transform: translateY(13rem); } .base:hover .fg_graph1{ animation: 2s bg_show 208.2s forwards, 0.5s showGenkouChar 208.2s forwards, 0s bg_hide 210.4s forwards; } .base:hover .fg_graph2{ animation: 2s bg_show 208.2s forwards, 0.7s showGenkouChar 208.2s forwards, 0s bg_hide 210.4s forwards; } .base:hover .fg_graph3{ animation: 2s bg_show 208.2s forwards, 0.9s showGenkouChar2 208.2s forwards, 0s bg_hide 210.4s forwards; } .base:hover .fg_graph4{ animation: 2s bg_show 208.2s forwards, 1.1s showGenkouChar 208.2s forwards, 0s bg_hide 210.4s forwards; } .base:hover .fg_graph5{ animation: 2s bg_show 208.2s forwards, 1.3s showGenkouChar2 208.2s forwards, 0s bg_hide 210.4s forwards; } .base:hover .fg_graph6{ animation: 2s bg_show 208.2s forwards, 1.5s showGenkouChar 208.2s forwards, 0s bg_hide 210.4s forwards; } .base:hover .fg_graph7{ animation: 2s bg_show 208.2s forwards, 1.7s showGenkouChar2 208.2s forwards, 0s bg_hide 210.4s forwards; } .base:hover .fg_graph8{ animation: 2s bg_show 208.2s forwards, 1.9s showGenkouChar 208.2s forwards, 0s bg_hide 210.4s forwards; } .base:hover .fg_graph9{ animation: 2s bg_show 208.2s forwards, 2s showGenkouChar2 208.2s forwards, 0s bg_hide 210.4s forwards; } .base:hover .foreground{ animation: 5s fore0 5s forwards, 10s fore1 11.5s forwards, 10s fore2 74s forwards, 0.4s fore3 82s forwards, 0.4s fore4 84.2s forwards, 0.8s fore1 84.6s forwards, 0.8s fore5 93.9s forwards, 0s fore2 154.3s forwards, 0s fore1 154.8s forwards, 0s fore2 178.8s forwards, 1s fore1 180.3s forwards, 0s fore6 248.2s forwards, 3s bg_hide 256s forwards, 2s fore5 276.2s forwards; } @keyframes fore0{ 0%{ opacity: 1; background-color: black; } 100%{ opacity: 1; background-color: black; } } @keyframes fore1{ 100%{ opacity: 0; background-color: black; } } @keyframes fore2{ 0%{ opacity: 0; background-color: black; } 100%{ opacity: 0.75; background-color: black; } } @keyframes fore3{ 0%{ opacity: 0.75; background-color: #3F3D3F; } 100%{ opacity: 0.75; background-color: black; } } @keyframes fore4{ 0%{ opacity: 0.5; background-color: black; } 100%{ opacity: 0.75; background-color: black; } } @keyframes fore5{ 0%{ opacity: 0.2; background-color: #F2F4EC; } 100%{ opacity: 0; } } @keyframes fore6{ 100%{ opacity: 1; background: linear-gradient(transparent 75%, black); } } .base:hover .doublebuffer_bg{ animation: 5s bg1 5s forwards, 0s bg11 30s forwards, 0s bg7 84s forwards, 0s bg1 90s forwards, 0s bg13 154s forwards, 0s bg1 165.6s forwards, 0s bg21 200s forwards, 0s bg22 248.2s forwards, 0s bg21 258s forwards, 10s bg_hide 276.2s forwards; } .base:hover .background{ animation: 5s bg1 5s forwards, 1s bg_hide 31s forwards, 0s bg_show 39.3s forwards, 2s bg2 43.7s forwards, 0s bg3 46.3s forwards, 8s bg4 49s forwards, 1s bg3 58s forwards ease-out, 8.9s bg5 65s forwards ease-in, 0s bg3 73.9s forwards, 0.4s bg_hide 84.5s forwards, 0s bg_show 84.9s forwards, 8.1s bg6 84.9s forwards, 1s bg_hide 94s forwards, 2s bg_show 95s forwards, 0s bg8 95s forwards, 5.4s bg_hide 98s forwards, 0s bg9 103.4s forwards, 3s bg_show 103.4s forwards, 7s bg_hide 110s forwards, 0s bg_show 119.3s forwards, 1.75s bg10 119.3s forwards, 1.75s bg14 121.45s forwards, 1.75s bg15 123.7s forwards, 1.75s bg16 125.85s forwards, 0s bg_hide 143.9s forwards, 1s bg_show 144s forwards, 0s bg12 144s forwards, 5s bg_hide 148s forwards, 1s bg_show 153s forwards, 0s bg3 153s forwards, 0s bg4 154.8s forwards, 8s bg_hide 154.8s forwards, 0.8s bg_show 164s forwards, 0s bg3 165.5s forwards, 8.2s bg17 172.1s forwards, 8.2s bg_hide 172.1s forwards, 0s bg_show 180.3s forwards, 0s bg19 189.9s forwards, 5s bg3 195s forwards, 2s bg20 200.2s infinite alternate steps(30, end), 7.5s bg_hide 200.2s forwards, 0s bg_show 208.2s forwards, 2s bg20 208.2s infinite alternate steps(30, end), 0s bg3 210.4s forwards, 0s bg18 210.9s forwards, 3s bg_hide 210.9s forwards, 0s bg18 227s forwards, 2s bg_show 227s forwards, 0s bg3 229s forwards, 0s bg18 229.5s forwards, 6s bg_hide 229.5s forwards, 0s bg_show 248.2s forwards, 0s bg3 248.2s forwards, 5s bg_hide 248s forwards, 3s bg_show 256s forwards, 0s bg18 256s forwards, 2s bg_hide 258s forwards, 2s bg_show 262s forwards, 3s bg3 264s forwards, 10s bg_hide 276.2s forwards; } @keyframes bg_hide{ 100%{ opacity: 0; } } @keyframes bg_show{ 100%{ opacity: 1; } } @keyframes bg_semishow{ 100%{ opacity: 0.5; } } @keyframes bg1{ 0%{ opacity: 0; background: black; } 100%{ opacity: 1; background: black; } } @keyframes bg2{ 0%{ background: linear-gradient(135deg, #ECE9DF, #AEA43F, #29260C); } 20%{ background: linear-gradient(135deg, #ECE9DF, #AEA43F, #29260C); } 25%{ background: radial-gradient(ellipse at top, #ECE7E5, #685A2E, #685A2E); } 45%{ background: radial-gradient(ellipse at top, #ECE7E5, #685A2E, #685A2E); } 50%{ background: linear-gradient(-135deg, #BF9B50, #C5A254, #352C16); } 70%{ background: linear-gradient(-135deg, #BF9B50, #C5A254, #352C16); } 75%{ background: radial-gradient(#63562D, #452F1E, black); } 100%{ background: radial-gradient(#63562D, #452F1E, black); } } @keyframes bg3{ 100%{ background: black; } } @keyframes bg4{ 100%{ background: #ECE7E5; } } @keyframes bg5{ 100%{ background: #B1A58D; } } @keyframes bg6{ 0%{ background: radial-gradient(ellipse at top, #8A716C, #8C6C74, #594D4C, #37302F); } 10%{ background: radial-gradient(ellipse at top, #8A716C, #8C6C74, #594D4C, #37302F); } 16.6%{ background: radial-gradient(transparent 80%, #323234), linear-gradient(90deg, #697167 25%, #BFC7C2, #BFC7C2, #697167 60%, #BFC7C2); } 28%{ background: radial-gradient(transparent 80%, #323234), linear-gradient(90deg, #697167 25%, #BFC7C2, #BFC7C2, #697167 60%, #BFC7C2); } 33%{ background: linear-gradient(#C79C34, #C9BA9F 20%, #C9BA9F 55%, #A88D58, #402C20); } 45%{ background: linear-gradient(#C79C34, #C9BA9F 20%, #C9BA9F 55%, #A88D58, #402C20); } 50%{ background: linear-gradient(90deg, transparent, #2D1C2F), linear-gradient(90deg, transparent 20%, #3E2B42 23%, #3E2B42 30%, transparent 33%), linear-gradient(#4A374F, #7D5168 20%, #B3AFBC 55%, #B3AFBC 65%, #7D5168 80%, #533A45); } 61%{ background: linear-gradient(90deg, transparent, #2D1C2F), linear-gradient(90deg, transparent 20%, #3E2B42 23%, #3E2B42 30%, transparent 33%), linear-gradient(#4A374F, #7D5168 20%, #B3AFBC 55%, #B3AFBC 65%, #7D5168 80%, #533A45); } 66.6%{ background: radial-gradient(ellipse at 50% 20%, #C9CDC6 10%, #A89F80, #5A5D44, #37302F); } 78%{ background: radial-gradient(ellipse at 50% 20%, #C9CDC6 10%, #A89F80, #5A5D44, #37302F); } 83.3%{ background: radial-gradient(ellipse at top, transparent, transparent, #150613 150%), linear-gradient(#BCAFB8 15%, #C9BA9F 35%, #C79C34 50%, #9E6E43 70%, #34142F); } 95%{ background: radial-gradient(ellipse at top, transparent, transparent, #150613 150%), linear-gradient(#BCAFB8 15%, #C9BA9F 35%, #C79C34 50%, #9E6E43 70%, #34142F); } 100%{ background: radial-gradient(farthest-side at 50% 10%, #B6A7A4, #7D6C66); } } @keyframes bg7{ 100%{ background: radial-gradient(ellipse at top, #8A716C, #8C6C74, #594D4C, #37302F); } } @keyframes bg8{ 100%{ background: radial-gradient(#C6926C 30%, #8C5C3D 70%, #452F1E, black); } } @keyframes bg9{ 100%{ background: radial-gradient(farthest-side at 50% 25%, #BAAE9D, #5E513B, #15100D 100%, black 115%); } } @keyframes bg10{ 0%{ background: radial-gradient(#152016, #0E0D0C); } 37.4%{ background: radial-gradient(#152016, #0E0D0C); } 37.5%{ background: radial-gradient(#111918, #0D100E); } 74.5%{ background: radial-gradient(#111918, #0D100E); } 75%{ background: radial-gradient(#181310, #130E0C); } 99.5%{ background: radial-gradient(#181310, #130E0C); } 100%{ background: #0E100E; } } @keyframes bg11{ 100%{ background: radial-gradient(transparent 70%, black 115%), repeating-conic-gradient( #A6984A 0deg, #2E260E 45deg, #3F2612 90deg, #1E1204 135deg, #2C2609 180deg, #251F06 225deg, #685D2D 270deg, #6C6024 315deg, #A6984A 360deg); } } @keyframes bg12{ 100%{ background: radial-gradient(#C6926C 30%, #8C5C3D 70%, #452F1E, black); } } @keyframes bg13{ 100%{ background: radial-gradient(ellipse at 100% 0%, #7878A2, transparent 40%), radial-gradient(ellipse at 90% 35%, #8A6FA4, #AA82AA 15%, transparent 40%), radial-gradient(ellipse at 45% 45%, #C99BA9 15%, transparent 40%), radial-gradient(ellipse at 85% 70%, #BE79A3 5%, transparent 20%), radial-gradient(ellipse at 0% 50%, #D2D3C4, #B6AFAA 150%); } } @keyframes bg14{ 0%{ background: radial-gradient(#242027, #1B1418); } 37.4%{ background: radial-gradient(#242027, #1B1418); } 37.5%{ background: radial-gradient(#131F1D, #1B1418); } 74.5%{ background: radial-gradient(#131F1D, #1B1418); } 75%{ background: linear-gradient(-90deg, #233A4B, #0F111B); } 99.5%{ background: linear-gradient(-90deg, #233A4B, #0F111B); } 100%{ background: radial-gradient(transparent, black 300%), linear-gradient(150deg, #485539, #2F4B34, #212819 90%, #1E261A); } } @keyframes bg15{ 0%{ background: #130B12 } 37.4%{ background: #130B12 } 37.5%{ background: radial-gradient(#212B2A, #1E2A29); } 74.5%{ background: radial-gradient(#212B2A, #1E2A29); } 75%{ background: #272625 } 99.5%{ background: #272625 } 100%{ background: linear-gradient(135deg, #252423, black); } } @keyframes bg16{ 0%{ background: #1A1827 } 37.4%{ background: #1A1827 } 37.5%{ background: #101819 } 74.5%{ background: #101819 } 75%{ background: #14110E } 99.5%{ background: #14110E } 100%{ background: black; } } @keyframes bg17{ 0%{ background: radial-gradient(ellipse at top, #8A716C, #8C6C74, #594D4C, #37302F); } 16.5%{ background: radial-gradient(ellipse at top, #8A716C, #8C6C74, #594D4C, #37302F); } 16.6%{ background: radial-gradient(transparent 80%, #323234), linear-gradient(90deg, #697167 25%, #BFC7C2, #BFC7C2, #697167 60%, #BFC7C2); } 32%{ background: radial-gradient(transparent 80%, #323234), linear-gradient(90deg, #697167 25%, #BFC7C2, #BFC7C2, #697167 60%, #BFC7C2); } 33%{ background: linear-gradient(#C79C34, #C9BA9F 20%, #C9BA9F 55%, #A88D58, #402C20); } 49%{ background: linear-gradient(#C79C34, #C9BA9F 20%, #C9BA9F 55%, #A88D58, #402C20); } 50%{ background: linear-gradient(90deg, transparent, #2D1C2F), linear-gradient(90deg, transparent 20%, #3E2B42 23%, #3E2B42 30%, transparent 33%), linear-gradient(#4A374F, #7D5168 20%, #B3AFBC 55%, #B3AFBC 65%, #7D5168 80%, #533A45); } 65%{ background: linear-gradient(90deg, transparent, #2D1C2F), linear-gradient(90deg, transparent 20%, #3E2B42 23%, #3E2B42 30%, transparent 33%), linear-gradient(#4A374F, #7D5168 20%, #B3AFBC 55%, #B3AFBC 65%, #7D5168 80%, #533A45); } 66.6%{ color: white; background: radial-gradient(transparent 80%, #323234), linear-gradient(90deg, #697167 25%, #BFC7C2, #BFC7C2, #697167 60%, #BFC7C2); } 82%{ color: white; background: radial-gradient(transparent 80%, #323234), linear-gradient(90deg, #697167 25%, #BFC7C2, #BFC7C2, #697167 60%, #BFC7C2); } 83.3%{ background: black; } } @keyframes bg18{ 100%{ background: #F8F3F0; } } @keyframes bg19{ 100%{ background: #1D1C1D; } } @keyframes bg20{ 0%{ background: #989798; } 20%{ background: #7D7C7D; } 30%{ background: #878687; } 35%{ background: #706F70; } 40%{ background: #7D7C7D; } 55%{ background: #878687; } 60%{ background: #A8A7A8; } 65%{ background: #7D7C7D; } 70%{ background: #989798; } 73%{ background: #706F70; } 80%{ background: #989798; } 95%{ background: #A8A7A8; } 100%{ background: #989798; } } @keyframes bg21{ 100%{ background: radial-gradient(ellipse at 50% 35%, transparent 70%, #C583A6 170%), radial-gradient(ellipse at top, #F9E7E8 25%, #F0CDC9, #ECAFB5, #DCACBA, #D08BA0); } } @keyframes bg22{ 100%{ background: radial-gradient(ellipse at 60% 40%, rgba(172,164,158,.5), transparent 40%),linear-gradient(217deg, rgba(170,154,164,.8), rgba(170,154,164,0) 70.71%),linear-gradient(127deg, rgba(126,163,140,.8), rgba(126,163,140,0) 70.71%),linear-gradient(336deg, rgba(117,69,87,.8), rgba(117,69,87,0) 70.71%), white; } } @keyframes bg_debug1{ 100%{ background: green; } } @keyframes bg_debug2{ 100%{ background: darkgreen; } } @keyframes bg_debug3{ 0%{ background: white; } 100%{ background: black; } } .base:hover #custom_popntube{ animation: 0s cp_filter1 11.0s forwards, 20s cp_filter0 11.5s forwards, 0s cp_filter2 39.3s forwards, 0s cp_filter0 42s forwards, 8.9s cp_filter4 65s forwards, 0s cp_filter3 73.9s forwards, 1s cp_filter0 84.6s forwards, 0s cp_filter5 153s forwards, 0s cp_filter0 154.8s forwards, 0s cp_filter6 178.8s forwards, 0.5s cp_filter0 180.3s forwards, 1s cp_filter7 189.9s forwards, 0s cp_filter8 208.2s forwards, 0s cp_filter5 210.4s forwards, 0s cp_filter0 210.9s forwards, 0s cp_filter6 229s forwards, 0s cp_filter0 229.5s forwards; } @keyframes cp_filter0{ 100%{ filter: grayscale(0) sepia(0) contrast(1) brightness(1) drop-shadow(2px 4px 6px black); } } @keyframes cp_filter1{ 100%{ filter: grayscale(0.75) sepia(0) contrast(1) brightness(0.5) drop-shadow(2px 4px 6px black); } } @keyframes cp_filter2{ 100%{ filter: grayscale(0.75) sepia(0) contrast(1) brightness(0.9) drop-shadow(2px 4px 6px black); } } @keyframes cp_filter3{ 100%{ filter: grayscale(0.9) sepia(0) contrast(2) brightness(1) drop-shadow(2px 4px 6px black); } } @keyframes cp_filter4{ 100%{ filter: grayscale(0) sepia(0.6) contrast(1) brightness(1) drop-shadow(2px 4px 6px black); } } @keyframes cp_filter5{ 100%{ filter: grayscale(1) brightness(0.8) contrast(6) drop-shadow(2px 4px 6px black); } } @keyframes cp_filter6{ 100%{ filter: grayscale(1) contrast(10) brightness(5) drop-shadow(2px 4px 6px black);; } } @keyframes cp_filter7{ 0%{ filter: invert(1) hue-rotate(222deg) brightness(0.7) contrast(2) drop-shadow(2px 4px 6px black); } 49%{ filter: invert(1) hue-rotate(222deg) brightness(0.7) contrast(2) drop-shadow(2px 4px 6px black); } 50%{ filter: invert(1) hue-rotate(10deg) contrast(0.8) drop-shadow(2px 4px 6px black); } 99%{ filter: invert(1) hue-rotate(10deg) contrast(0.8) drop-shadow(2px 4px 6px black); } 100%{ filter: grayscale(0) sepia(0) contrast(1) brightness(1) drop-shadow(2px 4px 6px black); } } @keyframes cp_filter8{ 100%{ filter: grayscale(1) drop-shadow(2px 4px 6px black); } } .container { width: 100%; height: 100%; } .circle-container { position: absolute; transform: translateY(-10vh); -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; } .circle-container .circle { width: 100%; height: 100%; border-radius: 50%; mix-blend-mode: screen; background-image: radial-gradient(white, white 10%, rgba(255, 255, 255, 0) 56%); -webkit-animation: fadein-frames 200ms infinite, scale-frames 2s infinite; animation: fadein-frames 200ms infinite, scale-frames 2s infinite; } .base:hover .circle-container .circle{ animation: 0s changecol_black 247s forwards, 0s changecol_white 257s forwards; } @keyframes changecol_black{ 100%{ background-image: radial-gradient(black, black 10%, rgba(0, 0, 0, 0) 56%); } } @keyframes changecol_white{ 100%{ background-image: radial-gradient(white, white 10%, rgba(255, 255, 255, 0) 56%); } } @-webkit-keyframes fade-frames { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } } @keyframes fade-frames { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } } @-webkit-keyframes scale-frames { 0% { transform: scale3d(0.4, 0.4, 1); } 50% { transform: scale3d(2.2, 2.2, 1); } 100% { transform: scale3d(0.4, 0.4, 1); } } @keyframes scale-frames { 0% { transform: scale3d(0.4, 0.4, 1); } 50% { transform: scale3d(2.2, 2.2, 1); } 100% { transform: scale3d(0.4, 0.4, 1); } } .circle-container:nth-child(1) { width: 10px; height: 10px; -webkit-animation-name: move-frames-1; animation-name: move-frames-1; -webkit-animation-duration: 8060ms; animation-duration: 8060ms; -webkit-animation-delay: 2762ms; animation-delay: 2762ms; } @-webkit-keyframes move-frames-1 { from { transform: translate3d(50vw, 110vh, 0); } to { transform: translate3d(60vw, -132vh, 0); } } @keyframes move-frames-1 { from { transform: translate3d(50vw, 110vh, 0); } to { transform: translate3d(60vw, -132vh, 0); } } .circle-container:nth-child(1) .circle { -webkit-animation-delay: 1579ms; animation-delay: 1579ms; } .circle-container:nth-child(2) { width: 10px; height: 10px; -webkit-animation-name: move-frames-2; animation-name: move-frames-2; -webkit-animation-duration: 7943ms; animation-duration: 7943ms; -webkit-animation-delay: 6559ms; animation-delay: 6559ms; } @-webkit-keyframes move-frames-2 { from { transform: translate3d(58vw, 108vh, 0); } to { transform: translate3d(15vw, -109vh, 0); } } @keyframes move-frames-2 { from { transform: translate3d(58vw, 108vh, 0); } to { transform: translate3d(15vw, -109vh, 0); } } .circle-container:nth-child(2) .circle { -webkit-animation-delay: 2136ms; animation-delay: 2136ms; } .circle-container:nth-child(3) { width: 7px; height: 7px; -webkit-animation-name: move-frames-3; animation-name: move-frames-3; -webkit-animation-duration: 7123ms; animation-duration: 7123ms; -webkit-animation-delay: 1190ms; animation-delay: 1190ms; } @-webkit-keyframes move-frames-3 { from { transform: translate3d(91vw, 106vh, 0); } to { transform: translate3d(42vw, -125vh, 0); } } @keyframes move-frames-3 { from { transform: translate3d(91vw, 106vh, 0); } to { transform: translate3d(42vw, -125vh, 0); } } .circle-container:nth-child(3) .circle { -webkit-animation-delay: 2994ms; animation-delay: 2994ms; } .circle-container:nth-child(4) { width: 2px; height: 2px; -webkit-animation-name: move-frames-4; animation-name: move-frames-4; -webkit-animation-duration: 7648ms; animation-duration: 7648ms; -webkit-animation-delay: 7473ms; animation-delay: 7473ms; } @-webkit-keyframes move-frames-4 { from { transform: translate3d(50vw, 110vh, 0); } to { transform: translate3d(48vw, -115vh, 0); } } @keyframes move-frames-4 { from { transform: translate3d(50vw, 110vh, 0); } to { transform: translate3d(48vw, -115vh, 0); } } .circle-container:nth-child(4) .circle { -webkit-animation-delay: 1837ms; animation-delay: 1837ms; } .circle-container:nth-child(5) { width: 5px; height: 5px; -webkit-animation-name: move-frames-5; animation-name: move-frames-5; -webkit-animation-duration: 8335ms; animation-duration: 8335ms; -webkit-animation-delay: 148ms; animation-delay: 148ms; } @-webkit-keyframes move-frames-5 { from { transform: translate3d(79vw, 108vh, 0); } to { transform: translate3d(5vw, -120vh, 0); } } @keyframes move-frames-5 { from { transform: translate3d(79vw, 108vh, 0); } to { transform: translate3d(5vw, -120vh, 0); } } .circle-container:nth-child(5) .circle { -webkit-animation-delay: 1448ms; animation-delay: 1448ms; } .circle-container:nth-child(6) { width: 6px; height: 6px; -webkit-animation-name: move-frames-6; animation-name: move-frames-6; -webkit-animation-duration: 10903ms; animation-duration: 10903ms; -webkit-animation-delay: 5288ms; animation-delay: 5288ms; } @-webkit-keyframes move-frames-6 { from { transform: translate3d(69vw, 107vh, 0); } to { transform: translate3d(16vw, -137vh, 0); } } @keyframes move-frames-6 { from { transform: translate3d(69vw, 107vh, 0); } to { transform: translate3d(16vw, -137vh, 0); } } .circle-container:nth-child(6) .circle { -webkit-animation-delay: 382ms; animation-delay: 382ms; } .circle-container:nth-child(7) { width: 9px; height: 9px; -webkit-animation-name: move-frames-7; animation-name: move-frames-7; -webkit-animation-duration: 10749ms; animation-duration: 10749ms; -webkit-animation-delay: 2895ms; animation-delay: 2895ms; } @-webkit-keyframes move-frames-7 { from { transform: translate3d(76vw, 110vh, 0); } to { transform: translate3d(29vw, -115vh, 0); } } @keyframes move-frames-7 { from { transform: translate3d(76vw, 110vh, 0); } to { transform: translate3d(29vw, -115vh, 0); } } .circle-container:nth-child(7) .circle { -webkit-animation-delay: 3864ms; animation-delay: 3864ms; } .circle-container:nth-child(8) { width: 6px; height: 6px; -webkit-animation-name: move-frames-8; animation-name: move-frames-8; -webkit-animation-duration: 10092ms; animation-duration: 10092ms; -webkit-animation-delay: 10569ms; animation-delay: 10569ms; } @-webkit-keyframes move-frames-8 { from { transform: translate3d(24vw, 107vh, 0); } to { transform: translate3d(40vw, -124vh, 0); } } @keyframes move-frames-8 { from { transform: translate3d(24vw, 107vh, 0); } to { transform: translate3d(40vw, -124vh, 0); } } .circle-container:nth-child(8) .circle { -webkit-animation-delay: 2109ms; animation-delay: 2109ms; } .circle-container:nth-child(9) { width: 7px; height: 7px; -webkit-animation-name: move-frames-9; animation-name: move-frames-9; -webkit-animation-duration: 7148ms; animation-duration: 7148ms; -webkit-animation-delay: 2432ms; animation-delay: 2432ms; } @-webkit-keyframes move-frames-9 { from { transform: translate3d(95vw, 109vh, 0); } to { transform: translate3d(49vw, -129vh, 0); } } @keyframes move-frames-9 { from { transform: translate3d(95vw, 109vh, 0); } to { transform: translate3d(49vw, -129vh, 0); } } .circle-container:nth-child(9) .circle { -webkit-animation-delay: 3375ms; animation-delay: 3375ms; } .circle-container:nth-child(10) { width: 4px; height: 4px; -webkit-animation-name: move-frames-10; animation-name: move-frames-10; -webkit-animation-duration: 8680ms; animation-duration: 8680ms; -webkit-animation-delay: 8763ms; animation-delay: 8763ms; } @-webkit-keyframes move-frames-10 { from { transform: translate3d(32vw, 106vh, 0); } to { transform: translate3d(47vw, -134vh, 0); } } @keyframes move-frames-10 { from { transform: translate3d(32vw, 106vh, 0); } to { transform: translate3d(47vw, -134vh, 0); } } .circle-container:nth-child(10) .circle { -webkit-animation-delay: 68ms; animation-delay: 68ms; } .circle-container:nth-child(11) { width: 3px; height: 3px; -webkit-animation-name: move-frames-11; animation-name: move-frames-11; -webkit-animation-duration: 10289ms; animation-duration: 10289ms; -webkit-animation-delay: 8389ms; animation-delay: 8389ms; } @-webkit-keyframes move-frames-11 { from { transform: translate3d(98vw, 103vh, 0); } to { transform: translate3d(11vw, -108vh, 0); } } @keyframes move-frames-11 { from { transform: translate3d(98vw, 103vh, 0); } to { transform: translate3d(11vw, -108vh, 0); } } .circle-container:nth-child(11) .circle { -webkit-animation-delay: 2328ms; animation-delay: 2328ms; } .circle-container:nth-child(12) { width: 1px; height: 1px; -webkit-animation-name: move-frames-12; animation-name: move-frames-12; -webkit-animation-duration: 7226ms; animation-duration: 7226ms; -webkit-animation-delay: 6475ms; animation-delay: 6475ms; } @-webkit-keyframes move-frames-12 { from { transform: translate3d(9vw, 101vh, 0); } to { transform: translate3d(56vw, -129vh, 0); } } @keyframes move-frames-12 { from { transform: translate3d(9vw, 101vh, 0); } to { transform: translate3d(56vw, -129vh, 0); } } .circle-container:nth-child(12) .circle { -webkit-animation-delay: 2218ms; animation-delay: 2218ms; } .circle-container:nth-child(13) { width: 9px; height: 9px; -webkit-animation-name: move-frames-13; animation-name: move-frames-13; -webkit-animation-duration: 7357ms; animation-duration: 7357ms; -webkit-animation-delay: 901ms; animation-delay: 901ms; } @-webkit-keyframes move-frames-13 { from { transform: translate3d(47vw, 104vh, 0); } to { transform: translate3d(63vw, -125vh, 0); } } @keyframes move-frames-13 { from { transform: translate3d(47vw, 104vh, 0); } to { transform: translate3d(63vw, -125vh, 0); } } .circle-container:nth-child(13) .circle { -webkit-animation-delay: 1313ms; animation-delay: 1313ms; } .circle-container:nth-child(14) { width: 10px; height: 10px; -webkit-animation-name: move-frames-14; animation-name: move-frames-14; -webkit-animation-duration: 8828ms; animation-duration: 8828ms; -webkit-animation-delay: 6567ms; animation-delay: 6567ms; } @-webkit-keyframes move-frames-14 { from { transform: translate3d(38vw, 103vh, 0); } to { transform: translate3d(84vw, -120vh, 0); } } @keyframes move-frames-14 { from { transform: translate3d(38vw, 103vh, 0); } to { transform: translate3d(84vw, -120vh, 0); } } .circle-container:nth-child(14) .circle { -webkit-animation-delay: 2640ms; animation-delay: 2640ms; } .circle-container:nth-child(15) { width: 10px; height: 10px; -webkit-animation-name: move-frames-15; animation-name: move-frames-15; -webkit-animation-duration: 10269ms; animation-duration: 10269ms; -webkit-animation-delay: 8104ms; animation-delay: 8104ms; } @-webkit-keyframes move-frames-15 { from { transform: translate3d(25vw, 109vh, 0); } to { transform: translate3d(13vw, -112vh, 0); } } @keyframes move-frames-15 { from { transform: translate3d(25vw, 109vh, 0); } to { transform: translate3d(13vw, -112vh, 0); } } .circle-container:nth-child(15) .circle { -webkit-animation-delay: 1626ms; animation-delay: 1626ms; } .circle-container:nth-child(16) { width: 6px; height: 6px; -webkit-animation-name: move-frames-16; animation-name: move-frames-16; -webkit-animation-duration: 10688ms; animation-duration: 10688ms; -webkit-animation-delay: 4299ms; animation-delay: 4299ms; } @-webkit-keyframes move-frames-16 { from { transform: translate3d(24vw, 102vh, 0); } to { transform: translate3d(33vw, -132vh, 0); } } @keyframes move-frames-16 { from { transform: translate3d(24vw, 102vh, 0); } to { transform: translate3d(33vw, -132vh, 0); } } .circle-container:nth-child(16) .circle { -webkit-animation-delay: 1018ms; animation-delay: 1018ms; } .circle-container:nth-child(17) { width: 9px; height: 9px; -webkit-animation-name: move-frames-17; animation-name: move-frames-17; -webkit-animation-duration: 7916ms; animation-duration: 7916ms; -webkit-animation-delay: 8036ms; animation-delay: 8036ms; } @-webkit-keyframes move-frames-17 { from { transform: translate3d(38vw, 101vh, 0); } to { transform: translate3d(38vw, -128vh, 0); } } @keyframes move-frames-17 { from { transform: translate3d(38vw, 101vh, 0); } to { transform: translate3d(38vw, -128vh, 0); } } .circle-container:nth-child(17) .circle { -webkit-animation-delay: 2968ms; animation-delay: 2968ms; } .circle-container:nth-child(18) { width: 2px; height: 2px; -webkit-animation-name: move-frames-18; animation-name: move-frames-18; -webkit-animation-duration: 9010ms; animation-duration: 9010ms; -webkit-animation-delay: 8919ms; animation-delay: 8919ms; } @-webkit-keyframes move-frames-18 { from { transform: translate3d(67vw, 102vh, 0); } to { transform: translate3d(75vw, -132vh, 0); } } @keyframes move-frames-18 { from { transform: translate3d(67vw, 102vh, 0); } to { transform: translate3d(75vw, -132vh, 0); } } .circle-container:nth-child(18) .circle { -webkit-animation-delay: 1887ms; animation-delay: 1887ms; } .circle-container:nth-child(19) { width: 2px; height: 2px; -webkit-animation-name: move-frames-19; animation-name: move-frames-19; -webkit-animation-duration: 10321ms; animation-duration: 10321ms; -webkit-animation-delay: 6650ms; animation-delay: 6650ms; } @-webkit-keyframes move-frames-19 { from { transform: translate3d(36vw, 102vh, 0); } to { transform: translate3d(33vw, -110vh, 0); } } @keyframes move-frames-19 { from { transform: translate3d(36vw, 102vh, 0); } to { transform: translate3d(33vw, -110vh, 0); } } .circle-container:nth-child(19) .circle { -webkit-animation-delay: 330ms; animation-delay: 330ms; } .circle-container:nth-child(20) { width: 7px; height: 7px; -webkit-animation-name: move-frames-20; animation-name: move-frames-20; -webkit-animation-duration: 7610ms; animation-duration: 7610ms; -webkit-animation-delay: 3273ms; animation-delay: 3273ms; } @-webkit-keyframes move-frames-20 { from { transform: translate3d(33vw, 107vh, 0); } to { transform: translate3d(27vw, -121vh, 0); } } @keyframes move-frames-20 { from { transform: translate3d(33vw, 107vh, 0); } to { transform: translate3d(27vw, -121vh, 0); } } .circle-container:nth-child(20) .circle { -webkit-animation-delay: 798ms; animation-delay: 798ms; } .circle-container:nth-child(21) { width: 2px; height: 2px; -webkit-animation-name: move-frames-21; animation-name: move-frames-21; -webkit-animation-duration: 10798ms; animation-duration: 10798ms; -webkit-animation-delay: 955ms; animation-delay: 955ms; } @-webkit-keyframes move-frames-21 { from { transform: translate3d(98vw, 103vh, 0); } to { transform: translate3d(99vw, -121vh, 0); } } @keyframes move-frames-21 { from { transform: translate3d(98vw, 103vh, 0); } to { transform: translate3d(99vw, -121vh, 0); } } .circle-container:nth-child(21) .circle { -webkit-animation-delay: 808ms; animation-delay: 808ms; } .circle-container:nth-child(22) { width: 1px; height: 1px; -webkit-animation-name: move-frames-22; animation-name: move-frames-22; -webkit-animation-duration: 7094ms; animation-duration: 7094ms; -webkit-animation-delay: 3847ms; animation-delay: 3847ms; } @-webkit-keyframes move-frames-22 { from { transform: translate3d(74vw, 109vh, 0); } to { transform: translate3d(15vw, -139vh, 0); } } @keyframes move-frames-22 { from { transform: translate3d(74vw, 109vh, 0); } to { transform: translate3d(15vw, -139vh, 0); } } .circle-container:nth-child(22) .circle { -webkit-animation-delay: 3685ms; animation-delay: 3685ms; } .circle-container:nth-child(23) { width: 10px; height: 10px; -webkit-animation-name: move-frames-23; animation-name: move-frames-23; -webkit-animation-duration: 9980ms; animation-duration: 9980ms; -webkit-animation-delay: 3571ms; animation-delay: 3571ms; } @-webkit-keyframes move-frames-23 { from { transform: translate3d(61vw, 106vh, 0); } to { transform: translate3d(26vw, -112vh, 0); } } @keyframes move-frames-23 { from { transform: translate3d(61vw, 106vh, 0); } to { transform: translate3d(26vw, -112vh, 0); } } .circle-container:nth-child(23) .circle { -webkit-animation-delay: 929ms; animation-delay: 929ms; } .circle-container:nth-child(24) { width: 5px; height: 5px; -webkit-animation-name: move-frames-24; animation-name: move-frames-24; -webkit-animation-duration: 8489ms; animation-duration: 8489ms; -webkit-animation-delay: 1010ms; animation-delay: 1010ms; } @-webkit-keyframes move-frames-24 { from { transform: translate3d(6vw, 109vh, 0); } to { transform: translate3d(36vw, -119vh, 0); } } @keyframes move-frames-24 { from { transform: translate3d(6vw, 109vh, 0); } to { transform: translate3d(36vw, -119vh, 0); } } .circle-container:nth-child(24) .circle { -webkit-animation-delay: 2923ms; animation-delay: 2923ms; } .circle-container:nth-child(25) { width: 8px; height: 8px; -webkit-animation-name: move-frames-25; animation-name: move-frames-25; -webkit-animation-duration: 7980ms; animation-duration: 7980ms; -webkit-animation-delay: 6015ms; animation-delay: 6015ms; } @-webkit-keyframes move-frames-25 { from { transform: translate3d(96vw, 110vh, 0); } to { transform: translate3d(32vw, -112vh, 0); } } @keyframes move-frames-25 { from { transform: translate3d(96vw, 110vh, 0); } to { transform: translate3d(32vw, -112vh, 0); } } .circle-container:nth-child(25) .circle { -webkit-animation-delay: 3652ms; animation-delay: 3652ms; } .circle-container:nth-child(26) { width: 4px; height: 4px; -webkit-animation-name: move-frames-26; animation-name: move-frames-26; -webkit-animation-duration: 8162ms; animation-duration: 8162ms; -webkit-animation-delay: 4076ms; animation-delay: 4076ms; } @-webkit-keyframes move-frames-26 { from { transform: translate3d(44vw, 103vh, 0); } to { transform: translate3d(91vw, -124vh, 0); } } @keyframes move-frames-26 { from { transform: translate3d(44vw, 103vh, 0); } to { transform: translate3d(91vw, -124vh, 0); } } .circle-container:nth-child(26) .circle { -webkit-animation-delay: 504ms; animation-delay: 504ms; } .circle-container:nth-child(27) { width: 1px; height: 1px; -webkit-animation-name: move-frames-27; animation-name: move-frames-27; -webkit-animation-duration: 7396ms; animation-duration: 7396ms; -webkit-animation-delay: 2102ms; animation-delay: 2102ms; } @-webkit-keyframes move-frames-27 { from { transform: translate3d(81vw, 102vh, 0); } to { transform: translate3d(83vw, -110vh, 0); } } @keyframes move-frames-27 { from { transform: translate3d(81vw, 102vh, 0); } to { transform: translate3d(83vw, -110vh, 0); } } .circle-container:nth-child(27) .circle { -webkit-animation-delay: 2536ms; animation-delay: 2536ms; } .circle-container:nth-child(28) { width: 9px; height: 9px; -webkit-animation-name: move-frames-28; animation-name: move-frames-28; -webkit-animation-duration: 8221ms; animation-duration: 8221ms; -webkit-animation-delay: 4851ms; animation-delay: 4851ms; } @-webkit-keyframes move-frames-28 { from { transform: translate3d(41vw, 107vh, 0); } to { transform: translate3d(30vw, -113vh, 0); } } @keyframes move-frames-28 { from { transform: translate3d(41vw, 107vh, 0); } to { transform: translate3d(30vw, -113vh, 0); } } .circle-container:nth-child(28) .circle { -webkit-animation-delay: 1772ms; animation-delay: 1772ms; } .circle-container:nth-child(29) { width: 4px; height: 4px; -webkit-animation-name: move-frames-29; animation-name: move-frames-29; -webkit-animation-duration: 8188ms; animation-duration: 8188ms; -webkit-animation-delay: 993ms; animation-delay: 993ms; } @-webkit-keyframes move-frames-29 { from { transform: translate3d(28vw, 102vh, 0); } to { transform: translate3d(41vw, -104vh, 0); } } @keyframes move-frames-29 { from { transform: translate3d(28vw, 102vh, 0); } to { transform: translate3d(41vw, -104vh, 0); } } .circle-container:nth-child(29) .circle { -webkit-animation-delay: 650ms; animation-delay: 650ms; } .circle-container:nth-child(30) { width: 10px; height: 10px; -webkit-animation-name: move-frames-30; animation-name: move-frames-30; -webkit-animation-duration: 7639ms; animation-duration: 7639ms; -webkit-animation-delay: 837ms; animation-delay: 837ms; } @-webkit-keyframes move-frames-30 { from { transform: translate3d(100vw, 101vh, 0); } to { transform: translate3d(46vw, -129vh, 0); } } @keyframes move-frames-30 { from { transform: translate3d(100vw, 101vh, 0); } to { transform: translate3d(46vw, -129vh, 0); } } .circle-container:nth-child(30) .circle { -webkit-animation-delay: 3189ms; animation-delay: 3189ms; } .circle-container:nth-child(31) { width: 7px; height: 7px; -webkit-animation-name: move-frames-31; animation-name: move-frames-31; -webkit-animation-duration: 9591ms; animation-duration: 9591ms; -webkit-animation-delay: 10399ms; animation-delay: 10399ms; } @-webkit-keyframes move-frames-31 { from { transform: translate3d(98vw, 104vh, 0); } to { transform: translate3d(35vw, -120vh, 0); } } @keyframes move-frames-31 { from { transform: translate3d(98vw, 104vh, 0); } to { transform: translate3d(35vw, -120vh, 0); } } .circle-container:nth-child(31) .circle { -webkit-animation-delay: 2730ms; animation-delay: 2730ms; } .circle-container:nth-child(32) { width: 7px; height: 7px; -webkit-animation-name: move-frames-32; animation-name: move-frames-32; -webkit-animation-duration: 8709ms; animation-duration: 8709ms; -webkit-animation-delay: 3841ms; animation-delay: 3841ms; } @-webkit-keyframes move-frames-32 { from { transform: translate3d(33vw, 101vh, 0); } to { transform: translate3d(1vw, -127vh, 0); } } @keyframes move-frames-32 { from { transform: translate3d(33vw, 101vh, 0); } to { transform: translate3d(1vw, -127vh, 0); } } .circle-container:nth-child(32) .circle { -webkit-animation-delay: 2677ms; animation-delay: 2677ms; } .circle-container:nth-child(33) { width: 3px; height: 3px; -webkit-animation-name: move-frames-33; animation-name: move-frames-33; -webkit-animation-duration: 8593ms; animation-duration: 8593ms; -webkit-animation-delay: 1456ms; animation-delay: 1456ms; } @-webkit-keyframes move-frames-33 { from { transform: translate3d(69vw, 101vh, 0); } to { transform: translate3d(11vw, -108vh, 0); } } @keyframes move-frames-33 { from { transform: translate3d(69vw, 101vh, 0); } to { transform: translate3d(11vw, -108vh, 0); } } .circle-container:nth-child(33) .circle { -webkit-animation-delay: 2700ms; animation-delay: 2700ms; } .circle-container:nth-child(34) { width: 5px; height: 5px; -webkit-animation-name: move-frames-34; animation-name: move-frames-34; -webkit-animation-duration: 8324ms; animation-duration: 8324ms; -webkit-animation-delay: 8586ms; animation-delay: 8586ms; } @-webkit-keyframes move-frames-34 { from { transform: translate3d(23vw, 105vh, 0); } to { transform: translate3d(88vw, -135vh, 0); } } @keyframes move-frames-34 { from { transform: translate3d(23vw, 105vh, 0); } to { transform: translate3d(88vw, -135vh, 0); } } .circle-container:nth-child(34) .circle { -webkit-animation-delay: 3337ms; animation-delay: 3337ms; } .circle-container:nth-child(35) { width: 8px; height: 8px; -webkit-animation-name: move-frames-35; animation-name: move-frames-35; -webkit-animation-duration: 8396ms; animation-duration: 8396ms; -webkit-animation-delay: 379ms; animation-delay: 379ms; } @-webkit-keyframes move-frames-35 { from { transform: translate3d(51vw, 109vh, 0); } to { transform: translate3d(12vw, -127vh, 0); } } @keyframes move-frames-35 { from { transform: translate3d(51vw, 109vh, 0); } to { transform: translate3d(12vw, -127vh, 0); } } .circle-container:nth-child(35) .circle { -webkit-animation-delay: 579ms; animation-delay: 579ms; } .circle-container:nth-child(36) { width: 10px; height: 10px; -webkit-animation-name: move-frames-36; animation-name: move-frames-36; -webkit-animation-duration: 9043ms; animation-duration: 9043ms; -webkit-animation-delay: 10130ms; animation-delay: 10130ms; } @-webkit-keyframes move-frames-36 { from { transform: translate3d(44vw, 110vh, 0); } to { transform: translate3d(55vw, -114vh, 0); } } @keyframes move-frames-36 { from { transform: translate3d(44vw, 110vh, 0); } to { transform: translate3d(55vw, -114vh, 0); } } .circle-container:nth-child(36) .circle { -webkit-animation-delay: 2581ms; animation-delay: 2581ms; } .circle-container:nth-child(37) { width: 8px; height: 8px; -webkit-animation-name: move-frames-37; animation-name: move-frames-37; -webkit-animation-duration: 9642ms; animation-duration: 9642ms; -webkit-animation-delay: 8215ms; animation-delay: 8215ms; } @-webkit-keyframes move-frames-37 { from { transform: translate3d(97vw, 109vh, 0); } to { transform: translate3d(3vw, -121vh, 0); } } @keyframes move-frames-37 { from { transform: translate3d(97vw, 109vh, 0); } to { transform: translate3d(3vw, -121vh, 0); } } .circle-container:nth-child(37) .circle { -webkit-animation-delay: 703ms; animation-delay: 703ms; } .circle-container:nth-child(38) { width: 5px; height: 5px; -webkit-animation-name: move-frames-38; animation-name: move-frames-38; -webkit-animation-duration: 9215ms; animation-duration: 9215ms; -webkit-animation-delay: 3540ms; animation-delay: 3540ms; } @-webkit-keyframes move-frames-38 { from { transform: translate3d(83vw, 105vh, 0); } to { transform: translate3d(32vw, -114vh, 0); } } @keyframes move-frames-38 { from { transform: translate3d(83vw, 105vh, 0); } to { transform: translate3d(32vw, -114vh, 0); } } .circle-container:nth-child(38) .circle { -webkit-animation-delay: 574ms; animation-delay: 574ms; } .circle-container:nth-child(39) { width: 5px; height: 5px; -webkit-animation-name: move-frames-39; animation-name: move-frames-39; -webkit-animation-duration: 9078ms; animation-duration: 9078ms; -webkit-animation-delay: 602ms; animation-delay: 602ms; } @-webkit-keyframes move-frames-39 { from { transform: translate3d(79vw, 103vh, 0); } to { transform: translate3d(55vw, -120vh, 0); } } @keyframes move-frames-39 { from { transform: translate3d(79vw, 103vh, 0); } to { transform: translate3d(55vw, -120vh, 0); } } .circle-container:nth-child(39) .circle { -webkit-animation-delay: 2906ms; animation-delay: 2906ms; } .circle-container:nth-child(40) { width: 1px; height: 1px; -webkit-animation-name: move-frames-40; animation-name: move-frames-40; -webkit-animation-duration: 7293ms; animation-duration: 7293ms; -webkit-animation-delay: 7673ms; animation-delay: 7673ms; } @-webkit-keyframes move-frames-40 { from { transform: translate3d(21vw, 107vh, 0); } to { transform: translate3d(10vw, -108vh, 0); } } @keyframes move-frames-40 { from { transform: translate3d(21vw, 107vh, 0); } to { transform: translate3d(10vw, -108vh, 0); } } .circle-container:nth-child(40) .circle { -webkit-animation-delay: 1440ms; animation-delay: 1440ms; } .circle-container:nth-child(41) { width: 10px; height: 10px; -webkit-animation-name: move-frames-41; animation-name: move-frames-41; -webkit-animation-duration: 10767ms; animation-duration: 10767ms; -webkit-animation-delay: 1477ms; animation-delay: 1477ms; } @-webkit-keyframes move-frames-41 { from { transform: translate3d(5vw, 105vh, 0); } to { transform: translate3d(38vw, -118vh, 0); } } @keyframes move-frames-41 { from { transform: translate3d(5vw, 105vh, 0); } to { transform: translate3d(38vw, -118vh, 0); } } .circle-container:nth-child(41) .circle { -webkit-animation-delay: 3784ms; animation-delay: 3784ms; } .circle-container:nth-child(42) { width: 5px; height: 5px; -webkit-animation-name: move-frames-42; animation-name: move-frames-42; -webkit-animation-duration: 10771ms; animation-duration: 10771ms; -webkit-animation-delay: 5188ms; animation-delay: 5188ms; } @-webkit-keyframes move-frames-42 { from { transform: translate3d(22vw, 102vh, 0); } to { transform: translate3d(15vw, -132vh, 0); } } @keyframes move-frames-42 { from { transform: translate3d(22vw, 102vh, 0); } to { transform: translate3d(15vw, -132vh, 0); } } .circle-container:nth-child(42) .circle { -webkit-animation-delay: 1320ms; animation-delay: 1320ms; } .circle-container:nth-child(43) { width: 4px; height: 4px; -webkit-animation-name: move-frames-43; animation-name: move-frames-43; -webkit-animation-duration: 9045ms; animation-duration: 9045ms; -webkit-animation-delay: 8545ms; animation-delay: 8545ms; } @-webkit-keyframes move-frames-43 { from { transform: translate3d(30vw, 106vh, 0); } to { transform: translate3d(2vw, -134vh, 0); } } @keyframes move-frames-43 { from { transform: translate3d(30vw, 106vh, 0); } to { transform: translate3d(2vw, -134vh, 0); } } .circle-container:nth-child(43) .circle { -webkit-animation-delay: 2334ms; animation-delay: 2334ms; } .circle-container:nth-child(44) { width: 10px; height: 10px; -webkit-animation-name: move-frames-44; animation-name: move-frames-44; -webkit-animation-duration: 9499ms; animation-duration: 9499ms; -webkit-animation-delay: 3661ms; animation-delay: 3661ms; } @-webkit-keyframes move-frames-44 { from { transform: translate3d(35vw, 108vh, 0); } to { transform: translate3d(7vw, -120vh, 0); } } @keyframes move-frames-44 { from { transform: translate3d(35vw, 108vh, 0); } to { transform: translate3d(7vw, -120vh, 0); } } .circle-container:nth-child(44) .circle { -webkit-animation-delay: 3106ms; animation-delay: 3106ms; } .circle-container:nth-child(45) { width: 7px; height: 7px; -webkit-animation-name: move-frames-45; animation-name: move-frames-45; -webkit-animation-duration: 10872ms; animation-duration: 10872ms; -webkit-animation-delay: 8085ms; animation-delay: 8085ms; } @-webkit-keyframes move-frames-45 { from { transform: translate3d(52vw, 101vh, 0); } to { transform: translate3d(36vw, -129vh, 0); } } @keyframes move-frames-45 { from { transform: translate3d(52vw, 101vh, 0); } to { transform: translate3d(36vw, -129vh, 0); } } .circle-container:nth-child(45) .circle { -webkit-animation-delay: 2518ms; animation-delay: 2518ms; } .circle-container:nth-child(46) { width: 8px; height: 8px; -webkit-animation-name: move-frames-46; animation-name: move-frames-46; -webkit-animation-duration: 9677ms; animation-duration: 9677ms; -webkit-animation-delay: 8839ms; animation-delay: 8839ms; } @-webkit-keyframes move-frames-46 { from { transform: translate3d(72vw, 108vh, 0); } to { transform: translate3d(14vw, -119vh, 0); } } @keyframes move-frames-46 { from { transform: translate3d(72vw, 108vh, 0); } to { transform: translate3d(14vw, -119vh, 0); } } .circle-container:nth-child(46) .circle { -webkit-animation-delay: 2030ms; animation-delay: 2030ms; } .circle-container:nth-child(47) { width: 4px; height: 4px; -webkit-animation-name: move-frames-47; animation-name: move-frames-47; -webkit-animation-duration: 9338ms; animation-duration: 9338ms; -webkit-animation-delay: 6328ms; animation-delay: 6328ms; } @-webkit-keyframes move-frames-47 { from { transform: translate3d(10vw, 102vh, 0); } to { transform: translate3d(65vw, -117vh, 0); } } @keyframes move-frames-47 { from { transform: translate3d(10vw, 102vh, 0); } to { transform: translate3d(65vw, -117vh, 0); } } .circle-container:nth-child(47) .circle { -webkit-animation-delay: 2026ms; animation-delay: 2026ms; } .circle-container:nth-child(48) { width: 9px; height: 9px; -webkit-animation-name: move-frames-48; animation-name: move-frames-48; -webkit-animation-duration: 10992ms; animation-duration: 10992ms; -webkit-animation-delay: 7692ms; animation-delay: 7692ms; } @-webkit-keyframes move-frames-48 { from { transform: translate3d(63vw, 101vh, 0); } to { transform: translate3d(74vw, -125vh, 0); } } @keyframes move-frames-48 { from { transform: translate3d(63vw, 101vh, 0); } to { transform: translate3d(74vw, -125vh, 0); } } .circle-container:nth-child(48) .circle { -webkit-animation-delay: 1935ms; animation-delay: 1935ms; } .circle-container:nth-child(49) { width: 7px; height: 7px; -webkit-animation-name: move-frames-49; animation-name: move-frames-49; -webkit-animation-duration: 10642ms; animation-duration: 10642ms; -webkit-animation-delay: 10642ms; animation-delay: 10642ms; } @-webkit-keyframes move-frames-49 { from { transform: translate3d(40vw, 105vh, 0); } to { transform: translate3d(29vw, -114vh, 0); } } @keyframes move-frames-49 { from { transform: translate3d(40vw, 105vh, 0); } to { transform: translate3d(29vw, -114vh, 0); } } .circle-container:nth-child(49) .circle { -webkit-animation-delay: 2438ms; animation-delay: 2438ms; } .circle-container:nth-child(50) { width: 7px; height: 7px; -webkit-animation-name: move-frames-50; animation-name: move-frames-50; -webkit-animation-duration: 9248ms; animation-duration: 9248ms; -webkit-animation-delay: 899ms; animation-delay: 899ms; } @-webkit-keyframes move-frames-50 { from { transform: translate3d(10vw, 110vh, 0); } to { transform: translate3d(1vw, -118vh, 0); } } @keyframes move-frames-50 { from { transform: translate3d(10vw, 110vh, 0); } to { transform: translate3d(1vw, -118vh, 0); } } .circle-container:nth-child(50) .circle { -webkit-animation-delay: 3770ms; animation-delay: 3770ms; } .circle-container:nth-child(51) { width: 10px; height: 10px; -webkit-animation-name: move-frames-51; animation-name: move-frames-51; -webkit-animation-duration: 7232ms; animation-duration: 7232ms; -webkit-animation-delay: 820ms; animation-delay: 820ms; } @-webkit-keyframes move-frames-51 { from { transform: translate3d(49vw, 105vh, 0); } to { transform: translate3d(67vw, -110vh, 0); } } @keyframes move-frames-51 { from { transform: translate3d(49vw, 105vh, 0); } to { transform: translate3d(67vw, -110vh, 0); } } .circle-container:nth-child(51) .circle { -webkit-animation-delay: 1686ms; animation-delay: 1686ms; } .circle-container:nth-child(52) { width: 8px; height: 8px; -webkit-animation-name: move-frames-52; animation-name: move-frames-52; -webkit-animation-duration: 10049ms; animation-duration: 10049ms; -webkit-animation-delay: 10392ms; animation-delay: 10392ms; } @-webkit-keyframes move-frames-52 { from { transform: translate3d(1vw, 104vh, 0); } to { transform: translate3d(1vw, -110vh, 0); } } @keyframes move-frames-52 { from { transform: translate3d(1vw, 104vh, 0); } to { transform: translate3d(1vw, -110vh, 0); } } .circle-container:nth-child(52) .circle { -webkit-animation-delay: 1144ms; animation-delay: 1144ms; } .circle-container:nth-child(53) { width: 2px; height: 2px; -webkit-animation-name: move-frames-53; animation-name: move-frames-53; -webkit-animation-duration: 8083ms; animation-duration: 8083ms; -webkit-animation-delay: 7647ms; animation-delay: 7647ms; } @-webkit-keyframes move-frames-53 { from { transform: translate3d(27vw, 109vh, 0); } to { transform: translate3d(6vw, -137vh, 0); } } @keyframes move-frames-53 { from { transform: translate3d(27vw, 109vh, 0); } to { transform: translate3d(6vw, -137vh, 0); } } .circle-container:nth-child(53) .circle { -webkit-animation-delay: 655ms; animation-delay: 655ms; } .circle-container:nth-child(54) { width: 4px; height: 4px; -webkit-animation-name: move-frames-54; animation-name: move-frames-54; -webkit-animation-duration: 7262ms; animation-duration: 7262ms; -webkit-animation-delay: 3064ms; animation-delay: 3064ms; } @-webkit-keyframes move-frames-54 { from { transform: translate3d(54vw, 103vh, 0); } to { transform: translate3d(42vw, -112vh, 0); } } @keyframes move-frames-54 { from { transform: translate3d(54vw, 103vh, 0); } to { transform: translate3d(42vw, -112vh, 0); } } .circle-container:nth-child(54) .circle { -webkit-animation-delay: 2687ms; animation-delay: 2687ms; } .circle-container:nth-child(55) { width: 9px; height: 9px; -webkit-animation-name: move-frames-55; animation-name: move-frames-55; -webkit-animation-duration: 9604ms; animation-duration: 9604ms; -webkit-animation-delay: 8682ms; animation-delay: 8682ms; } @-webkit-keyframes move-frames-55 { from { transform: translate3d(27vw, 102vh, 0); } to { transform: translate3d(82vw, -118vh, 0); } } @keyframes move-frames-55 { from { transform: translate3d(27vw, 102vh, 0); } to { transform: translate3d(82vw, -118vh, 0); } } .circle-container:nth-child(55) .circle { -webkit-animation-delay: 1843ms; animation-delay: 1843ms; } .circle-container:nth-child(56) { width: 1px; height: 1px; -webkit-animation-name: move-frames-56; animation-name: move-frames-56; -webkit-animation-duration: 9675ms; animation-duration: 9675ms; -webkit-animation-delay: 8755ms; animation-delay: 8755ms; } @-webkit-keyframes move-frames-56 { from { transform: translate3d(57vw, 110vh, 0); } to { transform: translate3d(77vw, -140vh, 0); } } @keyframes move-frames-56 { from { transform: translate3d(57vw, 110vh, 0); } to { transform: translate3d(77vw, -140vh, 0); } } .circle-container:nth-child(56) .circle { -webkit-animation-delay: 2358ms; animation-delay: 2358ms; } .circle-container:nth-child(57) { width: 9px; height: 9px; -webkit-animation-name: move-frames-57; animation-name: move-frames-57; -webkit-animation-duration: 9857ms; animation-duration: 9857ms; -webkit-animation-delay: 1035ms; animation-delay: 1035ms; } @-webkit-keyframes move-frames-57 { from { transform: translate3d(57vw, 107vh, 0); } to { transform: translate3d(98vw, -124vh, 0); } } @keyframes move-frames-57 { from { transform: translate3d(57vw, 107vh, 0); } to { transform: translate3d(98vw, -124vh, 0); } } .circle-container:nth-child(57) .circle { -webkit-animation-delay: 1107ms; animation-delay: 1107ms; } .circle-container:nth-child(58) { width: 7px; height: 7px; -webkit-animation-name: move-frames-58; animation-name: move-frames-58; -webkit-animation-duration: 10330ms; animation-duration: 10330ms; -webkit-animation-delay: 1515ms; animation-delay: 1515ms; } @-webkit-keyframes move-frames-58 { from { transform: translate3d(69vw, 109vh, 0); } to { transform: translate3d(18vw, -128vh, 0); } } @keyframes move-frames-58 { from { transform: translate3d(69vw, 109vh, 0); } to { transform: translate3d(18vw, -128vh, 0); } } .circle-container:nth-child(58) .circle { -webkit-animation-delay: 297ms; animation-delay: 297ms; } .circle-container:nth-child(59) { width: 1px; height: 1px; -webkit-animation-name: move-frames-59; animation-name: move-frames-59; -webkit-animation-duration: 8907ms; animation-duration: 8907ms; -webkit-animation-delay: 7689ms; animation-delay: 7689ms; } @-webkit-keyframes move-frames-59 { from { transform: translate3d(37vw, 104vh, 0); } to { transform: translate3d(31vw, -128vh, 0); } } @keyframes move-frames-59 { from { transform: translate3d(37vw, 104vh, 0); } to { transform: translate3d(31vw, -128vh, 0); } } .circle-container:nth-child(59) .circle { -webkit-animation-delay: 3840ms; animation-delay: 3840ms; } .circle-container:nth-child(60) { width: 7px; height: 7px; -webkit-animation-name: move-frames-60; animation-name: move-frames-60; -webkit-animation-duration: 8089ms; animation-duration: 8089ms; -webkit-animation-delay: 7172ms; animation-delay: 7172ms; } @-webkit-keyframes move-frames-60 { from { transform: translate3d(88vw, 101vh, 0); } to { transform: translate3d(47vw, -115vh, 0); } } @keyframes move-frames-60 { from { transform: translate3d(88vw, 101vh, 0); } to { transform: translate3d(47vw, -115vh, 0); } } .circle-container:nth-child(60) .circle { -webkit-animation-delay: 3823ms; animation-delay: 3823ms; } .circle-container:nth-child(61) { width: 5px; height: 5px; -webkit-animation-name: move-frames-61; animation-name: move-frames-61; -webkit-animation-duration: 8436ms; animation-duration: 8436ms; -webkit-animation-delay: 1517ms; animation-delay: 1517ms; } @-webkit-keyframes move-frames-61 { from { transform: translate3d(67vw, 104vh, 0); } to { transform: translate3d(68vw, -129vh, 0); } } @keyframes move-frames-61 { from { transform: translate3d(67vw, 104vh, 0); } to { transform: translate3d(68vw, -129vh, 0); } } .circle-container:nth-child(61) .circle { -webkit-animation-delay: 2548ms; animation-delay: 2548ms; } .circle-container:nth-child(62) { width: 3px; height: 3px; -webkit-animation-name: move-frames-62; animation-name: move-frames-62; -webkit-animation-duration: 7392ms; animation-duration: 7392ms; -webkit-animation-delay: 2943ms; animation-delay: 2943ms; } @-webkit-keyframes move-frames-62 { from { transform: translate3d(22vw, 102vh, 0); } to { transform: translate3d(3vw, -114vh, 0); } } @keyframes move-frames-62 { from { transform: translate3d(22vw, 102vh, 0); } to { transform: translate3d(3vw, -114vh, 0); } } .circle-container:nth-child(62) .circle { -webkit-animation-delay: 2062ms; animation-delay: 2062ms; } .circle-container:nth-child(63) { width: 4px; height: 4px; -webkit-animation-name: move-frames-63; animation-name: move-frames-63; -webkit-animation-duration: 7883ms; animation-duration: 7883ms; -webkit-animation-delay: 8589ms; animation-delay: 8589ms; } @-webkit-keyframes move-frames-63 { from { transform: translate3d(92vw, 110vh, 0); } to { transform: translate3d(90vw, -130vh, 0); } } @keyframes move-frames-63 { from { transform: translate3d(92vw, 110vh, 0); } to { transform: translate3d(90vw, -130vh, 0); } } .circle-container:nth-child(63) .circle { -webkit-animation-delay: 1956ms; animation-delay: 1956ms; } .circle-container:nth-child(64) { width: 4px; height: 4px; -webkit-animation-name: move-frames-64; animation-name: move-frames-64; -webkit-animation-duration: 8332ms; animation-duration: 8332ms; -webkit-animation-delay: 5103ms; animation-delay: 5103ms; } @-webkit-keyframes move-frames-64 { from { transform: translate3d(89vw, 104vh, 0); } to { transform: translate3d(70vw, -123vh, 0); } } @keyframes move-frames-64 { from { transform: translate3d(89vw, 104vh, 0); } to { transform: translate3d(70vw, -123vh, 0); } } .circle-container:nth-child(64) .circle { -webkit-animation-delay: 3122ms; animation-delay: 3122ms; } .circle-container:nth-child(65) { width: 10px; height: 10px; -webkit-animation-name: move-frames-65; animation-name: move-frames-65; -webkit-animation-duration: 7869ms; animation-duration: 7869ms; -webkit-animation-delay: 6432ms; animation-delay: 6432ms; } @-webkit-keyframes move-frames-65 { from { transform: translate3d(28vw, 102vh, 0); } to { transform: translate3d(4vw, -103vh, 0); } } @keyframes move-frames-65 { from { transform: translate3d(28vw, 102vh, 0); } to { transform: translate3d(4vw, -103vh, 0); } } .circle-container:nth-child(65) .circle { -webkit-animation-delay: 449ms; animation-delay: 449ms; } .circle-container:nth-child(66) { width: 8px; height: 8px; -webkit-animation-name: move-frames-66; animation-name: move-frames-66; -webkit-animation-duration: 8493ms; animation-duration: 8493ms; -webkit-animation-delay: 4004ms; animation-delay: 4004ms; } @-webkit-keyframes move-frames-66 { from { transform: translate3d(66vw, 101vh, 0); } to { transform: translate3d(69vw, -103vh, 0); } } @keyframes move-frames-66 { from { transform: translate3d(66vw, 101vh, 0); } to { transform: translate3d(69vw, -103vh, 0); } } .circle-container:nth-child(66) .circle { -webkit-animation-delay: 2024ms; animation-delay: 2024ms; } .circle-container:nth-child(67) { width: 6px; height: 6px; -webkit-animation-name: move-frames-67; animation-name: move-frames-67; -webkit-animation-duration: 7257ms; animation-duration: 7257ms; -webkit-animation-delay: 9306ms; animation-delay: 9306ms; } @-webkit-keyframes move-frames-67 { from { transform: translate3d(64vw, 106vh, 0); } to { transform: translate3d(3vw, -117vh, 0); } } @keyframes move-frames-67 { from { transform: translate3d(64vw, 106vh, 0); } to { transform: translate3d(3vw, -117vh, 0); } } .circle-container:nth-child(67) .circle { -webkit-animation-delay: 2381ms; animation-delay: 2381ms; } .circle-container:nth-child(68) { width: 7px; height: 7px; -webkit-animation-name: move-frames-68; animation-name: move-frames-68; -webkit-animation-duration: 8771ms; animation-duration: 8771ms; -webkit-animation-delay: 7607ms; animation-delay: 7607ms; } @-webkit-keyframes move-frames-68 { from { transform: translate3d(65vw, 104vh, 0); } to { transform: translate3d(25vw, -128vh, 0); } } @keyframes move-frames-68 { from { transform: translate3d(65vw, 104vh, 0); } to { transform: translate3d(25vw, -128vh, 0); } } .circle-container:nth-child(68) .circle { -webkit-animation-delay: 3284ms; animation-delay: 3284ms; } .circle-container:nth-child(69) { width: 4px; height: 4px; -webkit-animation-name: move-frames-69; animation-name: move-frames-69; -webkit-animation-duration: 10044ms; animation-duration: 10044ms; -webkit-animation-delay: 8564ms; animation-delay: 8564ms; } @-webkit-keyframes move-frames-69 { from { transform: translate3d(50vw, 104vh, 0); } to { transform: translate3d(82vw, -120vh, 0); } } @keyframes move-frames-69 { from { transform: translate3d(50vw, 104vh, 0); } to { transform: translate3d(82vw, -120vh, 0); } } .circle-container:nth-child(69) .circle { -webkit-animation-delay: 164ms; animation-delay: 164ms; } .circle-container:nth-child(70) { width: 10px; height: 10px; -webkit-animation-name: move-frames-70; animation-name: move-frames-70; -webkit-animation-duration: 10518ms; animation-duration: 10518ms; -webkit-animation-delay: 7385ms; animation-delay: 7385ms; } @-webkit-keyframes move-frames-70 { from { transform: translate3d(75vw, 108vh, 0); } to { transform: translate3d(52vw, -130vh, 0); } } @keyframes move-frames-70 { from { transform: translate3d(75vw, 108vh, 0); } to { transform: translate3d(52vw, -130vh, 0); } } .circle-container:nth-child(70) .circle { -webkit-animation-delay: 2093ms; animation-delay: 2093ms; } .circle-container:nth-child(71) { width: 3px; height: 3px; -webkit-animation-name: move-frames-71; animation-name: move-frames-71; -webkit-animation-duration: 10530ms; animation-duration: 10530ms; -webkit-animation-delay: 7761ms; animation-delay: 7761ms; } @-webkit-keyframes move-frames-71 { from { transform: translate3d(95vw, 102vh, 0); } to { transform: translate3d(21vw, -121vh, 0); } } @keyframes move-frames-71 { from { transform: translate3d(95vw, 102vh, 0); } to { transform: translate3d(21vw, -121vh, 0); } } .circle-container:nth-child(71) .circle { -webkit-animation-delay: 3190ms; animation-delay: 3190ms; } .circle-container:nth-child(72) { width: 8px; height: 8px; -webkit-animation-name: move-frames-72; animation-name: move-frames-72; -webkit-animation-duration: 8575ms; animation-duration: 8575ms; -webkit-animation-delay: 511ms; animation-delay: 511ms; } @-webkit-keyframes move-frames-72 { from { transform: translate3d(63vw, 101vh, 0); } to { transform: translate3d(4vw, -117vh, 0); } } @keyframes move-frames-72 { from { transform: translate3d(63vw, 101vh, 0); } to { transform: translate3d(4vw, -117vh, 0); } } .circle-container:nth-child(72) .circle { -webkit-animation-delay: 1454ms; animation-delay: 1454ms; } .circle-container:nth-child(73) { width: 5px; height: 5px; -webkit-animation-name: move-frames-73; animation-name: move-frames-73; -webkit-animation-duration: 10393ms; animation-duration: 10393ms; -webkit-animation-delay: 6539ms; animation-delay: 6539ms; } @-webkit-keyframes move-frames-73 { from { transform: translate3d(9vw, 108vh, 0); } to { transform: translate3d(88vw, -123vh, 0); } } @keyframes move-frames-73 { from { transform: translate3d(9vw, 108vh, 0); } to { transform: translate3d(88vw, -123vh, 0); } } .circle-container:nth-child(73) .circle { -webkit-animation-delay: 652ms; animation-delay: 652ms; } .circle-container:nth-child(74) { width: 8px; height: 8px; -webkit-animation-name: move-frames-74; animation-name: move-frames-74; -webkit-animation-duration: 10407ms; animation-duration: 10407ms; -webkit-animation-delay: 7012ms; animation-delay: 7012ms; } @-webkit-keyframes move-frames-74 { from { transform: translate3d(35vw, 102vh, 0); } to { transform: translate3d(1vw, -114vh, 0); } } @keyframes move-frames-74 { from { transform: translate3d(35vw, 102vh, 0); } to { transform: translate3d(1vw, -114vh, 0); } } .circle-container:nth-child(74) .circle { -webkit-animation-delay: 3870ms; animation-delay: 3870ms; } .circle-container:nth-child(75) { width: 4px; height: 4px; -webkit-animation-name: move-frames-75; animation-name: move-frames-75; -webkit-animation-duration: 10826ms; animation-duration: 10826ms; -webkit-animation-delay: 2404ms; animation-delay: 2404ms; } @-webkit-keyframes move-frames-75 { from { transform: translate3d(96vw, 105vh, 0); } to { transform: translate3d(20vw, -106vh, 0); } } @keyframes move-frames-75 { from { transform: translate3d(96vw, 105vh, 0); } to { transform: translate3d(20vw, -106vh, 0); } } .circle-container:nth-child(75) .circle { -webkit-animation-delay: 1939ms; animation-delay: 1939ms; } .circle-container:nth-child(76) { width: 8px; height: 8px; -webkit-animation-name: move-frames-76; animation-name: move-frames-76; -webkit-animation-duration: 9644ms; animation-duration: 9644ms; -webkit-animation-delay: 2044ms; animation-delay: 2044ms; } @-webkit-keyframes move-frames-76 { from { transform: translate3d(76vw, 105vh, 0); } to { transform: translate3d(25vw, -127vh, 0); } } @keyframes move-frames-76 { from { transform: translate3d(76vw, 105vh, 0); } to { transform: translate3d(25vw, -127vh, 0); } } .circle-container:nth-child(76) .circle { -webkit-animation-delay: 297ms; animation-delay: 297ms; } .circle-container:nth-child(77) { width: 3px; height: 3px; -webkit-animation-name: move-frames-77; animation-name: move-frames-77; -webkit-animation-duration: 10661ms; animation-duration: 10661ms; -webkit-animation-delay: 8488ms; animation-delay: 8488ms; } @-webkit-keyframes move-frames-77 { from { transform: translate3d(58vw, 107vh, 0); } to { transform: translate3d(98vw, -117vh, 0); } } @keyframes move-frames-77 { from { transform: translate3d(58vw, 107vh, 0); } to { transform: translate3d(98vw, -117vh, 0); } } .circle-container:nth-child(77) .circle { -webkit-animation-delay: 1974ms; animation-delay: 1974ms; } .circle-container:nth-child(78) { width: 7px; height: 7px; -webkit-animation-name: move-frames-78; animation-name: move-frames-78; -webkit-animation-duration: 9035ms; animation-duration: 9035ms; -webkit-animation-delay: 3859ms; animation-delay: 3859ms; } @-webkit-keyframes move-frames-78 { from { transform: translate3d(67vw, 103vh, 0); } to { transform: translate3d(7vw, -106vh, 0); } } @keyframes move-frames-78 { from { transform: translate3d(67vw, 103vh, 0); } to { transform: translate3d(7vw, -106vh, 0); } } .circle-container:nth-child(78) .circle { -webkit-animation-delay: 1000ms; animation-delay: 1000ms; } .circle-container:nth-child(79) { width: 8px; height: 8px; -webkit-animation-name: move-frames-79; animation-name: move-frames-79; -webkit-animation-duration: 10225ms; animation-duration: 10225ms; -webkit-animation-delay: 1979ms; animation-delay: 1979ms; } @-webkit-keyframes move-frames-79 { from { transform: translate3d(2vw, 107vh, 0); } to { transform: translate3d(91vw, -116vh, 0); } } @keyframes move-frames-79 { from { transform: translate3d(2vw, 107vh, 0); } to { transform: translate3d(91vw, -116vh, 0); } } .circle-container:nth-child(79) .circle { -webkit-animation-delay: 3706ms; animation-delay: 3706ms; } .circle-container:nth-child(80) { width: 3px; height: 3px; -webkit-animation-name: move-frames-80; animation-name: move-frames-80; -webkit-animation-duration: 8383ms; animation-duration: 8383ms; -webkit-animation-delay: 7286ms; animation-delay: 7286ms; } @-webkit-keyframes move-frames-80 { from { transform: translate3d(39vw, 101vh, 0); } to { transform: translate3d(72vw, -114vh, 0); } } @keyframes move-frames-80 { from { transform: translate3d(39vw, 101vh, 0); } to { transform: translate3d(72vw, -114vh, 0); } } .circle-container:nth-child(80) .circle { -webkit-animation-delay: 2655ms; animation-delay: 2655ms; } .circle-container:nth-child(81) { width: 7px; height: 7px; -webkit-animation-name: move-frames-81; animation-name: move-frames-81; -webkit-animation-duration: 8694ms; animation-duration: 8694ms; -webkit-animation-delay: 567ms; animation-delay: 567ms; } @-webkit-keyframes move-frames-81 { from { transform: translate3d(41vw, 102vh, 0); } to { transform: translate3d(68vw, -122vh, 0); } } @keyframes move-frames-81 { from { transform: translate3d(41vw, 102vh, 0); } to { transform: translate3d(68vw, -122vh, 0); } } .circle-container:nth-child(81) .circle { -webkit-animation-delay: 1018ms; animation-delay: 1018ms; } .circle-container:nth-child(82) { width: 4px; height: 4px; -webkit-animation-name: move-frames-82; animation-name: move-frames-82; -webkit-animation-duration: 7241ms; animation-duration: 7241ms; -webkit-animation-delay: 6437ms; animation-delay: 6437ms; } @-webkit-keyframes move-frames-82 { from { transform: translate3d(35vw, 104vh, 0); } to { transform: translate3d(56vw, -131vh, 0); } } @keyframes move-frames-82 { from { transform: translate3d(35vw, 104vh, 0); } to { transform: translate3d(56vw, -131vh, 0); } } .circle-container:nth-child(82) .circle { -webkit-animation-delay: 1502ms; animation-delay: 1502ms; } .circle-container:nth-child(83) { width: 8px; height: 8px; -webkit-animation-name: move-frames-83; animation-name: move-frames-83; -webkit-animation-duration: 10050ms; animation-duration: 10050ms; -webkit-animation-delay: 8276ms; animation-delay: 8276ms; } @-webkit-keyframes move-frames-83 { from { transform: translate3d(36vw, 107vh, 0); } to { transform: translate3d(83vw, -109vh, 0); } } @keyframes move-frames-83 { from { transform: translate3d(36vw, 107vh, 0); } to { transform: translate3d(83vw, -109vh, 0); } } .circle-container:nth-child(83) .circle { -webkit-animation-delay: 728ms; animation-delay: 728ms; } .circle-container:nth-child(84) { width: 7px; height: 7px; -webkit-animation-name: move-frames-84; animation-name: move-frames-84; -webkit-animation-duration: 7154ms; animation-duration: 7154ms; -webkit-animation-delay: 3021ms; animation-delay: 3021ms; } @-webkit-keyframes move-frames-84 { from { transform: translate3d(10vw, 110vh, 0); } to { transform: translate3d(24vw, -116vh, 0); } } @keyframes move-frames-84 { from { transform: translate3d(10vw, 110vh, 0); } to { transform: translate3d(24vw, -116vh, 0); } } .circle-container:nth-child(84) .circle { -webkit-animation-delay: 1232ms; animation-delay: 1232ms; } .circle-container:nth-child(85) { width: 9px; height: 9px; -webkit-animation-name: move-frames-85; animation-name: move-frames-85; -webkit-animation-duration: 7600ms; animation-duration: 7600ms; -webkit-animation-delay: 6962ms; animation-delay: 6962ms; } @-webkit-keyframes move-frames-85 { from { transform: translate3d(18vw, 109vh, 0); } to { transform: translate3d(38vw, -136vh, 0); } } @keyframes move-frames-85 { from { transform: translate3d(18vw, 109vh, 0); } to { transform: translate3d(38vw, -136vh, 0); } } .circle-container:nth-child(85) .circle { -webkit-animation-delay: 1393ms; animation-delay: 1393ms; } .circle-container:nth-child(86) { width: 1px; height: 1px; -webkit-animation-name: move-frames-86; animation-name: move-frames-86; -webkit-animation-duration: 7462ms; animation-duration: 7462ms; -webkit-animation-delay: 4488ms; animation-delay: 4488ms; } @-webkit-keyframes move-frames-86 { from { transform: translate3d(27vw, 110vh, 0); } to { transform: translate3d(31vw, -134vh, 0); } } @keyframes move-frames-86 { from { transform: translate3d(27vw, 110vh, 0); } to { transform: translate3d(31vw, -134vh, 0); } } .circle-container:nth-child(86) .circle { -webkit-animation-delay: 3752ms; animation-delay: 3752ms; } .circle-container:nth-child(87) { width: 4px; height: 4px; -webkit-animation-name: move-frames-87; animation-name: move-frames-87; -webkit-animation-duration: 7007ms; animation-duration: 7007ms; -webkit-animation-delay: 2478ms; animation-delay: 2478ms; } @-webkit-keyframes move-frames-87 { from { transform: translate3d(32vw, 106vh, 0); } to { transform: translate3d(100vw, -121vh, 0); } } @keyframes move-frames-87 { from { transform: translate3d(32vw, 106vh, 0); } to { transform: translate3d(100vw, -121vh, 0); } } .circle-container:nth-child(87) .circle { -webkit-animation-delay: 3736ms; animation-delay: 3736ms; } .circle-container:nth-child(88) { width: 10px; height: 10px; -webkit-animation-name: move-frames-88; animation-name: move-frames-88; -webkit-animation-duration: 7683ms; animation-duration: 7683ms; -webkit-animation-delay: 832ms; animation-delay: 832ms; } @-webkit-keyframes move-frames-88 { from { transform: translate3d(4vw, 105vh, 0); } to { transform: translate3d(87vw, -107vh, 0); } } @keyframes move-frames-88 { from { transform: translate3d(4vw, 105vh, 0); } to { transform: translate3d(87vw, -107vh, 0); } } .circle-container:nth-child(88) .circle { -webkit-animation-delay: 3670ms; animation-delay: 3670ms; } .circle-container:nth-child(89) { width: 9px; height: 9px; -webkit-animation-name: move-frames-89; animation-name: move-frames-89; -webkit-animation-duration: 8109ms; animation-duration: 8109ms; -webkit-animation-delay: 7926ms; animation-delay: 7926ms; } @-webkit-keyframes move-frames-89 { from { transform: translate3d(55vw, 106vh, 0); } to { transform: translate3d(41vw, -113vh, 0); } } @keyframes move-frames-89 { from { transform: translate3d(55vw, 106vh, 0); } to { transform: translate3d(41vw, -113vh, 0); } } .circle-container:nth-child(89) .circle { -webkit-animation-delay: 1374ms; animation-delay: 1374ms; } .circle-container:nth-child(90) { width: 7px; height: 7px; -webkit-animation-name: move-frames-90; animation-name: move-frames-90; -webkit-animation-duration: 7625ms; animation-duration: 7625ms; -webkit-animation-delay: 1198ms; animation-delay: 1198ms; } @-webkit-keyframes move-frames-90 { from { transform: translate3d(17vw, 105vh, 0); } to { transform: translate3d(75vw, -112vh, 0); } } @keyframes move-frames-90 { from { transform: translate3d(17vw, 105vh, 0); } to { transform: translate3d(75vw, -112vh, 0); } } .circle-container:nth-child(90) .circle { -webkit-animation-delay: 688ms; animation-delay: 688ms; } .circle-container:nth-child(91) { width: 6px; height: 6px; -webkit-animation-name: move-frames-91; animation-name: move-frames-91; -webkit-animation-duration: 8187ms; animation-duration: 8187ms; -webkit-animation-delay: 2917ms; animation-delay: 2917ms; } @-webkit-keyframes move-frames-91 { from { transform: translate3d(2vw, 104vh, 0); } to { transform: translate3d(69vw, -134vh, 0); } } @keyframes move-frames-91 { from { transform: translate3d(2vw, 104vh, 0); } to { transform: translate3d(69vw, -134vh, 0); } } .circle-container:nth-child(91) .circle { -webkit-animation-delay: 1859ms; animation-delay: 1859ms; } .circle-container:nth-child(92) { width: 6px; height: 6px; -webkit-animation-name: move-frames-92; animation-name: move-frames-92; -webkit-animation-duration: 8297ms; animation-duration: 8297ms; -webkit-animation-delay: 9003ms; animation-delay: 9003ms; } @-webkit-keyframes move-frames-92 { from { transform: translate3d(94vw, 108vh, 0); } to { transform: translate3d(93vw, -131vh, 0); } } @keyframes move-frames-92 { from { transform: translate3d(94vw, 108vh, 0); } to { transform: translate3d(93vw, -131vh, 0); } } .circle-container:nth-child(92) .circle { -webkit-animation-delay: 365ms; animation-delay: 365ms; } .circle-container:nth-child(93) { width: 2px; height: 2px; -webkit-animation-name: move-frames-93; animation-name: move-frames-93; -webkit-animation-duration: 9183ms; animation-duration: 9183ms; -webkit-animation-delay: 10133ms; animation-delay: 10133ms; } @-webkit-keyframes move-frames-93 { from { transform: translate3d(83vw, 102vh, 0); } to { transform: translate3d(20vw, -128vh, 0); } } @keyframes move-frames-93 { from { transform: translate3d(83vw, 102vh, 0); } to { transform: translate3d(20vw, -128vh, 0); } } .circle-container:nth-child(93) .circle { -webkit-animation-delay: 34ms; animation-delay: 34ms; } .circle-container:nth-child(94) { width: 7px; height: 7px; -webkit-animation-name: move-frames-94; animation-name: move-frames-94; -webkit-animation-duration: 10369ms; animation-duration: 10369ms; -webkit-animation-delay: 4792ms; animation-delay: 4792ms; } @-webkit-keyframes move-frames-94 { from { transform: translate3d(34vw, 102vh, 0); } to { transform: translate3d(54vw, -123vh, 0); } } @keyframes move-frames-94 { from { transform: translate3d(34vw, 102vh, 0); } to { transform: translate3d(54vw, -123vh, 0); } } .circle-container:nth-child(94) .circle { -webkit-animation-delay: 806ms; animation-delay: 806ms; } .circle-container:nth-child(95) { width: 6px; height: 6px; -webkit-animation-name: move-frames-95; animation-name: move-frames-95; -webkit-animation-duration: 7811ms; animation-duration: 7811ms; -webkit-animation-delay: 175ms; animation-delay: 175ms; } @-webkit-keyframes move-frames-95 { from { transform: translate3d(87vw, 108vh, 0); } to { transform: translate3d(37vw, -117vh, 0); } } @keyframes move-frames-95 { from { transform: translate3d(87vw, 108vh, 0); } to { transform: translate3d(37vw, -117vh, 0); } } .circle-container:nth-child(95) .circle { -webkit-animation-delay: 1327ms; animation-delay: 1327ms; } .circle-container:nth-child(96) { width: 6px; height: 6px; -webkit-animation-name: move-frames-96; animation-name: move-frames-96; -webkit-animation-duration: 8363ms; animation-duration: 8363ms; -webkit-animation-delay: 4142ms; animation-delay: 4142ms; } @-webkit-keyframes move-frames-96 { from { transform: translate3d(17vw, 105vh, 0); } to { transform: translate3d(55vw, -120vh, 0); } } @keyframes move-frames-96 { from { transform: translate3d(17vw, 105vh, 0); } to { transform: translate3d(55vw, -120vh, 0); } } .circle-container:nth-child(96) .circle { -webkit-animation-delay: 3818ms; animation-delay: 3818ms; } .circle-container:nth-child(97) { width: 4px; height: 4px; -webkit-animation-name: move-frames-97; animation-name: move-frames-97; -webkit-animation-duration: 8969ms; animation-duration: 8969ms; -webkit-animation-delay: 9526ms; animation-delay: 9526ms; } @-webkit-keyframes move-frames-97 { from { transform: translate3d(56vw, 107vh, 0); } to { transform: translate3d(93vw, -110vh, 0); } } @keyframes move-frames-97 { from { transform: translate3d(56vw, 107vh, 0); } to { transform: translate3d(93vw, -110vh, 0); } } .circle-container:nth-child(97) .circle { -webkit-animation-delay: 1598ms; animation-delay: 1598ms; } .circle-container:nth-child(98) { width: 6px; height: 6px; -webkit-animation-name: move-frames-98; animation-name: move-frames-98; -webkit-animation-duration: 9818ms; animation-duration: 9818ms; -webkit-animation-delay: 7963ms; animation-delay: 7963ms; } @-webkit-keyframes move-frames-98 { from { transform: translate3d(8vw, 107vh, 0); } to { transform: translate3d(39vw, -114vh, 0); } } @keyframes move-frames-98 { from { transform: translate3d(8vw, 107vh, 0); } to { transform: translate3d(39vw, -114vh, 0); } } .circle-container:nth-child(98) .circle { -webkit-animation-delay: 2395ms; animation-delay: 2395ms; } .circle-container:nth-child(99) { width: 1px; height: 1px; -webkit-animation-name: move-frames-99; animation-name: move-frames-99; -webkit-animation-duration: 8446ms; animation-duration: 8446ms; -webkit-animation-delay: 1187ms; animation-delay: 1187ms; } @-webkit-keyframes move-frames-99 { from { transform: translate3d(19vw, 104vh, 0); } to { transform: translate3d(66vw, -110vh, 0); } } @keyframes move-frames-99 { from { transform: translate3d(19vw, 104vh, 0); } to { transform: translate3d(66vw, -110vh, 0); } } .circle-container:nth-child(99) .circle { -webkit-animation-delay: 1379ms; animation-delay: 1379ms; } .circle-container:nth-child(100) { width: 4px; height: 4px; -webkit-animation-name: move-frames-100; animation-name: move-frames-100; -webkit-animation-duration: 8926ms; animation-duration: 8926ms; -webkit-animation-delay: 9456ms; animation-delay: 9456ms; } @-webkit-keyframes move-frames-100 { from { transform: translate3d(13vw, 108vh, 0); } to { transform: translate3d(85vw, -138vh, 0); } } @keyframes move-frames-100 { from { transform: translate3d(13vw, 108vh, 0); } to { transform: translate3d(85vw, -138vh, 0); } } .circle-container:nth-child(100) .circle { -webkit-animation-delay: 352ms; animation-delay: 352ms; } .circle-container:nth-child(101) { width: 7px; height: 7px; -webkit-animation-name: move-frames-101; animation-name: move-frames-101; -webkit-animation-duration: 7849ms; animation-duration: 7849ms; -webkit-animation-delay: 7220ms; animation-delay: 7220ms; } @-webkit-keyframes move-frames-101 { from { transform: translate3d(76vw, 103vh, 0); } to { transform: translate3d(18vw, -120vh, 0); } } @keyframes move-frames-101 { from { transform: translate3d(76vw, 103vh, 0); } to { transform: translate3d(18vw, -120vh, 0); } } .circle-container:nth-child(101) .circle { -webkit-animation-delay: 1808ms; animation-delay: 1808ms; } .circle-container:nth-child(102) { width: 6px; height: 6px; -webkit-animation-name: move-frames-102; animation-name: move-frames-102; -webkit-animation-duration: 9054ms; animation-duration: 9054ms; -webkit-animation-delay: 2965ms; animation-delay: 2965ms; } @-webkit-keyframes move-frames-102 { from { transform: translate3d(1vw, 105vh, 0); } to { transform: translate3d(60vw, -132vh, 0); } } @keyframes move-frames-102 { from { transform: translate3d(1vw, 105vh, 0); } to { transform: translate3d(60vw, -132vh, 0); } } .circle-container:nth-child(102) .circle { -webkit-animation-delay: 1392ms; animation-delay: 1392ms; } .circle-container:nth-child(103) { width: 2px; height: 2px; -webkit-animation-name: move-frames-103; animation-name: move-frames-103; -webkit-animation-duration: 7948ms; animation-duration: 7948ms; -webkit-animation-delay: 6706ms; animation-delay: 6706ms; } @-webkit-keyframes move-frames-103 { from { transform: translate3d(63vw, 102vh, 0); } to { transform: translate3d(59vw, -118vh, 0); } } @keyframes move-frames-103 { from { transform: translate3d(63vw, 102vh, 0); } to { transform: translate3d(59vw, -118vh, 0); } } .circle-container:nth-child(103) .circle { -webkit-animation-delay: 2556ms; animation-delay: 2556ms; } .circle-container:nth-child(104) { width: 5px; height: 5px; -webkit-animation-name: move-frames-104; animation-name: move-frames-104; -webkit-animation-duration: 8306ms; animation-duration: 8306ms; -webkit-animation-delay: 4915ms; animation-delay: 4915ms; } @-webkit-keyframes move-frames-104 { from { transform: translate3d(34vw, 107vh, 0); } to { transform: translate3d(92vw, -117vh, 0); } } @keyframes move-frames-104 { from { transform: translate3d(34vw, 107vh, 0); } to { transform: translate3d(92vw, -117vh, 0); } } .circle-container:nth-child(104) .circle { -webkit-animation-delay: 1261ms; animation-delay: 1261ms; } .circle-container:nth-child(105) { width: 1px; height: 1px; -webkit-animation-name: move-frames-105; animation-name: move-frames-105; -webkit-animation-duration: 8680ms; animation-duration: 8680ms; -webkit-animation-delay: 2111ms; animation-delay: 2111ms; } @-webkit-keyframes move-frames-105 { from { transform: translate3d(37vw, 109vh, 0); } to { transform: translate3d(89vw, -115vh, 0); } } @keyframes move-frames-105 { from { transform: translate3d(37vw, 109vh, 0); } to { transform: translate3d(89vw, -115vh, 0); } } .circle-container:nth-child(105) .circle { -webkit-animation-delay: 2928ms; animation-delay: 2928ms; } .circle-container:nth-child(106) { width: 9px; height: 9px; -webkit-animation-name: move-frames-106; animation-name: move-frames-106; -webkit-animation-duration: 10353ms; animation-duration: 10353ms; -webkit-animation-delay: 7158ms; animation-delay: 7158ms; } @-webkit-keyframes move-frames-106 { from { transform: translate3d(44vw, 102vh, 0); } to { transform: translate3d(61vw, -124vh, 0); } } @keyframes move-frames-106 { from { transform: translate3d(44vw, 102vh, 0); } to { transform: translate3d(61vw, -124vh, 0); } } .circle-container:nth-child(106) .circle { -webkit-animation-delay: 3205ms; animation-delay: 3205ms; } .circle-container:nth-child(107) { width: 3px; height: 3px; -webkit-animation-name: move-frames-107; animation-name: move-frames-107; -webkit-animation-duration: 10600ms; animation-duration: 10600ms; -webkit-animation-delay: 6432ms; animation-delay: 6432ms; } @-webkit-keyframes move-frames-107 { from { transform: translate3d(94vw, 110vh, 0); } to { transform: translate3d(38vw, -136vh, 0); } } @keyframes move-frames-107 { from { transform: translate3d(94vw, 110vh, 0); } to { transform: translate3d(38vw, -136vh, 0); } } .circle-container:nth-child(107) .circle { -webkit-animation-delay: 3376ms; animation-delay: 3376ms; } .circle-container:nth-child(108) { width: 9px; height: 9px; -webkit-animation-name: move-frames-108; animation-name: move-frames-108; -webkit-animation-duration: 10108ms; animation-duration: 10108ms; -webkit-animation-delay: 9221ms; animation-delay: 9221ms; } @-webkit-keyframes move-frames-108 { from { transform: translate3d(97vw, 102vh, 0); } to { transform: translate3d(72vw, -127vh, 0); } } @keyframes move-frames-108 { from { transform: translate3d(97vw, 102vh, 0); } to { transform: translate3d(72vw, -127vh, 0); } } .circle-container:nth-child(108) .circle { -webkit-animation-delay: 93ms; animation-delay: 93ms; } .circle-container:nth-child(109) { width: 6px; height: 6px; -webkit-animation-name: move-frames-109; animation-name: move-frames-109; -webkit-animation-duration: 7657ms; animation-duration: 7657ms; -webkit-animation-delay: 6913ms; animation-delay: 6913ms; } @-webkit-keyframes move-frames-109 { from { transform: translate3d(34vw, 108vh, 0); } to { transform: translate3d(41vw, -116vh, 0); } } @keyframes move-frames-109 { from { transform: translate3d(34vw, 108vh, 0); } to { transform: translate3d(41vw, -116vh, 0); } } .circle-container:nth-child(109) .circle { -webkit-animation-delay: 3422ms; animation-delay: 3422ms; } .circle-container:nth-child(110) { width: 3px; height: 3px; -webkit-animation-name: move-frames-110; animation-name: move-frames-110; -webkit-animation-duration: 8673ms; animation-duration: 8673ms; -webkit-animation-delay: 6903ms; animation-delay: 6903ms; } @-webkit-keyframes move-frames-110 { from { transform: translate3d(17vw, 108vh, 0); } to { transform: translate3d(45vw, -120vh, 0); } } @keyframes move-frames-110 { from { transform: translate3d(17vw, 108vh, 0); } to { transform: translate3d(45vw, -120vh, 0); } } .circle-container:nth-child(110) .circle { -webkit-animation-delay: 3650ms; animation-delay: 3650ms; } .circle-container:nth-child(111) { width: 9px; height: 9px; -webkit-animation-name: move-frames-111; animation-name: move-frames-111; -webkit-animation-duration: 8782ms; animation-duration: 8782ms; -webkit-animation-delay: 10395ms; animation-delay: 10395ms; } @-webkit-keyframes move-frames-111 { from { transform: translate3d(75vw, 107vh, 0); } to { transform: translate3d(38vw, -110vh, 0); } } @keyframes move-frames-111 { from { transform: translate3d(75vw, 107vh, 0); } to { transform: translate3d(38vw, -110vh, 0); } } .circle-container:nth-child(111) .circle { -webkit-animation-delay: 723ms; animation-delay: 723ms; } .circle-container:nth-child(112) { width: 1px; height: 1px; -webkit-animation-name: move-frames-112; animation-name: move-frames-112; -webkit-animation-duration: 9242ms; animation-duration: 9242ms; -webkit-animation-delay: 7953ms; animation-delay: 7953ms; } @-webkit-keyframes move-frames-112 { from { transform: translate3d(80vw, 105vh, 0); } to { transform: translate3d(55vw, -109vh, 0); } } @keyframes move-frames-112 { from { transform: translate3d(80vw, 105vh, 0); } to { transform: translate3d(55vw, -109vh, 0); } } .circle-container:nth-child(112) .circle { -webkit-animation-delay: 931ms; animation-delay: 931ms; } .circle-container:nth-child(113) { width: 10px; height: 10px; -webkit-animation-name: move-frames-113; animation-name: move-frames-113; -webkit-animation-duration: 8186ms; animation-duration: 8186ms; -webkit-animation-delay: 4021ms; animation-delay: 4021ms; } @-webkit-keyframes move-frames-113 { from { transform: translate3d(63vw, 108vh, 0); } to { transform: translate3d(47vw, -123vh, 0); } } @keyframes move-frames-113 { from { transform: translate3d(63vw, 108vh, 0); } to { transform: translate3d(47vw, -123vh, 0); } } .circle-container:nth-child(113) .circle { -webkit-animation-delay: 3109ms; animation-delay: 3109ms; } .circle-container:nth-child(114) { width: 6px; height: 6px; -webkit-animation-name: move-frames-114; animation-name: move-frames-114; -webkit-animation-duration: 10517ms; animation-duration: 10517ms; -webkit-animation-delay: 737ms; animation-delay: 737ms; } @-webkit-keyframes move-frames-114 { from { transform: translate3d(38vw, 102vh, 0); } to { transform: translate3d(33vw, -113vh, 0); } } @keyframes move-frames-114 { from { transform: translate3d(38vw, 102vh, 0); } to { transform: translate3d(33vw, -113vh, 0); } } .circle-container:nth-child(114) .circle { -webkit-animation-delay: 3369ms; animation-delay: 3369ms; } .circle-container:nth-child(115) { width: 9px; height: 9px; -webkit-animation-name: move-frames-115; animation-name: move-frames-115; -webkit-animation-duration: 7006ms; animation-duration: 7006ms; -webkit-animation-delay: 6444ms; animation-delay: 6444ms; } @-webkit-keyframes move-frames-115 { from { transform: translate3d(21vw, 106vh, 0); } to { transform: translate3d(90vw, -126vh, 0); } } @keyframes move-frames-115 { from { transform: translate3d(21vw, 106vh, 0); } to { transform: translate3d(90vw, -126vh, 0); } } .circle-container:nth-child(115) .circle { -webkit-animation-delay: 2593ms; animation-delay: 2593ms; } .circle-container:nth-child(116) { width: 2px; height: 2px; -webkit-animation-name: move-frames-116; animation-name: move-frames-116; -webkit-animation-duration: 10408ms; animation-duration: 10408ms; -webkit-animation-delay: 7063ms; animation-delay: 7063ms; } @-webkit-keyframes move-frames-116 { from { transform: translate3d(43vw, 101vh, 0); } to { transform: translate3d(49vw, -112vh, 0); } } @keyframes move-frames-116 { from { transform: translate3d(43vw, 101vh, 0); } to { transform: translate3d(49vw, -112vh, 0); } } .circle-container:nth-child(116) .circle { -webkit-animation-delay: 2421ms; animation-delay: 2421ms; } .circle-container:nth-child(117) { width: 1px; height: 1px; -webkit-animation-name: move-frames-117; animation-name: move-frames-117; -webkit-animation-duration: 9149ms; animation-duration: 9149ms; -webkit-animation-delay: 10640ms; animation-delay: 10640ms; } @-webkit-keyframes move-frames-117 { from { transform: translate3d(37vw, 102vh, 0); } to { transform: translate3d(47vw, -127vh, 0); } } @keyframes move-frames-117 { from { transform: translate3d(37vw, 102vh, 0); } to { transform: translate3d(47vw, -127vh, 0); } } .circle-container:nth-child(117) .circle { -webkit-animation-delay: 3807ms; animation-delay: 3807ms; } .circle-container:nth-child(118) { width: 5px; height: 5px; -webkit-animation-name: move-frames-118; animation-name: move-frames-118; -webkit-animation-duration: 7675ms; animation-duration: 7675ms; -webkit-animation-delay: 9753ms; animation-delay: 9753ms; } @-webkit-keyframes move-frames-118 { from { transform: translate3d(60vw, 105vh, 0); } to { transform: translate3d(40vw, -108vh, 0); } } @keyframes move-frames-118 { from { transform: translate3d(60vw, 105vh, 0); } to { transform: translate3d(40vw, -108vh, 0); } } .circle-container:nth-child(118) .circle { -webkit-animation-delay: 1147ms; animation-delay: 1147ms; } .circle-container:nth-child(119) { width: 3px; height: 3px; -webkit-animation-name: move-frames-119; animation-name: move-frames-119; -webkit-animation-duration: 8518ms; animation-duration: 8518ms; -webkit-animation-delay: 2958ms; animation-delay: 2958ms; } @-webkit-keyframes move-frames-119 { from { transform: translate3d(30vw, 110vh, 0); } to { transform: translate3d(19vw, -114vh, 0); } } @keyframes move-frames-119 { from { transform: translate3d(30vw, 110vh, 0); } to { transform: translate3d(19vw, -114vh, 0); } } .circle-container:nth-child(119) .circle { -webkit-animation-delay: 2094ms; animation-delay: 2094ms; } .circle-container:nth-child(120) { width: 2px; height: 2px; -webkit-animation-name: move-frames-120; animation-name: move-frames-120; -webkit-animation-duration: 8526ms; animation-duration: 8526ms; -webkit-animation-delay: 7013ms; animation-delay: 7013ms; } @-webkit-keyframes move-frames-120 { from { transform: translate3d(71vw, 103vh, 0); } to { transform: translate3d(65vw, -125vh, 0); } } @keyframes move-frames-120 { from { transform: translate3d(71vw, 103vh, 0); } to { transform: translate3d(65vw, -125vh, 0); } } .circle-container:nth-child(120) .circle { -webkit-animation-delay: 3064ms; animation-delay: 3064ms; } .circle-container:nth-child(121) { width: 7px; height: 7px; -webkit-animation-name: move-frames-121; animation-name: move-frames-121; -webkit-animation-duration: 8069ms; animation-duration: 8069ms; -webkit-animation-delay: 7991ms; animation-delay: 7991ms; } @-webkit-keyframes move-frames-121 { from { transform: translate3d(31vw, 101vh, 0); } to { transform: translate3d(92vw, -104vh, 0); } } @keyframes move-frames-121 { from { transform: translate3d(31vw, 101vh, 0); } to { transform: translate3d(92vw, -104vh, 0); } } .circle-container:nth-child(121) .circle { -webkit-animation-delay: 294ms; animation-delay: 294ms; } .circle-container:nth-child(122) { width: 7px; height: 7px; -webkit-animation-name: move-frames-122; animation-name: move-frames-122; -webkit-animation-duration: 9655ms; animation-duration: 9655ms; -webkit-animation-delay: 2984ms; animation-delay: 2984ms; } @-webkit-keyframes move-frames-122 { from { transform: translate3d(49vw, 105vh, 0); } to { transform: translate3d(92vw, -121vh, 0); } } @keyframes move-frames-122 { from { transform: translate3d(49vw, 105vh, 0); } to { transform: translate3d(92vw, -121vh, 0); } } .circle-container:nth-child(122) .circle { -webkit-animation-delay: 3303ms; animation-delay: 3303ms; } .circle-container:nth-child(123) { width: 10px; height: 10px; -webkit-animation-name: move-frames-123; animation-name: move-frames-123; -webkit-animation-duration: 8109ms; animation-duration: 8109ms; -webkit-animation-delay: 626ms; animation-delay: 626ms; } @-webkit-keyframes move-frames-123 { from { transform: translate3d(81vw, 109vh, 0); } to { transform: translate3d(14vw, -137vh, 0); } } @keyframes move-frames-123 { from { transform: translate3d(81vw, 109vh, 0); } to { transform: translate3d(14vw, -137vh, 0); } } .circle-container:nth-child(123) .circle { -webkit-animation-delay: 3829ms; animation-delay: 3829ms; } .circle-container:nth-child(124) { width: 3px; height: 3px; -webkit-animation-name: move-frames-124; animation-name: move-frames-124; -webkit-animation-duration: 10510ms; animation-duration: 10510ms; -webkit-animation-delay: 4369ms; animation-delay: 4369ms; } @-webkit-keyframes move-frames-124 { from { transform: translate3d(51vw, 106vh, 0); } to { transform: translate3d(37vw, -108vh, 0); } } @keyframes move-frames-124 { from { transform: translate3d(51vw, 106vh, 0); } to { transform: translate3d(37vw, -108vh, 0); } } .circle-container:nth-child(124) .circle { -webkit-animation-delay: 2263ms; animation-delay: 2263ms; } .circle-container:nth-child(125) { width: 6px; height: 6px; -webkit-animation-name: move-frames-125; animation-name: move-frames-125; -webkit-animation-duration: 7237ms; animation-duration: 7237ms; -webkit-animation-delay: 2565ms; animation-delay: 2565ms; } @-webkit-keyframes move-frames-125 { from { transform: translate3d(54vw, 101vh, 0); } to { transform: translate3d(24vw, -130vh, 0); } } @keyframes move-frames-125 { from { transform: translate3d(54vw, 101vh, 0); } to { transform: translate3d(24vw, -130vh, 0); } } .circle-container:nth-child(125) .circle { -webkit-animation-delay: 2743ms; animation-delay: 2743ms; } .circle-container:nth-child(126) { width: 6px; height: 6px; -webkit-animation-name: move-frames-126; animation-name: move-frames-126; -webkit-animation-duration: 10661ms; animation-duration: 10661ms; -webkit-animation-delay: 2442ms; animation-delay: 2442ms; } @-webkit-keyframes move-frames-126 { from { transform: translate3d(90vw, 108vh, 0); } to { transform: translate3d(66vw, -113vh, 0); } } @keyframes move-frames-126 { from { transform: translate3d(90vw, 108vh, 0); } to { transform: translate3d(66vw, -113vh, 0); } } .circle-container:nth-child(126) .circle { -webkit-animation-delay: 2659ms; animation-delay: 2659ms; } .circle-container:nth-child(127) { width: 1px; height: 1px; -webkit-animation-name: move-frames-127; animation-name: move-frames-127; -webkit-animation-duration: 9164ms; animation-duration: 9164ms; -webkit-animation-delay: 2368ms; animation-delay: 2368ms; } @-webkit-keyframes move-frames-127 { from { transform: translate3d(20vw, 110vh, 0); } to { transform: translate3d(45vw, -133vh, 0); } } @keyframes move-frames-127 { from { transform: translate3d(20vw, 110vh, 0); } to { transform: translate3d(45vw, -133vh, 0); } } .circle-container:nth-child(127) .circle { -webkit-animation-delay: 2598ms; animation-delay: 2598ms; } .circle-container:nth-child(128) { width: 10px; height: 10px; -webkit-animation-name: move-frames-128; animation-name: move-frames-128; -webkit-animation-duration: 10385ms; animation-duration: 10385ms; -webkit-animation-delay: 10424ms; animation-delay: 10424ms; } @-webkit-keyframes move-frames-128 { from { transform: translate3d(91vw, 102vh, 0); } to { transform: translate3d(6vw, -117vh, 0); } } @keyframes move-frames-128 { from { transform: translate3d(91vw, 102vh, 0); } to { transform: translate3d(6vw, -117vh, 0); } } .circle-container:nth-child(128) .circle { -webkit-animation-delay: 3589ms; animation-delay: 3589ms; } .circle-container:nth-child(129) { width: 8px; height: 8px; -webkit-animation-name: move-frames-129; animation-name: move-frames-129; -webkit-animation-duration: 8821ms; animation-duration: 8821ms; -webkit-animation-delay: 7820ms; animation-delay: 7820ms; } @-webkit-keyframes move-frames-129 { from { transform: translate3d(68vw, 108vh, 0); } to { transform: translate3d(16vw, -111vh, 0); } } @keyframes move-frames-129 { from { transform: translate3d(68vw, 108vh, 0); } to { transform: translate3d(16vw, -111vh, 0); } } .circle-container:nth-child(129) .circle { -webkit-animation-delay: 1449ms; animation-delay: 1449ms; } .circle-container:nth-child(130) { width: 3px; height: 3px; -webkit-animation-name: move-frames-130; animation-name: move-frames-130; -webkit-animation-duration: 7510ms; animation-duration: 7510ms; -webkit-animation-delay: 10048ms; animation-delay: 10048ms; } @-webkit-keyframes move-frames-130 { from { transform: translate3d(48vw, 103vh, 0); } to { transform: translate3d(74vw, -124vh, 0); } } @keyframes move-frames-130 { from { transform: translate3d(48vw, 103vh, 0); } to { transform: translate3d(74vw, -124vh, 0); } } .circle-container:nth-child(130) .circle { -webkit-animation-delay: 257ms; animation-delay: 257ms; } .circle-container:nth-child(131) { width: 7px; height: 7px; -webkit-animation-name: move-frames-131; animation-name: move-frames-131; -webkit-animation-duration: 9668ms; animation-duration: 9668ms; -webkit-animation-delay: 2086ms; animation-delay: 2086ms; } @-webkit-keyframes move-frames-131 { from { transform: translate3d(34vw, 110vh, 0); } to { transform: translate3d(100vw, -129vh, 0); } } @keyframes move-frames-131 { from { transform: translate3d(34vw, 110vh, 0); } to { transform: translate3d(100vw, -129vh, 0); } } .circle-container:nth-child(131) .circle { -webkit-animation-delay: 2529ms; animation-delay: 2529ms; } .circle-container:nth-child(132) { width: 3px; height: 3px; -webkit-animation-name: move-frames-132; animation-name: move-frames-132; -webkit-animation-duration: 9432ms; animation-duration: 9432ms; -webkit-animation-delay: 9730ms; animation-delay: 9730ms; } @-webkit-keyframes move-frames-132 { from { transform: translate3d(51vw, 108vh, 0); } to { transform: translate3d(73vw, -118vh, 0); } } @keyframes move-frames-132 { from { transform: translate3d(51vw, 108vh, 0); } to { transform: translate3d(73vw, -118vh, 0); } } .circle-container:nth-child(132) .circle { -webkit-animation-delay: 2124ms; animation-delay: 2124ms; } .circle-container:nth-child(133) { width: 5px; height: 5px; -webkit-animation-name: move-frames-133; animation-name: move-frames-133; -webkit-animation-duration: 9980ms; animation-duration: 9980ms; -webkit-animation-delay: 8511ms; animation-delay: 8511ms; } @-webkit-keyframes move-frames-133 { from { transform: translate3d(99vw, 101vh, 0); } to { transform: translate3d(36vw, -104vh, 0); } } @keyframes move-frames-133 { from { transform: translate3d(99vw, 101vh, 0); } to { transform: translate3d(36vw, -104vh, 0); } } .circle-container:nth-child(133) .circle { -webkit-animation-delay: 2748ms; animation-delay: 2748ms; } .circle-container:nth-child(134) { width: 1px; height: 1px; -webkit-animation-name: move-frames-134; animation-name: move-frames-134; -webkit-animation-duration: 9752ms; animation-duration: 9752ms; -webkit-animation-delay: 5876ms; animation-delay: 5876ms; } @-webkit-keyframes move-frames-134 { from { transform: translate3d(43vw, 107vh, 0); } to { transform: translate3d(43vw, -118vh, 0); } } @keyframes move-frames-134 { from { transform: translate3d(43vw, 107vh, 0); } to { transform: translate3d(43vw, -118vh, 0); } } .circle-container:nth-child(134) .circle { -webkit-animation-delay: 3784ms; animation-delay: 3784ms; } .circle-container:nth-child(135) { width: 6px; height: 6px; -webkit-animation-name: move-frames-135; animation-name: move-frames-135; -webkit-animation-duration: 8678ms; animation-duration: 8678ms; -webkit-animation-delay: 1911ms; animation-delay: 1911ms; } @-webkit-keyframes move-frames-135 { from { transform: translate3d(37vw, 105vh, 0); } to { transform: translate3d(13vw, -122vh, 0); } } @keyframes move-frames-135 { from { transform: translate3d(37vw, 105vh, 0); } to { transform: translate3d(13vw, -122vh, 0); } } .circle-container:nth-child(135) .circle { -webkit-animation-delay: 479ms; animation-delay: 479ms; } .circle-container:nth-child(136) { width: 6px; height: 6px; -webkit-animation-name: move-frames-136; animation-name: move-frames-136; -webkit-animation-duration: 10196ms; animation-duration: 10196ms; -webkit-animation-delay: 9082ms; animation-delay: 9082ms; } @-webkit-keyframes move-frames-136 { from { transform: translate3d(15vw, 103vh, 0); } to { transform: translate3d(88vw, -111vh, 0); } } @keyframes move-frames-136 { from { transform: translate3d(15vw, 103vh, 0); } to { transform: translate3d(88vw, -111vh, 0); } } .circle-container:nth-child(136) .circle { -webkit-animation-delay: 841ms; animation-delay: 841ms; } .circle-container:nth-child(137) { width: 10px; height: 10px; -webkit-animation-name: move-frames-137; animation-name: move-frames-137; -webkit-animation-duration: 8065ms; animation-duration: 8065ms; -webkit-animation-delay: 1718ms; animation-delay: 1718ms; } @-webkit-keyframes move-frames-137 { from { transform: translate3d(79vw, 106vh, 0); } to { transform: translate3d(45vw, -133vh, 0); } } @keyframes move-frames-137 { from { transform: translate3d(79vw, 106vh, 0); } to { transform: translate3d(45vw, -133vh, 0); } } .circle-container:nth-child(137) .circle { -webkit-animation-delay: 2091ms; animation-delay: 2091ms; } .circle-container:nth-child(138) { width: 5px; height: 5px; -webkit-animation-name: move-frames-138; animation-name: move-frames-138; -webkit-animation-duration: 9353ms; animation-duration: 9353ms; -webkit-animation-delay: 2797ms; animation-delay: 2797ms; } @-webkit-keyframes move-frames-138 { from { transform: translate3d(21vw, 102vh, 0); } to { transform: translate3d(96vw, -112vh, 0); } } @keyframes move-frames-138 { from { transform: translate3d(21vw, 102vh, 0); } to { transform: translate3d(96vw, -112vh, 0); } } .circle-container:nth-child(138) .circle { -webkit-animation-delay: 1067ms; animation-delay: 1067ms; } .circle-container:nth-child(139) { width: 3px; height: 3px; -webkit-animation-name: move-frames-139; animation-name: move-frames-139; -webkit-animation-duration: 10078ms; animation-duration: 10078ms; -webkit-animation-delay: 5299ms; animation-delay: 5299ms; } @-webkit-keyframes move-frames-139 { from { transform: translate3d(66vw, 107vh, 0); } to { transform: translate3d(37vw, -137vh, 0); } } @keyframes move-frames-139 { from { transform: translate3d(66vw, 107vh, 0); } to { transform: translate3d(37vw, -137vh, 0); } } .circle-container:nth-child(139) .circle { -webkit-animation-delay: 1721ms; animation-delay: 1721ms; } .circle-container:nth-child(140) { width: 5px; height: 5px; -webkit-animation-name: move-frames-140; animation-name: move-frames-140; -webkit-animation-duration: 8426ms; animation-duration: 8426ms; -webkit-animation-delay: 411ms; animation-delay: 411ms; } @-webkit-keyframes move-frames-140 { from { transform: translate3d(93vw, 105vh, 0); } to { transform: translate3d(42vw, -117vh, 0); } } @keyframes move-frames-140 { from { transform: translate3d(93vw, 105vh, 0); } to { transform: translate3d(42vw, -117vh, 0); } } .circle-container:nth-child(140) .circle { -webkit-animation-delay: 1580ms; animation-delay: 1580ms; } .circle-container:nth-child(141) { width: 2px; height: 2px; -webkit-animation-name: move-frames-141; animation-name: move-frames-141; -webkit-animation-duration: 8698ms; animation-duration: 8698ms; -webkit-animation-delay: 5204ms; animation-delay: 5204ms; } @-webkit-keyframes move-frames-141 { from { transform: translate3d(7vw, 102vh, 0); } to { transform: translate3d(47vw, -122vh, 0); } } @keyframes move-frames-141 { from { transform: translate3d(7vw, 102vh, 0); } to { transform: translate3d(47vw, -122vh, 0); } } .circle-container:nth-child(141) .circle { -webkit-animation-delay: 548ms; animation-delay: 548ms; } .circle-container:nth-child(142) { width: 1px; height: 1px; -webkit-animation-name: move-frames-142; animation-name: move-frames-142; -webkit-animation-duration: 9011ms; animation-duration: 9011ms; -webkit-animation-delay: 1468ms; animation-delay: 1468ms; } @-webkit-keyframes move-frames-142 { from { transform: translate3d(97vw, 107vh, 0); } to { transform: translate3d(58vw, -128vh, 0); } } @keyframes move-frames-142 { from { transform: translate3d(97vw, 107vh, 0); } to { transform: translate3d(58vw, -128vh, 0); } } .circle-container:nth-child(142) .circle { -webkit-animation-delay: 3410ms; animation-delay: 3410ms; } .circle-container:nth-child(143) { width: 5px; height: 5px; -webkit-animation-name: move-frames-143; animation-name: move-frames-143; -webkit-animation-duration: 10138ms; animation-duration: 10138ms; -webkit-animation-delay: 9697ms; animation-delay: 9697ms; } @-webkit-keyframes move-frames-143 { from { transform: translate3d(69vw, 108vh, 0); } to { transform: translate3d(42vw, -131vh, 0); } } @keyframes move-frames-143 { from { transform: translate3d(69vw, 108vh, 0); } to { transform: translate3d(42vw, -131vh, 0); } } .circle-container:nth-child(143) .circle { -webkit-animation-delay: 3307ms; animation-delay: 3307ms; } .circle-container:nth-child(144) { width: 6px; height: 6px; -webkit-animation-name: move-frames-144; animation-name: move-frames-144; -webkit-animation-duration: 9422ms; animation-duration: 9422ms; -webkit-animation-delay: 8575ms; animation-delay: 8575ms; } @-webkit-keyframes move-frames-144 { from { transform: translate3d(68vw, 108vh, 0); } to { transform: translate3d(40vw, -133vh, 0); } } @keyframes move-frames-144 { from { transform: translate3d(68vw, 108vh, 0); } to { transform: translate3d(40vw, -133vh, 0); } } .circle-container:nth-child(144) .circle { -webkit-animation-delay: 1660ms; animation-delay: 1660ms; } .circle-container:nth-child(145) { width: 8px; height: 8px; -webkit-animation-name: move-frames-145; animation-name: move-frames-145; -webkit-animation-duration: 8981ms; animation-duration: 8981ms; -webkit-animation-delay: 7019ms; animation-delay: 7019ms; } @-webkit-keyframes move-frames-145 { from { transform: translate3d(62vw, 105vh, 0); } to { transform: translate3d(3vw, -114vh, 0); } } @keyframes move-frames-145 { from { transform: translate3d(62vw, 105vh, 0); } to { transform: translate3d(3vw, -114vh, 0); } } .circle-container:nth-child(145) .circle { -webkit-animation-delay: 2437ms; animation-delay: 2437ms; } .circle-container:nth-child(146) { width: 5px; height: 5px; -webkit-animation-name: move-frames-146; animation-name: move-frames-146; -webkit-animation-duration: 10788ms; animation-duration: 10788ms; -webkit-animation-delay: 7274ms; animation-delay: 7274ms; } @-webkit-keyframes move-frames-146 { from { transform: translate3d(33vw, 110vh, 0); } to { transform: translate3d(95vw, -115vh, 0); } } @keyframes move-frames-146 { from { transform: translate3d(33vw, 110vh, 0); } to { transform: translate3d(95vw, -115vh, 0); } } .circle-container:nth-child(146) .circle { -webkit-animation-delay: 1038ms; animation-delay: 1038ms; } .circle-container:nth-child(147) { width: 2px; height: 2px; -webkit-animation-name: move-frames-147; animation-name: move-frames-147; -webkit-animation-duration: 7361ms; animation-duration: 7361ms; -webkit-animation-delay: 5274ms; animation-delay: 5274ms; } @-webkit-keyframes move-frames-147 { from { transform: translate3d(73vw, 110vh, 0); } to { transform: translate3d(96vw, -112vh, 0); } } @keyframes move-frames-147 { from { transform: translate3d(73vw, 110vh, 0); } to { transform: translate3d(96vw, -112vh, 0); } } .circle-container:nth-child(147) .circle { -webkit-animation-delay: 2102ms; animation-delay: 2102ms; } .circle-container:nth-child(148) { width: 3px; height: 3px; -webkit-animation-name: move-frames-148; animation-name: move-frames-148; -webkit-animation-duration: 9031ms; animation-duration: 9031ms; -webkit-animation-delay: 4795ms; animation-delay: 4795ms; } @-webkit-keyframes move-frames-148 { from { transform: translate3d(69vw, 104vh, 0); } to { transform: translate3d(37vw, -105vh, 0); } } @keyframes move-frames-148 { from { transform: translate3d(69vw, 104vh, 0); } to { transform: translate3d(37vw, -105vh, 0); } } .circle-container:nth-child(148) .circle { -webkit-animation-delay: 1862ms; animation-delay: 1862ms; } .circle-container:nth-child(149) { width: 4px; height: 4px; -webkit-animation-name: move-frames-149; animation-name: move-frames-149; -webkit-animation-duration: 9101ms; animation-duration: 9101ms; -webkit-animation-delay: 6589ms; animation-delay: 6589ms; } @-webkit-keyframes move-frames-149 { from { transform: translate3d(22vw, 103vh, 0); } to { transform: translate3d(25vw, -127vh, 0); } } @keyframes move-frames-149 { from { transform: translate3d(22vw, 103vh, 0); } to { transform: translate3d(25vw, -127vh, 0); } } .circle-container:nth-child(149) .circle { -webkit-animation-delay: 3081ms; animation-delay: 3081ms; } .circle-container:nth-child(150) { width: 6px; height: 6px; -webkit-animation-name: move-frames-150; animation-name: move-frames-150; -webkit-animation-duration: 9750ms; animation-duration: 9750ms; -webkit-animation-delay: 7122ms; animation-delay: 7122ms; } @-webkit-keyframes move-frames-150 { from { transform: translate3d(30vw, 103vh, 0); } to { transform: translate3d(24vw, -128vh, 0); } } @keyframes move-frames-150 { from { transform: translate3d(30vw, 103vh, 0); } to { transform: translate3d(24vw, -128vh, 0); } } .circle-container:nth-child(150) .circle { -webkit-animation-delay: 289ms; animation-delay: 289ms; } .circle-container:nth-child(151) { width: 9px; height: 9px; -webkit-animation-name: move-frames-151; animation-name: move-frames-151; -webkit-animation-duration: 9601ms; animation-duration: 9601ms; -webkit-animation-delay: 8667ms; animation-delay: 8667ms; } @-webkit-keyframes move-frames-151 { from { transform: translate3d(82vw, 105vh, 0); } to { transform: translate3d(64vw, -132vh, 0); } } @keyframes move-frames-151 { from { transform: translate3d(82vw, 105vh, 0); } to { transform: translate3d(64vw, -132vh, 0); } } .circle-container:nth-child(151) .circle { -webkit-animation-delay: 1740ms; animation-delay: 1740ms; } .circle-container:nth-child(152) { width: 3px; height: 3px; -webkit-animation-name: move-frames-152; animation-name: move-frames-152; -webkit-animation-duration: 10557ms; animation-duration: 10557ms; -webkit-animation-delay: 9574ms; animation-delay: 9574ms; } @-webkit-keyframes move-frames-152 { from { transform: translate3d(19vw, 108vh, 0); } to { transform: translate3d(89vw, -120vh, 0); } } @keyframes move-frames-152 { from { transform: translate3d(19vw, 108vh, 0); } to { transform: translate3d(89vw, -120vh, 0); } } .circle-container:nth-child(152) .circle { -webkit-animation-delay: 680ms; animation-delay: 680ms; } .circle-container:nth-child(153) { width: 6px; height: 6px; -webkit-animation-name: move-frames-153; animation-name: move-frames-153; -webkit-animation-duration: 8849ms; animation-duration: 8849ms; -webkit-animation-delay: 4779ms; animation-delay: 4779ms; } @-webkit-keyframes move-frames-153 { from { transform: translate3d(13vw, 109vh, 0); } to { transform: translate3d(62vw, -129vh, 0); } } @keyframes move-frames-153 { from { transform: translate3d(13vw, 109vh, 0); } to { transform: translate3d(62vw, -129vh, 0); } } .circle-container:nth-child(153) .circle { -webkit-animation-delay: 789ms; animation-delay: 789ms; } .circle-container:nth-child(154) { width: 9px; height: 9px; -webkit-animation-name: move-frames-154; animation-name: move-frames-154; -webkit-animation-duration: 7667ms; animation-duration: 7667ms; -webkit-animation-delay: 772ms; animation-delay: 772ms; } @-webkit-keyframes move-frames-154 { from { transform: translate3d(34vw, 107vh, 0); } to { transform: translate3d(83vw, -118vh, 0); } } @keyframes move-frames-154 { from { transform: translate3d(34vw, 107vh, 0); } to { transform: translate3d(83vw, -118vh, 0); } } .circle-container:nth-child(154) .circle { -webkit-animation-delay: 1236ms; animation-delay: 1236ms; } .circle-container:nth-child(155) { width: 4px; height: 4px; -webkit-animation-name: move-frames-155; animation-name: move-frames-155; -webkit-animation-duration: 7819ms; animation-duration: 7819ms; -webkit-animation-delay: 137ms; animation-delay: 137ms; } @-webkit-keyframes move-frames-155 { from { transform: translate3d(90vw, 107vh, 0); } to { transform: translate3d(31vw, -119vh, 0); } } @keyframes move-frames-155 { from { transform: translate3d(90vw, 107vh, 0); } to { transform: translate3d(31vw, -119vh, 0); } } .circle-container:nth-child(155) .circle { -webkit-animation-delay: 1065ms; animation-delay: 1065ms; } .circle-container:nth-child(156) { width: 2px; height: 2px; -webkit-animation-name: move-frames-156; animation-name: move-frames-156; -webkit-animation-duration: 9626ms; animation-duration: 9626ms; -webkit-animation-delay: 1922ms; animation-delay: 1922ms; } @-webkit-keyframes move-frames-156 { from { transform: translate3d(17vw, 109vh, 0); } to { transform: translate3d(81vw, -134vh, 0); } } @keyframes move-frames-156 { from { transform: translate3d(17vw, 109vh, 0); } to { transform: translate3d(81vw, -134vh, 0); } } .circle-container:nth-child(156) .circle { -webkit-animation-delay: 103ms; animation-delay: 103ms; } .circle-container:nth-child(157) { width: 4px; height: 4px; -webkit-animation-name: move-frames-157; animation-name: move-frames-157; -webkit-animation-duration: 8060ms; animation-duration: 8060ms; -webkit-animation-delay: 1504ms; animation-delay: 1504ms; } @-webkit-keyframes move-frames-157 { from { transform: translate3d(46vw, 105vh, 0); } to { transform: translate3d(96vw, -124vh, 0); } } @keyframes move-frames-157 { from { transform: translate3d(46vw, 105vh, 0); } to { transform: translate3d(96vw, -124vh, 0); } } .circle-container:nth-child(157) .circle { -webkit-animation-delay: 1203ms; animation-delay: 1203ms; } .circle-container:nth-child(158) { width: 1px; height: 1px; -webkit-animation-name: move-frames-158; animation-name: move-frames-158; -webkit-animation-duration: 7068ms; animation-duration: 7068ms; -webkit-animation-delay: 10635ms; animation-delay: 10635ms; } @-webkit-keyframes move-frames-158 { from { transform: translate3d(79vw, 103vh, 0); } to { transform: translate3d(28vw, -106vh, 0); } } @keyframes move-frames-158 { from { transform: translate3d(79vw, 103vh, 0); } to { transform: translate3d(28vw, -106vh, 0); } } .circle-container:nth-child(158) .circle { -webkit-animation-delay: 3220ms; animation-delay: 3220ms; } .circle-container:nth-child(159) { width: 7px; height: 7px; -webkit-animation-name: move-frames-159; animation-name: move-frames-159; -webkit-animation-duration: 8146ms; animation-duration: 8146ms; -webkit-animation-delay: 5738ms; animation-delay: 5738ms; } @-webkit-keyframes move-frames-159 { from { transform: translate3d(69vw, 101vh, 0); } to { transform: translate3d(76vw, -125vh, 0); } } @keyframes move-frames-159 { from { transform: translate3d(69vw, 101vh, 0); } to { transform: translate3d(76vw, -125vh, 0); } } .circle-container:nth-child(159) .circle { -webkit-animation-delay: 1567ms; animation-delay: 1567ms; } .circle-container:nth-child(160) { width: 1px; height: 1px; -webkit-animation-name: move-frames-160; animation-name: move-frames-160; -webkit-animation-duration: 9289ms; animation-duration: 9289ms; -webkit-animation-delay: 8278ms; animation-delay: 8278ms; } @-webkit-keyframes move-frames-160 { from { transform: translate3d(3vw, 102vh, 0); } to { transform: translate3d(27vw, -121vh, 0); } } @keyframes move-frames-160 { from { transform: translate3d(3vw, 102vh, 0); } to { transform: translate3d(27vw, -121vh, 0); } } .circle-container:nth-child(160) .circle { -webkit-animation-delay: 2939ms; animation-delay: 2939ms; } .circle-container:nth-child(161) { width: 3px; height: 3px; -webkit-animation-name: move-frames-161; animation-name: move-frames-161; -webkit-animation-duration: 8442ms; animation-duration: 8442ms; -webkit-animation-delay: 7004ms; animation-delay: 7004ms; } @-webkit-keyframes move-frames-161 { from { transform: translate3d(30vw, 103vh, 0); } to { transform: translate3d(52vw, -108vh, 0); } } @keyframes move-frames-161 { from { transform: translate3d(30vw, 103vh, 0); } to { transform: translate3d(52vw, -108vh, 0); } } .circle-container:nth-child(161) .circle { -webkit-animation-delay: 1247ms; animation-delay: 1247ms; } .circle-container:nth-child(162) { width: 8px; height: 8px; -webkit-animation-name: move-frames-162; animation-name: move-frames-162; -webkit-animation-duration: 8723ms; animation-duration: 8723ms; -webkit-animation-delay: 4853ms; animation-delay: 4853ms; } @-webkit-keyframes move-frames-162 { from { transform: translate3d(80vw, 103vh, 0); } to { transform: translate3d(85vw, -123vh, 0); } } @keyframes move-frames-162 { from { transform: translate3d(80vw, 103vh, 0); } to { transform: translate3d(85vw, -123vh, 0); } } .circle-container:nth-child(162) .circle { -webkit-animation-delay: 2432ms; animation-delay: 2432ms; } .circle-container:nth-child(163) { width: 3px; height: 3px; -webkit-animation-name: move-frames-163; animation-name: move-frames-163; -webkit-animation-duration: 9794ms; animation-duration: 9794ms; -webkit-animation-delay: 2727ms; animation-delay: 2727ms; } @-webkit-keyframes move-frames-163 { from { transform: translate3d(85vw, 107vh, 0); } to { transform: translate3d(58vw, -131vh, 0); } } @keyframes move-frames-163 { from { transform: translate3d(85vw, 107vh, 0); } to { transform: translate3d(58vw, -131vh, 0); } } .circle-container:nth-child(163) .circle { -webkit-animation-delay: 2598ms; animation-delay: 2598ms; } .circle-container:nth-child(164) { width: 9px; height: 9px; -webkit-animation-name: move-frames-164; animation-name: move-frames-164; -webkit-animation-duration: 9792ms; animation-duration: 9792ms; -webkit-animation-delay: 10109ms; animation-delay: 10109ms; } @-webkit-keyframes move-frames-164 { from { transform: translate3d(65vw, 108vh, 0); } to { transform: translate3d(75vw, -129vh, 0); } } @keyframes move-frames-164 { from { transform: translate3d(65vw, 108vh, 0); } to { transform: translate3d(75vw, -129vh, 0); } } .circle-container:nth-child(164) .circle { -webkit-animation-delay: 1146ms; animation-delay: 1146ms; } .circle-container:nth-child(165) { width: 5px; height: 5px; -webkit-animation-name: move-frames-165; animation-name: move-frames-165; -webkit-animation-duration: 9455ms; animation-duration: 9455ms; -webkit-animation-delay: 4783ms; animation-delay: 4783ms; } @-webkit-keyframes move-frames-165 { from { transform: translate3d(96vw, 102vh, 0); } to { transform: translate3d(68vw, -130vh, 0); } } @keyframes move-frames-165 { from { transform: translate3d(96vw, 102vh, 0); } to { transform: translate3d(68vw, -130vh, 0); } } .circle-container:nth-child(165) .circle { -webkit-animation-delay: 2520ms; animation-delay: 2520ms; } .circle-container:nth-child(166) { width: 8px; height: 8px; -webkit-animation-name: move-frames-166; animation-name: move-frames-166; -webkit-animation-duration: 7482ms; animation-duration: 7482ms; -webkit-animation-delay: 5301ms; animation-delay: 5301ms; } @-webkit-keyframes move-frames-166 { from { transform: translate3d(4vw, 105vh, 0); } to { transform: translate3d(36vw, -122vh, 0); } } @keyframes move-frames-166 { from { transform: translate3d(4vw, 105vh, 0); } to { transform: translate3d(36vw, -122vh, 0); } } .circle-container:nth-child(166) .circle { -webkit-animation-delay: 3286ms; animation-delay: 3286ms; } .circle-container:nth-child(167) { width: 7px; height: 7px; -webkit-animation-name: move-frames-167; animation-name: move-frames-167; -webkit-animation-duration: 7035ms; animation-duration: 7035ms; -webkit-animation-delay: 10974ms; animation-delay: 10974ms; } @-webkit-keyframes move-frames-167 { from { transform: translate3d(20vw, 104vh, 0); } to { transform: translate3d(86vw, -107vh, 0); } } @keyframes move-frames-167 { from { transform: translate3d(20vw, 104vh, 0); } to { transform: translate3d(86vw, -107vh, 0); } } .circle-container:nth-child(167) .circle { -webkit-animation-delay: 183ms; animation-delay: 183ms; } .circle-container:nth-child(168) { width: 9px; height: 9px; -webkit-animation-name: move-frames-168; animation-name: move-frames-168; -webkit-animation-duration: 10486ms; animation-duration: 10486ms; -webkit-animation-delay: 1038ms; animation-delay: 1038ms; } @-webkit-keyframes move-frames-168 { from { transform: translate3d(62vw, 108vh, 0); } to { transform: translate3d(96vw, -136vh, 0); } } @keyframes move-frames-168 { from { transform: translate3d(62vw, 108vh, 0); } to { transform: translate3d(96vw, -136vh, 0); } } .circle-container:nth-child(168) .circle { -webkit-animation-delay: 2146ms; animation-delay: 2146ms; } .circle-container:nth-child(169) { width: 3px; height: 3px; -webkit-animation-name: move-frames-169; animation-name: move-frames-169; -webkit-animation-duration: 8067ms; animation-duration: 8067ms; -webkit-animation-delay: 8320ms; animation-delay: 8320ms; } @-webkit-keyframes move-frames-169 { from { transform: translate3d(52vw, 102vh, 0); } to { transform: translate3d(51vw, -125vh, 0); } } @keyframes move-frames-169 { from { transform: translate3d(52vw, 102vh, 0); } to { transform: translate3d(51vw, -125vh, 0); } } .circle-container:nth-child(169) .circle { -webkit-animation-delay: 3117ms; animation-delay: 3117ms; } .circle-container:nth-child(170) { width: 8px; height: 8px; -webkit-animation-name: move-frames-170; animation-name: move-frames-170; -webkit-animation-duration: 8523ms; animation-duration: 8523ms; -webkit-animation-delay: 6083ms; animation-delay: 6083ms; } @-webkit-keyframes move-frames-170 { from { transform: translate3d(71vw, 110vh, 0); } to { transform: translate3d(49vw, -129vh, 0); } } @keyframes move-frames-170 { from { transform: translate3d(71vw, 110vh, 0); } to { transform: translate3d(49vw, -129vh, 0); } } .circle-container:nth-child(170) .circle { -webkit-animation-delay: 3313ms; animation-delay: 3313ms; } .circle-container:nth-child(171) { width: 3px; height: 3px; -webkit-animation-name: move-frames-171; animation-name: move-frames-171; -webkit-animation-duration: 10754ms; animation-duration: 10754ms; -webkit-animation-delay: 6486ms; animation-delay: 6486ms; } @-webkit-keyframes move-frames-171 { from { transform: translate3d(62vw, 103vh, 0); } to { transform: translate3d(87vw, -125vh, 0); } } @keyframes move-frames-171 { from { transform: translate3d(62vw, 103vh, 0); } to { transform: translate3d(87vw, -125vh, 0); } } .circle-container:nth-child(171) .circle { -webkit-animation-delay: 208ms; animation-delay: 208ms; } .circle-container:nth-child(172) { width: 8px; height: 8px; -webkit-animation-name: move-frames-172; animation-name: move-frames-172; -webkit-animation-duration: 10505ms; animation-duration: 10505ms; -webkit-animation-delay: 5069ms; animation-delay: 5069ms; } @-webkit-keyframes move-frames-172 { from { transform: translate3d(71vw, 101vh, 0); } to { transform: translate3d(81vw, -110vh, 0); } } @keyframes move-frames-172 { from { transform: translate3d(71vw, 101vh, 0); } to { transform: translate3d(81vw, -110vh, 0); } } .circle-container:nth-child(172) .circle { -webkit-animation-delay: 3864ms; animation-delay: 3864ms; } .circle-container:nth-child(173) { width: 5px; height: 5px; -webkit-animation-name: move-frames-173; animation-name: move-frames-173; -webkit-animation-duration: 10797ms; animation-duration: 10797ms; -webkit-animation-delay: 7751ms; animation-delay: 7751ms; } @-webkit-keyframes move-frames-173 { from { transform: translate3d(46vw, 105vh, 0); } to { transform: translate3d(69vw, -132vh, 0); } } @keyframes move-frames-173 { from { transform: translate3d(46vw, 105vh, 0); } to { transform: translate3d(69vw, -132vh, 0); } } .circle-container:nth-child(173) .circle { -webkit-animation-delay: 3383ms; animation-delay: 3383ms; } .circle-container:nth-child(174) { width: 8px; height: 8px; -webkit-animation-name: move-frames-174; animation-name: move-frames-174; -webkit-animation-duration: 7820ms; animation-duration: 7820ms; -webkit-animation-delay: 3832ms; animation-delay: 3832ms; } @-webkit-keyframes move-frames-174 { from { transform: translate3d(45vw, 108vh, 0); } to { transform: translate3d(40vw, -121vh, 0); } } @keyframes move-frames-174 { from { transform: translate3d(45vw, 108vh, 0); } to { transform: translate3d(40vw, -121vh, 0); } } .circle-container:nth-child(174) .circle { -webkit-animation-delay: 1418ms; animation-delay: 1418ms; } .circle-container:nth-child(175) { width: 1px; height: 1px; -webkit-animation-name: move-frames-175; animation-name: move-frames-175; -webkit-animation-duration: 7302ms; animation-duration: 7302ms; -webkit-animation-delay: 7773ms; animation-delay: 7773ms; } @-webkit-keyframes move-frames-175 { from { transform: translate3d(82vw, 104vh, 0); } to { transform: translate3d(74vw, -120vh, 0); } } @keyframes move-frames-175 { from { transform: translate3d(82vw, 104vh, 0); } to { transform: translate3d(74vw, -120vh, 0); } } .circle-container:nth-child(175) .circle { -webkit-animation-delay: 800ms; animation-delay: 800ms; } .circle-container:nth-child(176) { width: 7px; height: 7px; -webkit-animation-name: move-frames-176; animation-name: move-frames-176; -webkit-animation-duration: 8907ms; animation-duration: 8907ms; -webkit-animation-delay: 6006ms; animation-delay: 6006ms; } @-webkit-keyframes move-frames-176 { from { transform: translate3d(18vw, 107vh, 0); } to { transform: translate3d(30vw, -137vh, 0); } } @keyframes move-frames-176 { from { transform: translate3d(18vw, 107vh, 0); } to { transform: translate3d(30vw, -137vh, 0); } } .circle-container:nth-child(176) .circle { -webkit-animation-delay: 2255ms; animation-delay: 2255ms; } .circle-container:nth-child(177) { width: 10px; height: 10px; -webkit-animation-name: move-frames-177; animation-name: move-frames-177; -webkit-animation-duration: 9583ms; animation-duration: 9583ms; -webkit-animation-delay: 10469ms; animation-delay: 10469ms; } @-webkit-keyframes move-frames-177 { from { transform: translate3d(35vw, 103vh, 0); } to { transform: translate3d(31vw, -111vh, 0); } } @keyframes move-frames-177 { from { transform: translate3d(35vw, 103vh, 0); } to { transform: translate3d(31vw, -111vh, 0); } } .circle-container:nth-child(177) .circle { -webkit-animation-delay: 25ms; animation-delay: 25ms; } .circle-container:nth-child(178) { width: 8px; height: 8px; -webkit-animation-name: move-frames-178; animation-name: move-frames-178; -webkit-animation-duration: 10900ms; animation-duration: 10900ms; -webkit-animation-delay: 8506ms; animation-delay: 8506ms; } @-webkit-keyframes move-frames-178 { from { transform: translate3d(58vw, 104vh, 0); } to { transform: translate3d(45vw, -131vh, 0); } } @keyframes move-frames-178 { from { transform: translate3d(58vw, 104vh, 0); } to { transform: translate3d(45vw, -131vh, 0); } } .circle-container:nth-child(178) .circle { -webkit-animation-delay: 1182ms; animation-delay: 1182ms; } .circle-container:nth-child(179) { width: 5px; height: 5px; -webkit-animation-name: move-frames-179; animation-name: move-frames-179; -webkit-animation-duration: 7139ms; animation-duration: 7139ms; -webkit-animation-delay: 9159ms; animation-delay: 9159ms; } @-webkit-keyframes move-frames-179 { from { transform: translate3d(29vw, 101vh, 0); } to { transform: translate3d(72vw, -102vh, 0); } } @keyframes move-frames-179 { from { transform: translate3d(29vw, 101vh, 0); } to { transform: translate3d(72vw, -102vh, 0); } } .circle-container:nth-child(179) .circle { -webkit-animation-delay: 3673ms; animation-delay: 3673ms; } .circle-container:nth-child(180) { width: 5px; height: 5px; -webkit-animation-name: move-frames-180; animation-name: move-frames-180; -webkit-animation-duration: 8529ms; animation-duration: 8529ms; -webkit-animation-delay: 9959ms; animation-delay: 9959ms; } @-webkit-keyframes move-frames-180 { from { transform: translate3d(51vw, 103vh, 0); } to { transform: translate3d(54vw, -106vh, 0); } } @keyframes move-frames-180 { from { transform: translate3d(51vw, 103vh, 0); } to { transform: translate3d(54vw, -106vh, 0); } } .circle-container:nth-child(180) .circle { -webkit-animation-delay: 1658ms; animation-delay: 1658ms; } .circle-container:nth-child(181) { width: 10px; height: 10px; -webkit-animation-name: move-frames-181; animation-name: move-frames-181; -webkit-animation-duration: 9243ms; animation-duration: 9243ms; -webkit-animation-delay: 2303ms; animation-delay: 2303ms; } @-webkit-keyframes move-frames-181 { from { transform: translate3d(57vw, 102vh, 0); } to { transform: translate3d(68vw, -127vh, 0); } } @keyframes move-frames-181 { from { transform: translate3d(57vw, 102vh, 0); } to { transform: translate3d(68vw, -127vh, 0); } } .circle-container:nth-child(181) .circle { -webkit-animation-delay: 2316ms; animation-delay: 2316ms; } .circle-container:nth-child(182) { width: 8px; height: 8px; -webkit-animation-name: move-frames-182; animation-name: move-frames-182; -webkit-animation-duration: 10961ms; animation-duration: 10961ms; -webkit-animation-delay: 5038ms; animation-delay: 5038ms; } @-webkit-keyframes move-frames-182 { from { transform: translate3d(26vw, 101vh, 0); } to { transform: translate3d(82vw, -130vh, 0); } } @keyframes move-frames-182 { from { transform: translate3d(26vw, 101vh, 0); } to { transform: translate3d(82vw, -130vh, 0); } } .circle-container:nth-child(182) .circle { -webkit-animation-delay: 3147ms; animation-delay: 3147ms; } .circle-container:nth-child(183) { width: 9px; height: 9px; -webkit-animation-name: move-frames-183; animation-name: move-frames-183; -webkit-animation-duration: 10198ms; animation-duration: 10198ms; -webkit-animation-delay: 3422ms; animation-delay: 3422ms; } @-webkit-keyframes move-frames-183 { from { transform: translate3d(89vw, 109vh, 0); } to { transform: translate3d(14vw, -123vh, 0); } } @keyframes move-frames-183 { from { transform: translate3d(89vw, 109vh, 0); } to { transform: translate3d(14vw, -123vh, 0); } } .circle-container:nth-child(183) .circle { -webkit-animation-delay: 1615ms; animation-delay: 1615ms; } .circle-container:nth-child(184) { width: 2px; height: 2px; -webkit-animation-name: move-frames-184; animation-name: move-frames-184; -webkit-animation-duration: 9059ms; animation-duration: 9059ms; -webkit-animation-delay: 1632ms; animation-delay: 1632ms; } @-webkit-keyframes move-frames-184 { from { transform: translate3d(49vw, 106vh, 0); } to { transform: translate3d(4vw, -131vh, 0); } } @keyframes move-frames-184 { from { transform: translate3d(49vw, 106vh, 0); } to { transform: translate3d(4vw, -131vh, 0); } } .circle-container:nth-child(184) .circle { -webkit-animation-delay: 3887ms; animation-delay: 3887ms; } .circle-container:nth-child(185) { width: 8px; height: 8px; -webkit-animation-name: move-frames-185; animation-name: move-frames-185; -webkit-animation-duration: 10240ms; animation-duration: 10240ms; -webkit-animation-delay: 471ms; animation-delay: 471ms; } @-webkit-keyframes move-frames-185 { from { transform: translate3d(20vw, 108vh, 0); } to { transform: translate3d(26vw, -128vh, 0); } } @keyframes move-frames-185 { from { transform: translate3d(20vw, 108vh, 0); } to { transform: translate3d(26vw, -128vh, 0); } } .circle-container:nth-child(185) .circle { -webkit-animation-delay: 2085ms; animation-delay: 2085ms; } .circle-container:nth-child(186) { width: 6px; height: 6px; -webkit-animation-name: move-frames-186; animation-name: move-frames-186; -webkit-animation-duration: 10179ms; animation-duration: 10179ms; -webkit-animation-delay: 3897ms; animation-delay: 3897ms; } @-webkit-keyframes move-frames-186 { from { transform: translate3d(19vw, 103vh, 0); } to { transform: translate3d(80vw, -130vh, 0); } } @keyframes move-frames-186 { from { transform: translate3d(19vw, 103vh, 0); } to { transform: translate3d(80vw, -130vh, 0); } } .circle-container:nth-child(186) .circle { -webkit-animation-delay: 3067ms; animation-delay: 3067ms; } .circle-container:nth-child(187) { width: 4px; height: 4px; -webkit-animation-name: move-frames-187; animation-name: move-frames-187; -webkit-animation-duration: 7704ms; animation-duration: 7704ms; -webkit-animation-delay: 8829ms; animation-delay: 8829ms; } @-webkit-keyframes move-frames-187 { from { transform: translate3d(16vw, 107vh, 0); } to { transform: translate3d(30vw, -132vh, 0); } } @keyframes move-frames-187 { from { transform: translate3d(16vw, 107vh, 0); } to { transform: translate3d(30vw, -132vh, 0); } } .circle-container:nth-child(187) .circle { -webkit-animation-delay: 1750ms; animation-delay: 1750ms; } .circle-container:nth-child(188) { width: 6px; height: 6px; -webkit-animation-name: move-frames-188; animation-name: move-frames-188; -webkit-animation-duration: 10659ms; animation-duration: 10659ms; -webkit-animation-delay: 5935ms; animation-delay: 5935ms; } @-webkit-keyframes move-frames-188 { from { transform: translate3d(83vw, 103vh, 0); } to { transform: translate3d(92vw, -113vh, 0); } } @keyframes move-frames-188 { from { transform: translate3d(83vw, 103vh, 0); } to { transform: translate3d(92vw, -113vh, 0); } } .circle-container:nth-child(188) .circle { -webkit-animation-delay: 200ms; animation-delay: 200ms; } .circle-container:nth-child(189) { width: 8px; height: 8px; -webkit-animation-name: move-frames-189; animation-name: move-frames-189; -webkit-animation-duration: 8013ms; animation-duration: 8013ms; -webkit-animation-delay: 7478ms; animation-delay: 7478ms; } @-webkit-keyframes move-frames-189 { from { transform: translate3d(11vw, 106vh, 0); } to { transform: translate3d(98vw, -126vh, 0); } } @keyframes move-frames-189 { from { transform: translate3d(11vw, 106vh, 0); } to { transform: translate3d(98vw, -126vh, 0); } } .circle-container:nth-child(189) .circle { -webkit-animation-delay: 3120ms; animation-delay: 3120ms; } .circle-container:nth-child(190) { width: 10px; height: 10px; -webkit-animation-name: move-frames-190; animation-name: move-frames-190; -webkit-animation-duration: 8275ms; animation-duration: 8275ms; -webkit-animation-delay: 7962ms; animation-delay: 7962ms; } @-webkit-keyframes move-frames-190 { from { transform: translate3d(69vw, 102vh, 0); } to { transform: translate3d(73vw, -111vh, 0); } } @keyframes move-frames-190 { from { transform: translate3d(69vw, 102vh, 0); } to { transform: translate3d(73vw, -111vh, 0); } } .circle-container:nth-child(190) .circle { -webkit-animation-delay: 3308ms; animation-delay: 3308ms; } .circle-container:nth-child(191) { width: 8px; height: 8px; -webkit-animation-name: move-frames-191; animation-name: move-frames-191; -webkit-animation-duration: 9664ms; animation-duration: 9664ms; -webkit-animation-delay: 9856ms; animation-delay: 9856ms; } @-webkit-keyframes move-frames-191 { from { transform: translate3d(18vw, 102vh, 0); } to { transform: translate3d(90vw, -125vh, 0); } } @keyframes move-frames-191 { from { transform: translate3d(18vw, 102vh, 0); } to { transform: translate3d(90vw, -125vh, 0); } } .circle-container:nth-child(191) .circle { -webkit-animation-delay: 841ms; animation-delay: 841ms; } .circle-container:nth-child(192) { width: 7px; height: 7px; -webkit-animation-name: move-frames-192; animation-name: move-frames-192; -webkit-animation-duration: 8543ms; animation-duration: 8543ms; -webkit-animation-delay: 7905ms; animation-delay: 7905ms; } @-webkit-keyframes move-frames-192 { from { transform: translate3d(9vw, 109vh, 0); } to { transform: translate3d(37vw, -118vh, 0); } } @keyframes move-frames-192 { from { transform: translate3d(9vw, 109vh, 0); } to { transform: translate3d(37vw, -118vh, 0); } } .circle-container:nth-child(192) .circle { -webkit-animation-delay: 2387ms; animation-delay: 2387ms; } .circle-container:nth-child(193) { width: 3px; height: 3px; -webkit-animation-name: move-frames-193; animation-name: move-frames-193; -webkit-animation-duration: 8705ms; animation-duration: 8705ms; -webkit-animation-delay: 3230ms; animation-delay: 3230ms; } @-webkit-keyframes move-frames-193 { from { transform: translate3d(48vw, 109vh, 0); } to { transform: translate3d(38vw, -116vh, 0); } } @keyframes move-frames-193 { from { transform: translate3d(48vw, 109vh, 0); } to { transform: translate3d(38vw, -116vh, 0); } } .circle-container:nth-child(193) .circle { -webkit-animation-delay: 179ms; animation-delay: 179ms; } .circle-container:nth-child(194) { width: 7px; height: 7px; -webkit-animation-name: move-frames-194; animation-name: move-frames-194; -webkit-animation-duration: 10334ms; animation-duration: 10334ms; -webkit-animation-delay: 2373ms; animation-delay: 2373ms; } @-webkit-keyframes move-frames-194 { from { transform: translate3d(2vw, 106vh, 0); } to { transform: translate3d(24vw, -122vh, 0); } } @keyframes move-frames-194 { from { transform: translate3d(2vw, 106vh, 0); } to { transform: translate3d(24vw, -122vh, 0); } } .circle-container:nth-child(194) .circle { -webkit-animation-delay: 1977ms; animation-delay: 1977ms; } .circle-container:nth-child(195) { width: 1px; height: 1px; -webkit-animation-name: move-frames-195; animation-name: move-frames-195; -webkit-animation-duration: 10093ms; animation-duration: 10093ms; -webkit-animation-delay: 9670ms; animation-delay: 9670ms; } @-webkit-keyframes move-frames-195 { from { transform: translate3d(27vw, 108vh, 0); } to { transform: translate3d(32vw, -121vh, 0); } } @keyframes move-frames-195 { from { transform: translate3d(27vw, 108vh, 0); } to { transform: translate3d(32vw, -121vh, 0); } } .circle-container:nth-child(195) .circle { -webkit-animation-delay: 794ms; animation-delay: 794ms; } .circle-container:nth-child(196) { width: 7px; height: 7px; -webkit-animation-name: move-frames-196; animation-name: move-frames-196; -webkit-animation-duration: 8628ms; animation-duration: 8628ms; -webkit-animation-delay: 9722ms; animation-delay: 9722ms; } @-webkit-keyframes move-frames-196 { from { transform: translate3d(55vw, 110vh, 0); } to { transform: translate3d(56vw, -121vh, 0); } } @keyframes move-frames-196 { from { transform: translate3d(55vw, 110vh, 0); } to { transform: translate3d(56vw, -121vh, 0); } } .circle-container:nth-child(196) .circle { -webkit-animation-delay: 3073ms; animation-delay: 3073ms; } .circle-container:nth-child(197) { width: 10px; height: 10px; -webkit-animation-name: move-frames-197; animation-name: move-frames-197; -webkit-animation-duration: 9484ms; animation-duration: 9484ms; -webkit-animation-delay: 4702ms; animation-delay: 4702ms; } @-webkit-keyframes move-frames-197 { from { transform: translate3d(67vw, 106vh, 0); } to { transform: translate3d(13vw, -109vh, 0); } } @keyframes move-frames-197 { from { transform: translate3d(67vw, 106vh, 0); } to { transform: translate3d(13vw, -109vh, 0); } } .circle-container:nth-child(197) .circle { -webkit-animation-delay: 3212ms; animation-delay: 3212ms; } .circle-container:nth-child(198) { width: 10px; height: 10px; -webkit-animation-name: move-frames-198; animation-name: move-frames-198; -webkit-animation-duration: 7106ms; animation-duration: 7106ms; -webkit-animation-delay: 6428ms; animation-delay: 6428ms; } @-webkit-keyframes move-frames-198 { from { transform: translate3d(16vw, 105vh, 0); } to { transform: translate3d(76vw, -128vh, 0); } } @keyframes move-frames-198 { from { transform: translate3d(16vw, 105vh, 0); } to { transform: translate3d(76vw, -128vh, 0); } } .circle-container:nth-child(198) .circle { -webkit-animation-delay: 3306ms; animation-delay: 3306ms; } .circle-container:nth-child(199) { width: 5px; height: 5px; -webkit-animation-name: move-frames-199; animation-name: move-frames-199; -webkit-animation-duration: 7457ms; animation-duration: 7457ms; -webkit-animation-delay: 7261ms; animation-delay: 7261ms; } @-webkit-keyframes move-frames-199 { from { transform: translate3d(4vw, 103vh, 0); } to { transform: translate3d(35vw, -108vh, 0); } } @keyframes move-frames-199 { from { transform: translate3d(4vw, 103vh, 0); } to { transform: translate3d(35vw, -108vh, 0); } } .circle-container:nth-child(199) .circle { -webkit-animation-delay: 1538ms; animation-delay: 1538ms; } .circle-container:nth-child(200) { width: 9px; height: 9px; -webkit-animation-name: move-frames-200; animation-name: move-frames-200; -webkit-animation-duration: 9886ms; animation-duration: 9886ms; -webkit-animation-delay: 3316ms; animation-delay: 3316ms; } @-webkit-keyframes move-frames-200 { from { transform: translate3d(42vw, 105vh, 0); } to { transform: translate3d(97vw, -107vh, 0); } } @keyframes move-frames-200 { from { transform: translate3d(42vw, 105vh, 0); } to { transform: translate3d(97vw, -107vh, 0); } } .circle-container:nth-child(200) .circle { -webkit-animation-delay: 2789ms; animation-delay: 2789ms; }

※この作品はCSSAnimationを駆使した作品になっています。※

[タイトル]Dead-End Apartment   [著作者]   [アーティスト]lasah × Lemm   [ゲームデザイン]ggfb (PC)

         

[レベル]中級者

 

同じレベルのステージ

 

[レベル]中級者

スピカ/ロクデナシ

★6.0 [1:09] niitame

[レベル]中級者

orangegirl sentiment

★5.5 [2:05] Ooooiwocha

[レベル]中級者

B.B.K.K.B.K.K.

★10.0 [2:07] Ooooiwocha

[レベル]中級者

DREAMER

★5.6 [1:51] ビビ

[レベル]中級者

Dragon Night

★8.3 [2:23] Ooooiwocha

[レベル]中級者

BOY MEETS GIRL

★5.6 [2:22] Ooooiwocha

[レベル]中級者

ドキメキダイアリー/asmi feat. Chinozo

★7.4 [1:25] ニャオハ

[レベル]中級者

Trailer (Full) – from “Pogostuck: Rage With Your Friends”／Ryan Burns / tooleyweed

★5.1 [0:48] Khibine

[レベル]中級者

Girlfriend [4keys]

★5.1 [1:24] Ooooiwocha

[レベル]中級者

人にやさしく

★5.9 [1:43] Ooooiwocha

同じ投稿者のステージ

 

[レベル]上級者

Aiobahn – 宙でおやすみ (feat. 長瀬有花) (Below Cloud Nine Remix)

★11.3 [1:56] ggfb

[レベル]エキスパート

Absurd Gaff / siromaru

★17.7 [2:06] ggfb

[レベル]中級者

[スマホ可] しかばねの踊り / きくお

★6.1 [1:25] ggfb

[レベル]上級者

: BUBBYTAFFY ! : / six impala

★12.0 [2:43] ggfb

[レベル]初心者

[スマホ可] 燈 / 崎山蒼志

★4.3 [1:30] ggfb

[レベル]初心者

[スマホ可] 花 / 藤井 風

★2.8 [1:33] ggfb

[レベル]上級者

人マニア / 原口沙輔

★10.0 [2:04] ggfb

[レベル]上級者

ライアーダンサー／重音テトSV

★10.1 [1:36] ggfb

[レベル]エキスパート

上人**阿闍梨謁見風説戯画仮名問答

★17.0 [1:57] ggfb

[レベル]エキスパート

近くて、遠くて / 長瀬有花

★17.0 [1:52] ggfb

[レベル]上級者

Hyperballad / コトリンゴ

★13.3 [3:11] ggfb

[レベル]上級者

Imprecated Angel / factal

★11.6 [3:03] ggfb

[レベル]上級者

back to 1999 w omxri / xaev

★10.5 [2:47] ggfb

[レベル]上級者

homeswitcher / Jane Remover · kmoe

★10.6 [2:20] ggfb

[レベル]初心者

[スマホ可] my time / bo en

★2.3 [1:33] ggfb

[レベル]初心者

[スマホ可] Departure is end of journey / 清水 嶺

★3.9 [1:40] ggfb

[レベル]上級者

19ZZ / unknown “λ” (Frums)

★12.7 [2:40] ggfb

[レベル]上級者

盗作 / ヨルシカ

★10.8 [4:00] ggfb

[レベル]上級者

勇者 / YOASOBI

★11.7 [1:55] ggfb

[レベル]中級者

フォニイ / ツミキ

★8.5 [1:24] ggfb

[レベル]中級者

[スマホ可] きゅうくらりん / いよわ feat.可不

★7.2 [1:03] ggfb

[レベル]初心者

[スマホ可] 対象a / anNina

★2.9 [1:47] ggfb

[レベル]エキスパート

cold planet / knot

★17.4 [2:06] ggfb

[レベル]上級者

initial / callasoiled

★11.9 [2:49] ggfb

[レベル]上級者

ルーキー / サカナクション

★10.9 [3:08] ggfb

[レベル]上級者

黒塗り世界宛て書簡 / フロクロ

★13.9 [2:04] ggfb

[レベル]上級者

intro impact (PAS TASTA remix) / PAS TASTA

★9.0 [2:15] ggfb

[レベル]初心者

昔の夢 / jitensha

★1.3 [1:52] ggfb

[レベル]中級者

[スマホ可] tym00.mid / ステル

★5.5 [1:34] ggfb