Lithuania map Animation

HTML

<div class="grid">
<div class="grid__container">
<div class="grid__item grid__item--1"></div>
<div class="grid__item grid__item--2"></div>
<div class="grid__item grid__item--3"></div>
<div class="grid__item grid__item--4"></div>
<div class="grid__item grid__item--5"></div>
<div class="grid__item grid__item--6"></div>
<div class="grid__item grid__item--7"></div>
<div class="grid__item grid__item--8"></div>
<div class="grid__item grid__item--9"></div>
<div class="grid__item grid__item--10"></div>
<div class="grid__item grid__item--11"></div>
<div class="grid__item grid__item--12"></div>
<div class="grid__item grid__item--13"></div>
<div class="grid__item grid__item--14"></div>
<div class="grid__item grid__item--15"></div>
<div class="grid__item grid__item--16"></div>
<div class="grid__item grid__item--17"></div>
<div class="grid__item grid__item--18"></div>
<div class="grid__item grid__item--19"></div>
<div class="grid__item grid__item--20"></div>
<div class="grid__item grid__item--21"></div>
<div class="grid__item grid__item--22"></div>
<div class="grid__item grid__item--23"></div>
<div class="grid__item grid__item--24"></div>
<div class="grid__item grid__item--25"></div>
<div class="grid__item grid__item--26"></div>
<div class="grid__item grid__item--27"></div>
<div class="grid__item grid__item--28"></div>
<div class="grid__item grid__item--29"></div>
<div class="grid__item grid__item--30"></div>
<div class="grid__item grid__item--31"></div>
<div class="grid__item grid__item--32"></div>
<div class="grid__item grid__item--33"></div>
<div class="grid__item grid__item--34"></div>
<div class="grid__item grid__item--35"></div>
<div class="grid__item grid__item--36"></div>
<div class="grid__item grid__item--37"></div>
<div class="grid__item grid__item--38"></div>
<div class="grid__item grid__item--39"></div>
<div class="grid__item grid__item--40"></div>
<div class="grid__item grid__item--41"></div>
<div class="grid__item grid__item--42"></div>
<div class="grid__item grid__item--43"></div>
<div class="grid__item grid__item--44"></div>
<div class="grid__item grid__item--45"></div>
<div class="grid__item grid__item--46"></div>
<div class="grid__item grid__item--47"></div>
<div class="grid__item grid__item--48"></div>
<div class="grid__item grid__item--49"></div>
<div class="grid__item grid__item--50"></div>
<div class="grid__item grid__item--51"></div>
<div class="grid__item grid__item--52"></div>
<div class="grid__item grid__item--53"></div>
<div class="grid__item grid__item--54"></div>
<div class="grid__item grid__item--55"></div>
<div class="grid__item grid__item--56"></div>
<div class="grid__item grid__item--57"></div>
<div class="grid__item grid__item--58"></div>
<div class="grid__item grid__item--59"></div>
<div class="grid__item grid__item--60"></div>
<div class="grid__item grid__item--61"></div>
<div class="grid__item grid__item--62"></div>
<div class="grid__item grid__item--63"></div>
<div class="grid__item grid__item--64"></div>
<div class="grid__item grid__item--65"></div>
<div class="grid__item grid__item--66"></div>
<div class="grid__item grid__item--67"></div>
<div class="grid__item grid__item--68"></div>
<div class="grid__item grid__item--69"></div>
<div class="grid__item grid__item--70"></div>
<div class="grid__item grid__item--71"></div>
<div class="grid__item grid__item--72"></div>
<div class="grid__item grid__item--73"></div>
<div class="grid__item grid__item--74"></div>
<div class="grid__item grid__item--75"></div>
<div class="grid__item grid__item--76"></div>
<div class="grid__item grid__item--77"></div>
<div class="grid__item grid__item--78"></div>
<div class="grid__item grid__item--79"></div>
<div class="grid__item grid__item--80"></div>
<div class="grid__item grid__item--81"></div>
<div class="grid__item grid__item--82"></div>
<div class="grid__item grid__item--83"></div>
<div class="grid__item grid__item--84"></div>
<div class="grid__item grid__item--85"></div>
<div class="grid__item grid__item--86"></div>
<div class="grid__item grid__item--87"></div>
<div class="grid__item grid__item--88"></div>
<div class="grid__item grid__item--89"></div>
<div class="grid__item grid__item--90"></div>
<div class="grid__item grid__item--91"></div>
<div class="grid__item grid__item--92"></div>
<div class="grid__item grid__item--93"></div>
<div class="grid__item grid__item--94"></div>
<div class="grid__item grid__item--95"></div>
<div class="grid__item grid__item--96"></div>
<div class="grid__item grid__item--97"></div>
<div class="grid__item grid__item--98"></div>
<div class="grid__item grid__item--99"></div>
<div class="grid__item grid__item--100"></div>
<div class="grid__item grid__item--101"></div>
<div class="grid__item grid__item--102"></div>
<div class="grid__item grid__item--103"></div>
<div class="grid__item grid__item--104"></div>
<div class="grid__item grid__item--105"></div>
<div class="grid__item grid__item--106"></div>
<div class="grid__item grid__item--107"></div>
<div class="grid__item grid__item--108"></div>
<div class="grid__item grid__item--109"></div>
<div class="grid__item grid__item--110"></div>
<div class="grid__item grid__item--111"></div>
<div class="grid__item grid__item--112"></div>
<div class="grid__item grid__item--113"></div>
<div class="grid__item grid__item--114"></div>
<div class="grid__item grid__item--115"></div>
<div class="grid__item grid__item--116"></div>
<div class="grid__item grid__item--117"></div>
<div class="grid__item grid__item--118"></div>
<div class="grid__item grid__item--119"></div>
<div class="grid__item grid__item--120"></div>
<div class="grid__item grid__item--121"></div>
<div class="grid__item grid__item--122"></div>
<div class="grid__item grid__item--123"></div>
<div class="grid__item grid__item--124"></div>
<div class="grid__item grid__item--125"></div>
<div class="grid__item grid__item--126"></div>
<div class="grid__item grid__item--127"></div>
<div class="grid__item grid__item--128"></div>
<div class="grid__item grid__item--129"></div>
<div class="grid__item grid__item--130"></div>
<div class="grid__item grid__item--131"></div>
<div class="grid__item grid__item--132"></div>
<div class="grid__item grid__item--133"></div>
<div class="grid__item grid__item--134"></div>
<div class="grid__item grid__item--135"></div>
<div class="grid__item grid__item--136"></div>
<div class="grid__item grid__item--137"></div>
<div class="grid__item grid__item--138"></div>
<div class="grid__item grid__item--139"></div>
<div class="grid__item grid__item--140"></div>
<div class="grid__item grid__item--141"></div>
<div class="grid__item grid__item--142"></div>
<div class="grid__item grid__item--143"></div>
<div class="grid__item grid__item--144"></div>
<div class="grid__item grid__item--145"></div>
<div class="grid__item grid__item--146"></div>
<div class="grid__item grid__item--147"></div>
</div>
</div>

CSS

@keyframes backgrnd {
0% {
background-color: var(--theme-bg-color)
}

to {
background-color: var(--theme-text-color)
}
}

.grid__item--1,.grid__item--10,.grid__item--11,.grid__item--12,.grid__item--2,.grid__item--20,.grid__item--21,.grid__item--22,.grid__item--23,.grid__item--27,.grid__item--28,.grid__item--29,.grid__item--3,.grid__item--32,.grid__item--33,.grid__item--37,.grid__item--38,.grid__item--39,.grid__item--4,.grid__item--40,.grid__item--44,.grid__item--45,.grid__item--46,.grid__item--47,.grid__item--48,.grid__item--49,.grid__item--5,.grid__item--52,.grid__item--53,.grid__item--54,.grid__item--55,.grid__item--56,.grid__item--57,.grid__item--6,.grid__item--61,.grid__item--64,.grid__item--65,.grid__item--66,.grid__item--67,.grid__item--68,.grid__item--69,.grid__item--70,.grid__item--72,.grid__item--73,.grid__item--74,.grid__item--75,.grid__item--76,.grid__item--77,.grid__item--78,.grid__item--79,.grid__item--8,.grid__item--80,.grid__item--81,.grid__item--82,.grid__item--83,.grid__item--84,.grid__item--85,.grid__item--86,.grid__item--87,.grid__item--9 {
background: 0 0!important
}

.grid__item--101,.grid__item--113,.grid__item--125,.grid__item--126,.grid__item--127 {
background: #c1272d!important
}

.grid__item--104,.grid__item--105,.grid__item--106,.grid__item--117,.grid__item--129 {
background: #006a44!important
}

.grid__item--108,.grid__item--110,.grid__item--120,.grid__item--122,.grid__item--132,.grid__item--133,.grid__item--134 {
background: #fdb913!important
}

.grid__item--7 {
grid-area: 1/6/3/8
}

.grid__item--13 {
grid-area: 2/2/4/4
}

.grid__item--14 {
grid-area: 2/4/4/6
}

.grid__item--15 {
grid-area: 4/1/6/3
}

.grid__item--16 {
grid-area: 4/3/6/5
}

.grid__item--17 {
grid-area: 3/6/5/8
}

.grid__item--18 {
grid-area: 4/8/6/10
}

.grid__item--35 {
grid-area: 5/6/7/8
}

.grid__item--42 {
grid-area: 6/4/8/6
}

.grid__item--63 {
grid-area: 8/6/10/8
}

.grid__item--43 {
grid-area: 6/8/8/10
}

.grid__container {
width: 288px;
height: 288px;
display: -ms-grid;
display: grid;
gap: 2px;
-ms-grid-columns: 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr 2px 1fr;
grid-template-columns: repeat(12,1fr);
margin: auto;
position: relative
}

.grid__container>div {
text-align: center;
padding: 6px;
background: var(--theme-base-color)
}

.animation .grid__item {
animation-name: backgrnd;
animation-timing-function: linear;
animation-duration: .2s;
animation-iteration-count: infinite;
animation-fill-mode: both
}

.grid__item--1 {
animation-delay: .87824s
}

.grid__item--2 {
animation-delay: .75531s
}

.grid__item--3 {
animation-delay: 1.5979s
}

.grid__item--4 {
animation-delay: 1.31908s
}

.grid__item--5 {
animation-delay: .22719s
}

.grid__item--6 {
animation-delay: .7209s
}

.grid__item--7 {
animation-delay: .97757s
}

.grid__item--8 {
animation-delay: .4763s
}

.grid__item--9 {
animation-delay: 1.80788s
}

.grid__item--10 {
animation-delay: .25576s
}

.grid__item--11 {
animation-delay: .24704s
}

.grid__item--12 {
animation-delay: .08126s
}

.grid__item--13 {
animation-delay: 1.69465s
}

.grid__item--14 {
animation-delay: .30881s
}

.grid__item--15 {
animation-delay: .9629s
}

.grid__item--16 {
animation-delay: 1.44257s
}

.grid__item--17 {
animation-delay: 1.04025s
}

.grid__item--18 {
animation-delay: 1.94551s
}

.grid__item--19 {
animation-delay: 1.13061s
}

.grid__item--20 {
animation-delay: .98286s
}

.grid__item--21 {
animation-delay: .76797s
}

.grid__item--22 {
animation-delay: .14232s
}

.grid__item--23 {
animation-delay: .20886s
}

.grid__item--24 {
animation-delay: 1.13692s
}

.grid__item--25 {
animation-delay: .95285s
}

.grid__item--26 {
animation-delay: .70947s
}

.grid__item--27 {
animation-delay: 1.85978s
}

.grid__item--28 {
animation-delay: 1.63992s
}

.grid__item--29 {
animation-delay: .12338s
}

.grid__item--30 {
animation-delay: 1.8663s
}

.grid__item--31 {
animation-delay: .46966s
}

.grid__item--32 {
animation-delay: .18117s
}

.grid__item--33 {
animation-delay: .51579s
}

.grid__item--34 {
animation-delay: 1.65212s
}

.grid__item--35 {
animation-delay: 1.10714s
}

.grid__item--36 {
animation-delay: .33938s
}

.grid__item--37 {
animation-delay: .65796s
}

.grid__item--38 {
animation-delay: .6947s
}

.grid__item--39 {
animation-delay: .62089s
}

.grid__item--40 {
animation-delay: 1.7828s
}

.grid__item--41 {
animation-delay: 1.07843s
}

.grid__item--42 {
animation-delay: 1.37329s
}

.grid__item--43 {
animation-delay: .82313s
}

.grid__item--44 {
animation-delay: 1.40656s
}

.grid__item--45 {
animation-delay: 1.23803s
}

.grid__item--46 {
animation-delay: 1.71629s
}

.grid__item--47 {
animation-delay: 1.73738s
}

.grid__item--48 {
animation-delay: .56049s
}

.grid__item--49 {
animation-delay: 1.60641s
}

.grid__item--50 {
animation-delay: .04854s
}

.grid__item--51 {
animation-delay: 1.91673s
}

.grid__item--52 {
animation-delay: .01372s
}

.grid__item--53 {
animation-delay: .70596s
}

.grid__item--54 {
animation-delay: 1.75374s
}

.grid__item--55 {
animation-delay: 1.37276s
}

.grid__item--56 {
animation-delay: 1.40142s
}

.grid__item--57 {
animation-delay: 1.73849s
}

.grid__item--58 {
animation-delay: .60495s
}

.grid__item--59 {
animation-delay: .57671s
}

.grid__item--60 {
animation-delay: 1.04777s
}

.grid__item--61 {
animation-delay: 1.15014s
}

.grid__item--62 {
animation-delay: .19938s
}

.grid__item--63 {
animation-delay: 1.73777s
}

.grid__item--64 {
animation-delay: .49918s
}

.grid__item--65 {
animation-delay: .25605s
}

.grid__item--66 {
animation-delay: .74035s
}

.grid__item--67 {
animation-delay: .06796s
}

.grid__item--68 {
animation-delay: .5305s
}

.grid__item--69 {
animation-delay: 1.76944s
}

.grid__item--70 {
animation-delay: .85123s
}

.grid__item--71 {
animation-delay: 1.049s
}

.grid__item--72 {
animation-delay: .31909s
}

.grid__item--73 {
animation-delay: 1.90263s
}

.grid__item--74 {
animation-delay: .62925s
}

.grid__item--75 {
animation-delay: 1.22377s
}
Back to top