diff --git a/content/uploads/2026/03/contributor-decay.svg b/content/uploads/2026/03/contributor-decay.svg index 440a288..3a1df14 100644 --- a/content/uploads/2026/03/contributor-decay.svg +++ b/content/uploads/2026/03/contributor-decay.svg @@ -12,35 +12,36 @@ from { opacity: 0; } to { opacity: 1; } } +svg { view-timeline: --diagram block; } .anim { opacity: 0; } -.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; } -.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 2% entry 22%; } -.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 5% entry 25%; } -.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 8% entry 28%; } -.d4 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 11% entry 31%; } -.d5 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 14% entry 34%; } -.d6 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 17% entry 37%; } -.d7 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 20% entry 40%; } -.d8 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 22% entry 42%; } -.d9 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 25% entry 45%; } -.d10 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 28% entry 48%; } -.d11 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 31% entry 51%; } -.d12 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 34% entry 54%; } -.d13 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 37% entry 57%; } -.d14 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 40% entry 60%; } -.d15 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 42% entry 62%; } -.d16 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 45% entry 65%; } -.d17 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 48% entry 68%; } -.d18 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 51% entry 71%; } -.d19 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 54% entry 74%; } -.d20 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 57% entry 77%; } -.d21 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 60% entry 80%; } -.d22 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 62% entry 82%; } -.d23 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 65% entry 85%; } -.d24 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 68% entry 88%; } -.d25 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 71% entry 91%; } -.d26 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 74% entry 94%; } -.d27 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 77% entry 97%; } +.d0 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 0% entry 5%; } +.d1 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 3% entry 8%; } +.d2 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 7% entry 12%; } +.d3 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 10% entry 15%; } +.d4 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 14% entry 19%; } +.d5 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 17% entry 22%; } +.d6 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 21% entry 26%; } +.d7 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 25% entry 30%; } +.d8 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 28% entry 33%; } +.d9 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 32% entry 37%; } +.d10 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 35% entry 40%; } +.d11 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 39% entry 44%; } +.d12 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 42% entry 47%; } +.d13 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 46% entry 51%; } +.d14 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 50% entry 55%; } +.d15 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 53% entry 58%; } +.d16 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 57% entry 62%; } +.d17 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 60% entry 65%; } +.d18 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 64% entry 69%; } +.d19 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 67% entry 72%; } +.d20 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 71% entry 76%; } +.d21 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 75% entry 80%; } +.d22 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 78% entry 83%; } +.d23 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 82% entry 87%; } +.d24 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 85% entry 90%; } +.d25 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 89% entry 94%; } +.d26 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 92% entry 97%; } +.d27 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 96% entry 100%; } @supports not (animation-timeline: view()) { .anim { opacity: 1; } } diff --git a/content/uploads/2026/03/eight-eyes.svg b/content/uploads/2026/03/eight-eyes.svg index 414ae72..cc32482 100644 --- a/content/uploads/2026/03/eight-eyes.svg +++ b/content/uploads/2026/03/eight-eyes.svg @@ -9,23 +9,24 @@ from { opacity: 0; } to { opacity: 1; } } +svg { view-timeline: --diagram block; } .anim { opacity: 0; } -.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; } -.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 5% entry 25%; } -.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 10% entry 30%; } -.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 15% entry 35%; } -.d4 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 20% entry 40%; } -.d5 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 25% entry 45%; } -.d6 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 30% entry 50%; } -.d7 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 35% entry 55%; } -.d8 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 40% entry 60%; } -.d9 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 45% entry 65%; } -.d10 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 50% entry 70%; } -.d11 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 55% entry 75%; } -.d12 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 60% entry 80%; } -.d13 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 65% entry 85%; } -.d14 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 70% entry 90%; } -.d15 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 75% entry 95%; } +.d0 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 0% entry 6%; } +.d1 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 6% entry 12%; } +.d2 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 12% entry 18%; } +.d3 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 18% entry 24%; } +.d4 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 25% entry 31%; } +.d5 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 31% entry 37%; } +.d6 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 37% entry 43%; } +.d7 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 43% entry 49%; } +.d8 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 50% entry 56%; } +.d9 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 56% entry 62%; } +.d10 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 62% entry 68%; } +.d11 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 68% entry 74%; } +.d12 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 75% entry 81%; } +.d13 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 81% entry 87%; } +.d14 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 87% entry 93%; } +.d15 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 93% entry 99%; } @supports not (animation-timeline: view()) { .anim { opacity: 1; } } diff --git a/content/uploads/2026/03/load-bearing.svg b/content/uploads/2026/03/load-bearing.svg index a8682ef..b0e2d08 100644 --- a/content/uploads/2026/03/load-bearing.svg +++ b/content/uploads/2026/03/load-bearing.svg @@ -9,16 +9,17 @@ from { opacity: 0; } to { opacity: 1; } } +svg { view-timeline: --diagram block; } .anim { opacity: 0; } -.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; } -.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 8% entry 28%; } -.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 17% entry 37%; } -.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 26% entry 46%; } -.d4 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 35% entry 55%; } -.d5 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 44% entry 64%; } -.d6 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 53% entry 73%; } -.d7 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 62% entry 82%; } -.d8 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 71% entry 91%; } +.d0 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 0% entry 11%; } +.d1 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 11% entry 22%; } +.d2 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 22% entry 33%; } +.d3 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 33% entry 44%; } +.d4 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 44% entry 55%; } +.d5 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 55% entry 66%; } +.d6 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 66% entry 77%; } +.d7 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 77% entry 88%; } +.d8 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 88% entry 99%; } @supports not (animation-timeline: view()) { .anim { opacity: 1; } } diff --git a/content/uploads/2026/03/mystic-pronouns.svg b/content/uploads/2026/03/mystic-pronouns.svg index 179ccab..57cb9d0 100644 --- a/content/uploads/2026/03/mystic-pronouns.svg +++ b/content/uploads/2026/03/mystic-pronouns.svg @@ -12,36 +12,37 @@ from { opacity: 0; } to { opacity: 1; } } +svg { view-timeline: --diagram block; } .anim { opacity: 0; } -.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; } -.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 2% entry 22%; } -.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 5% entry 25%; } -.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 8% entry 28%; } -.d4 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 11% entry 31%; } -.d5 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 13% entry 33%; } -.d6 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 16% entry 36%; } -.d7 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 19% entry 39%; } -.d8 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 22% entry 42%; } -.d9 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 24% entry 44%; } -.d10 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 27% entry 47%; } -.d11 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 30% entry 50%; } -.d12 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 33% entry 53%; } -.d13 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 35% entry 55%; } -.d14 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 38% entry 58%; } -.d15 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 41% entry 61%; } -.d16 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 44% entry 64%; } -.d17 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 46% entry 66%; } -.d18 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 49% entry 69%; } -.d19 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 52% entry 72%; } -.d20 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 55% entry 75%; } -.d21 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 57% entry 77%; } -.d22 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 60% entry 80%; } -.d23 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 63% entry 83%; } -.d24 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 66% entry 86%; } -.d25 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 68% entry 88%; } -.d26 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 71% entry 91%; } -.d27 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 74% entry 94%; } -.d28 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 77% entry 97%; } +.d0 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 0% entry 5%; } +.d1 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 3% entry 8%; } +.d2 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 6% entry 11%; } +.d3 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 10% entry 15%; } +.d4 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 13% entry 18%; } +.d5 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 17% entry 22%; } +.d6 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 20% entry 25%; } +.d7 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 24% entry 29%; } +.d8 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 27% entry 32%; } +.d9 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 31% entry 36%; } +.d10 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 34% entry 39%; } +.d11 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 37% entry 42%; } +.d12 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 41% entry 46%; } +.d13 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 44% entry 49%; } +.d14 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 48% entry 53%; } +.d15 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 51% entry 56%; } +.d16 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 55% entry 60%; } +.d17 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 58% entry 63%; } +.d18 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 62% entry 67%; } +.d19 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 65% entry 70%; } +.d20 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 68% entry 73%; } +.d21 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 72% entry 77%; } +.d22 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 75% entry 80%; } +.d23 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 79% entry 84%; } +.d24 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 82% entry 87%; } +.d25 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 86% entry 91%; } +.d26 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 89% entry 94%; } +.d27 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 93% entry 98%; } +.d28 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 96% entry 100%; } @supports not (animation-timeline: view()) { .anim { opacity: 1; } } diff --git a/content/uploads/2026/03/naming-dance.svg b/content/uploads/2026/03/naming-dance.svg index 632d8a4..26e6b7f 100644 --- a/content/uploads/2026/03/naming-dance.svg +++ b/content/uploads/2026/03/naming-dance.svg @@ -12,12 +12,13 @@ from { opacity: 0; } to { opacity: 1; } } +svg { view-timeline: --diagram block; } .anim { opacity: 0; } -.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; } -.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 16% entry 36%; } -.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 32% entry 52%; } -.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 48% entry 68%; } -.d4 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 64% entry 84%; } +.d0 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 0% entry 20%; } +.d1 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 20% entry 40%; } +.d2 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 40% entry 60%; } +.d3 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 60% entry 80%; } +.d4 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 80% entry 100%; } @supports not (animation-timeline: view()) { .anim { opacity: 1; } } diff --git a/content/uploads/2026/03/one-multitudes.svg b/content/uploads/2026/03/one-multitudes.svg index d890f85..1562fea 100644 --- a/content/uploads/2026/03/one-multitudes.svg +++ b/content/uploads/2026/03/one-multitudes.svg @@ -9,18 +9,19 @@ from { opacity: 0; } to { opacity: 1; } } +svg { view-timeline: --diagram block; } .anim { opacity: 0; } -.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; } -.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 7% entry 27%; } -.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 14% entry 34%; } -.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 21% entry 41%; } -.d4 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 29% entry 49%; } -.d5 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 36% entry 56%; } -.d6 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 43% entry 63%; } -.d7 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 50% entry 70%; } -.d8 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 58% entry 78%; } -.d9 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 65% entry 85%; } -.d10 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 72% entry 92%; } +.d0 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 0% entry 9%; } +.d1 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 9% entry 18%; } +.d2 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 18% entry 27%; } +.d3 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 27% entry 36%; } +.d4 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 36% entry 45%; } +.d5 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 45% entry 54%; } +.d6 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 54% entry 63%; } +.d7 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 63% entry 72%; } +.d8 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 72% entry 81%; } +.d9 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 81% entry 90%; } +.d10 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 90% entry 99%; } @supports not (animation-timeline: view()) { .anim { opacity: 1; } } diff --git a/content/uploads/2026/03/pronoun-masks.svg b/content/uploads/2026/03/pronoun-masks.svg index a01c4b1..d2eabda 100644 --- a/content/uploads/2026/03/pronoun-masks.svg +++ b/content/uploads/2026/03/pronoun-masks.svg @@ -9,11 +9,12 @@ from { opacity: 0; } to { opacity: 1; } } +svg { view-timeline: --diagram block; } .anim { opacity: 0; } -.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; } -.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 20% entry 40%; } -.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 40% entry 60%; } -.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 60% entry 80%; } +.d0 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 0% entry 25%; } +.d1 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 25% entry 50%; } +.d2 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 50% entry 75%; } +.d3 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 75% entry 100%; } @supports not (animation-timeline: view()) { .anim { opacity: 1; } } diff --git a/content/uploads/2026/03/royal-we-unmasked.svg b/content/uploads/2026/03/royal-we-unmasked.svg index 0aab545..29c603f 100644 --- a/content/uploads/2026/03/royal-we-unmasked.svg +++ b/content/uploads/2026/03/royal-we-unmasked.svg @@ -12,12 +12,13 @@ from { opacity: 0; } to { opacity: 1; } } +svg { view-timeline: --diagram block; } .anim { opacity: 0; } -.d0 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 20%; } -.d1 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 16% entry 36%; } -.d2 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 32% entry 52%; } -.d3 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 48% entry 68%; } -.d4 { animation: fadeIn 1s ease-out both; animation-timeline: view(); animation-range: entry 64% entry 84%; } +.d0 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 0% entry 20%; } +.d1 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 20% entry 40%; } +.d2 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 40% entry 60%; } +.d3 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 60% entry 80%; } +.d4 { animation: fadeIn 1s linear both; animation-timeline: --diagram; animation-range: entry 80% entry 100%; } @supports not (animation-timeline: view()) { .anim { opacity: 1; } }