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
}