<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:. | | | Filename : LB_var-width.html | | Author : Leonard Anders | | | ::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Variaaable Letter Width Aaanimaaation</title> <style> @font-face { font-family: Konsole; src: url(../_fonts/Konsolev1.1-VF.ttf); } body { font-family: Konsole; font-size: 10vh; } /* the @keyframes rule specifies the animation of the style change */ @keyframes example { from { font-variation-settings: "wght" 100, "wdth" 50; } to { font-variation-settings: "wght" 800, "wdth" 200; } } .wrapper { /* sets the display mode to grid */ display: grid; /* creates seven columns with a width of 96px each */ grid-template-columns: repeat(7, 10vw); /* creates seven rows with a width of 96px each */ grid-template-rows: repeat(7, 10vw); /* sets the gap between the columns to 0px */ grid-column-gap: 0px; /* sets the gap between the rows to 0px */ grid-row-gap: 0px; /* sets the position to absolute, to freely control positioning in on the site */ position: absolute; /* centers the wrapper on the page */ top: 50%; left: 50%; transform: translate(-50%, -50%); } .myClass { /* defines a name for the @keyframes animation */ animation-name: example; /* defines how long the animation takes to complete one cycle */ animation-duration: 4s; /* defines the number of times an animation cycle is played */ animation-iteration-count: infinite; /* defines whether or not the animation should play in reverse on alternate cycles */ animation-direction: alternate; /* centers the text inside the text-box */ text-align: center; } /* delays each animation a little more to create the desired effect */ .myClass:nth-child( 1) { animation-delay: 0s } .myClass:nth-child( 2) { animation-delay: 100ms } .myClass:nth-child( 3) { animation-delay: 200ms } .myClass:nth-child( 4) { animation-delay: 300ms } .myClass:nth-child( 5) { animation-delay: 400ms } .myClass:nth-child( 6) { animation-delay: 500ms } .myClass:nth-child( 7) { animation-delay: 600ms } .myClass:nth-child( 8) { animation-delay: 700ms } .myClass:nth-child( 9) { animation-delay: 800ms } .myClass:nth-child(10) { animation-delay: 900ms } .myClass:nth-child(11) { animation-delay: 1000ms } .myClass:nth-child(12) { animation-delay: 1100ms } .myClass:nth-child(13) { animation-delay: 1200ms } .myClass:nth-child(14) { animation-delay: 1300ms } .myClass:nth-child(15) { animation-delay: 1400ms } .myClass:nth-child(16) { animation-delay: 1500ms } .myClass:nth-child(17) { animation-delay: 1600ms } .myClass:nth-child(18) { animation-delay: 1700ms } .myClass:nth-child(19) { animation-delay: 1800ms } .myClass:nth-child(20) { animation-delay: 1900ms } .myClass:nth-child(21) { animation-delay: 2000ms } .myClass:nth-child(22) { animation-delay: 2100ms } .myClass:nth-child(23) { animation-delay: 2200ms } .myClass:nth-child(24) { animation-delay: 2300ms } .myClass:nth-child(25) { animation-delay: 2400ms } .myClass:nth-child(26) { animation-delay: 2500ms } .myClass:nth-child(27) { animation-delay: 2600ms } .myClass:nth-child(28) { animation-delay: 2700ms } .myClass:nth-child(29) { animation-delay: 2800ms } .myClass:nth-child(30) { animation-delay: 2900ms } .myClass:nth-child(31) { animation-delay: 3000ms } .myClass:nth-child(32) { animation-delay: 3100ms } .myClass:nth-child(33) { animation-delay: 3200ms } .myClass:nth-child(34) { animation-delay: 3300ms } .myClass:nth-child(35) { animation-delay: 3400ms } .myClass:nth-child(36) { animation-delay: 3500ms } .myClass:nth-child(37) { animation-delay: 3600ms } .myClass:nth-child(38) { animation-delay: 3700ms } .myClass:nth-child(39) { animation-delay: 3800ms } .myClass:nth-child(40) { animation-delay: 3900ms } .myClass:nth-child(41) { animation-delay: 4000ms } .myClass:nth-child(42) { animation-delay: 4100ms } .myClass:nth-child(43) { animation-delay: 4200ms } .myClass:nth-child(44) { animation-delay: 4300ms } .myClass:nth-child(45) { animation-delay: 4400ms } .myClass:nth-child(46) { animation-delay: 4500ms } .myClass:nth-child(47) { animation-delay: 4600ms } .myClass:nth-child(48) { animation-delay: 4700ms } .myClass:nth-child(49) { animation-delay: 4800ms } </style> </head> <body> <div class="wrapper"> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> <div class="myClass">A</div> </div> </body> </html>