<!--.:◂◀▸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>
