1.garden-petal {
2 background-image: url(../images/petal-frames/petal-frame-1.png);
3 width: 42px;
4 height: 46px;
5 top: 0px;
6 position: absolute;
7 image-rendering: pixelated;
8}
9
10#garden-petal-0{
11 left: 66.92377037808663vw;
12 animation: petal-frames 1.04660018417244s linear 0.7243594350257139s infinite, fall-0 24.78847594881208s 13.904007247644515s linear infinite;
13}
14#garden-petal-1{
15 left: 6.556111795477881vw;
16 animation: petal-frames 1.0492543338829352s linear 0.3119893367460741s infinite, fall-2 16.266321372575902s 2.303609980351742s linear infinite;
17}
18#garden-petal-2{
19 left: 36.994658574232254vw;
20 animation: petal-frames 1.025733998384534s linear 0.024805391182080694s infinite, fall-0 21.685749378155815s 0.38102506811986236s linear infinite;
21}
22#garden-petal-3{
23 left: 99.87884221766419vw;
24 animation: petal-frames 0.978018292499218s linear 0.9512277960417634s infinite, fall-0 19.725060203398833s 13.87418273541642s linear infinite;
25}
26#garden-petal-4{
27 left: 0.4837788776938745vw;
28 animation: petal-frames 0.9401018441204235s linear 0.3510479388716695s infinite, fall-1 21.12586973347892s 9.620746891891043s linear infinite;
29}
30#garden-petal-5{
31 left: 57.65708399755671vw;
32 animation: petal-frames 1.0742338743753292s linear 0.5678298333631254s infinite, fall-2 16.55616277292968s 1.9649110137907355s linear infinite;
33}
34#garden-petal-6{
35 left: 80.44193786548634vw;
36 animation: petal-frames 0.7355537072351714s linear 0.4553284135399265s infinite, fall-0 20.400072332012552s 19.10249286604216s linear infinite;
37}
38#garden-petal-7{
39 left: 27.090695744287917vw;
40 animation: petal-frames 0.8045110256932568s linear 0.6007143013761903s infinite, fall-2 19.18537749187848s 4.9852501401320914s linear infinite;
41}
42#garden-petal-8{
43 left: 3.037492877442849vw;
44 animation: petal-frames 0.9882309972128714s linear 0.21613976584816563s infinite, fall-2 16.27292345268861s 10.84194948415952s linear infinite;
45}
46#garden-petal-9{
47 left: 33.628212334780685vw;
48 animation: petal-frames 0.8815530841777726s linear 0.5660222619625819s infinite, fall-1 19.526894396382712s 9.580214731373733s linear infinite;
49}
50#garden-petal-10{
51 left: 17.30720320720096vw;
52 animation: petal-frames 0.9657166166412866s linear 0.2017656978212362s infinite, fall-0 19.551115934729825s 10.460971262176912s linear infinite;
53}
54#garden-petal-11{
55 left: 60.90370119381764vw;
56 animation: petal-frames 0.9965200717852786s linear 0.276637132666783s infinite, fall-1 19.883558443896824s 0.4940436060041753s linear infinite;
57}
58#garden-petal-12{
59 left: 12.54546701441166vw;
60 animation: petal-frames 1.0756420403984028s linear 0.03350438099641262s infinite, fall-0 18.856168183020415s 18.133180224590504s linear infinite;
61}
62#garden-petal-13{
63 left: 73.40711239367529vw;
64 animation: petal-frames 1.0418454675298787s linear 0.25235450802500836s infinite, fall-1 18.964152459837187s 17.09830560563806s linear infinite;
65}
66#garden-petal-14{
67 left: 58.119075876569184vw;
68 animation: petal-frames 0.9156055542801745s linear 0.997328233098216s infinite, fall-2 22.68600165394772s 4.782753857059825s linear infinite;
69}
70#garden-petal-15{
71 left: 87.09961114292564vw;
72 animation: petal-frames 1.008719458363008s linear 0.31594517481790085s infinite, fall-1 23.659973201256744s 3.2331828937231877s linear infinite;
73}
74#garden-petal-16{
75 left: 6.7157721242287804vw;
76 animation: petal-frames 0.8931344723444179s linear 0.6234450313630776s infinite, fall-2 18.26064650993141s 14.789392868570639s linear infinite;
77}
78#garden-petal-17{
79 left: 27.52511571013836vw;
80 animation: petal-frames 0.8977813946885463s linear 0.9782556318038144s infinite, fall-1 21.88589302620721s 6.868698052873919s linear infinite;
81}
82#garden-petal-18{
83 left: 32.771079946406026vw;
84 animation: petal-frames 1.175431876818204s linear 0.5999020254683372s infinite, fall-2 24.33328084424366s 17.07215688727334s linear infinite;
85}
86#garden-petal-19{
87 left: 45.74566710861654vw;
88 animation: petal-frames 1.0346293725691222s linear 0.1648220731784763s infinite, fall-0 14.330450957571806s 12.83179349289746s linear infinite;
89}
90#garden-petal-20{
91 left: 12.248942266724105vw;
92 animation: petal-frames 0.9979672456092517s linear 0.7340796972036666s infinite, fall-1 22.860576872107945s 0.6918067620894819s linear infinite;
93}
94#garden-petal-21{
95 left: 18.900414452685443vw;
96 animation: petal-frames 0.7442598003425169s linear 0.39501741122595424s infinite, fall-1 23.18909663088628s 19.079390724939632s linear infinite;
97}
98#garden-petal-22{
99 left: 9.816890342548756vw;
100 animation: petal-frames 0.885649990013323s linear 0.500757263149878s infinite, fall-0 23.39581151056167s 19.4148180894398s linear infinite;
101}
102#garden-petal-23{
103 left: 29.627714448630215vw;
104 animation: petal-frames 1.0509925161050926s linear 0.8625633145006415s infinite, fall-1 19.11010412981415s 10.977808636471725s linear infinite;
105}
106#garden-petal-24{
107 left: 13.366777154905973vw;
108 animation: petal-frames 1.2221911787468203s linear 0.046153722905137085s infinite, fall-2 24.25415169412209s 7.226409086121142s linear infinite;
109}
110#garden-petal-25{
111 left: 34.42234798210387vw;
112 animation: petal-frames 0.792318344283027s linear 0.16028352502974585s infinite, fall-0 21.788574054472953s 7.806727797112087s linear infinite;
113}
114#garden-petal-26{
115 left: 15.530405839007344vw;
116 animation: petal-frames 0.975885735165047s linear 0.25417215492535894s infinite, fall-1 19.96086691564797s 2.774965722030913s linear infinite;
117}
118#garden-petal-27{
119 left: 64.27962985516676vw;
120 animation: petal-frames 0.9983944935142727s linear 0.1778483157082693s infinite, fall-0 24.776678869357617s 19.614952019069094s linear infinite;
121}
122#garden-petal-28{
123 left: 92.48943498752226vw;
124 animation: petal-frames 1.1847744476059117s linear 0.025882760668829552s infinite, fall-0 18.755359193663434s 2.888119238545326s linear infinite;
125}
126#garden-petal-29{
127 left: 33.10093678735225vw;
128 animation: petal-frames 1.0339246534413908s linear 0.48924496632407743s infinite, fall-0 16.931650484719583s 7.927242558116758s linear infinite;
129}
130
131
132
133
134@keyframes petal-frames {
135 0%{
136 background-image: url(../images/petal-frames/petal-frame-1.png);
137 }
138 33%{
139 background-image: url(../images/petal-frames/petal-frame-2.png);
140 }
141 66%{
142 background-image: url(../images/petal-frames/petal-frame-3.png);
143 }
144}
145
146@keyframes fall-0 {
147 0%{
148 transform: translateY(0) translateX(0);
149 }
150 100%{
151 transform: translateY(100vh) translateX(100px);
152 }
153}
154
155@keyframes fall-1 {
156 0%{
157 transform: translateY(0) translateX(0);
158 }
159 100%{
160 transform: translateY(105vh) translateX(75px);
161 }
162}
163
164@keyframes fall-2 {
165 0%{
166 transform: translateY(0) translateX(0);
167 }
168 100%{
169 transform: translateY(95vh) translateX(80px);
170 }
171}