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 }