animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back

rendered animation

linear-gradient animation

1html {
2  height: 100%;
3  
4  background-color: #222;
5  
6  background-image:
7    linear-gradient(
8      155deg,
9      transparent 13%,
10      hsla(200,40%,60%,1) 15%,
11      transparent 0
12      ),
13    linear-gradient(
14      90deg,
15      transparent 49%,
16      hsla(200,40%,60%,1) 49%,
17      hsla(200,40%,60%,1) 50%,
18      transparent 0
19      ),
20    linear-gradient(
21      65deg,
22      transparent 31%,
23      hsla(200,40%,60%,1) 33%,
24      transparent 0
25      ),
26    linear-gradient(
27      45deg,
28      transparent 47%,
29      hsla(200,40%,60%,1) 49%,
30      transparent 0
31      ),
32    linear-gradient(
33      25deg,
34      transparent 32%,
35      hsla(200,40%,60%,1) 34%,
36      transparent 0
37      ),
38    linear-gradient(
39      -25deg,
40      transparent 60%,
41      hsla(200,40%,60%,1) 62%,
42      transparent 0
43      ),
44    linear-gradient(
45      -65deg,
46      transparent 31%,
47      hsla(200,40%,60%,1) 33%,
48      transparent 0
49      ),
50    linear-gradient(
51      180deg,
52      transparent 53%,
53      hsla(200,40%,60%,1) 55%,
54      transparent 0
55      ),
56    linear-gradient(
57      -25deg,
58      transparent 32%,
59      hsla(200,40%,60%,1) 34%,
60      transparent 0
61      ),
62    linear-gradient(
63      -65deg,
64      transparent 65%,
65      hsla(200,40%,60%,1) 67%,
66      transparent 0
67      ),
68    linear-gradient(
69      -45deg,
70      transparent 47%,
71      hsla(200,40%,60%,1) 49%,
72      transparent 0
73      );
74  
75  background-size: 
76    80px 100px, 
77    100px 100px, 
78    75px 100px, 
79    75px 100px, 
80    80px 100px, 
81    80px 100px, 
82    80px 100px, 
83    80px 100px, 
84    80px 100px, 
85    75px 100px, 
86    80px 100px;
87  
88  background-position: 50% 50%;
89  background-repeat: no-repeat;
90  
91  animation: sloppy 2s linear infinite alternate;
92  }
93
94@keyframes sloppy {
95  0% {
96    background-size:  
97      0 100px, 
98      100px 0, 
99      0 100px, 
100      0 100px, 
101      0 100px, 
102      0 100px, 
103      0 100px, 
104      0 100px, 
105      0 100px, 
106      0 100px, 
107      0 100px;
108    }
109  10% {
110    background-size: 
111      0 100px, 
112      100px 100px, 
113      0 100px, 
114      0 100px, 
115      0 100px, 
116      0 100px, 
117      0 100px, 
118      0 100px, 
119      0 100px, 
120      0 100px, 
121      0 100px; 
122    }
123  20% {
124    background-size: 
125      0 100px, 
126      100px 100px, 
127      0 100px, 
128      0 100px, 
129      0 100px, 
130      80px 100px, 
131      0 100px, 
132      0 100px, 
133      0 100px, 
134      0 100px, 
135      0 100px; 
136    }
137  30% {
138    background-size: 
139      80px 100px, 
140      100px 100px, 
141      0 100px, 
142      0 100px, 
143      0 100px, 
144      80px 100px, 
145      0 100px, 
146      0 100px, 
147      0 100px, 
148      0 100px, 
149      0 100px; 
150    }
151  40% {
152    background-size: 
153      80px 100px, 
154      100px 100px, 
155      0 100px, 
156      75px 100px, 
157      0 100px, 
158      80px 100px, 
159      0 100px, 
160      0 100px, 
161      0 100px, 
162      0 100px, 
163      0 100px; 
164    }
165  50% {
166    background-size: 
167      80px 100px, 
168      100px 100px, 
169      0 100px, 
170      75px 100px, 
171      0 100px, 
172      0 100px, 
173      80px 100px, 
174      80px 100px, 
175      0 100px, 
176      0 100px, 
177      0 100px; 
178    }
179  60% {
180    background-size: 
181      80px 100px, 
182      100px 100px, 
183      75px 100px, 
184      75px 100px, 
185      0 100px, 
186      0 100px, 
187      80px 100px, 
188      80px 100px, 
189      0 100px, 
190      0 100px, 
191      0 100px; 
192    }
193  70% {
194    background-size: 
195      80px 100px, 
196      100px 100px, 
197      75px 100px, 
198      75px 100px, 
199      80px 100px, 
200      0 100px, 
201      80px 100px, 
202      80px 100px, 
203      0 100px, 
204      0 100px, 
205      80px 100px; 
206    }
207  80% {
208    background-size: 
209      80px 100px, 
210      100px 100px, 
211      75px 100px, 
212      75px 100px, 
213      80px 100px, 
214      80px 100px, 
215      80px 100px, 
216      80px 100px, 
217      0 100px, 
218      75px 100px, 
219      80px 100px; 
220    }
221  90% {
222    background-size: 
223      80px 100px, 
224      100px 100px, 
225      75px 100px, 
226      75px 100px, 
227      80px 100px, 
228      80px 100px, 
229      80px 100px, 
230      80px 100px, 
231      80px 100px, 
232      75px 100px, 
233      80px 100px; 
234    }
235  100% {
236    background-size: 
237      80px 100px, 
238      100px 100px, 
239      75px 100px, 
240      75px 100px, 
241      80px 100px, 
242      80px 100px, 
243      80px 100px, 
244      80px 100px, 
245      80px 100px, 
246      75px 100px, 
247      80px 100px;    
248    }
249  }