Added the animation to the final product.

This required that I "go around" the rendering mechanism, but it's probably
not egregious for this kind of work.  I still don't like it, and I wish there
were alternatives.

The organization's not great, but it could be worse.  There's no reason for
me to be keeping that state.

src/DominoClock.ts

@@ -1,5 +1,5 @@
 import { LitElement, css, html } from "lit";
-import { customElement, state } from "lit/decorators.js";
+import { customElement, queryAll } from "lit/decorators.js";
 import "./DominoFace.ts";
 
 type Times = number[];
@@ -17,11 +17,13 @@ const tock = (time: number) => [0, 1, 2, 3].map(i => MATRIX[i].includes(time));
 export class DominoClock extends LitElement {
   timer: number;
 
-  @state() hour = [false, false, false, false];
+  hour = [false, false, false, false];
 
-  @state() minute = [false, false, false, false];
+  minute = [false, false, false, false];
 
-  @state() second = [false, false, false, false];
+  second = [false, false, false, false];
+
+  @queryAll("domino-face") faces: HTMLCollection;
 
   constructor() {
     super();
@@ -36,6 +38,8 @@ export class DominoClock extends LitElement {
     this.minute = tock(Math.floor(now.getUTCMinutes() / 5));
     this.second = tock(Math.floor(now.getUTCSeconds() / 5));
     this.timer = window.setTimeout(this.paint, 250);
+    const times = [this.hour, this.minute, this.second];
+    Array.from(this.faces).forEach((face, idx) => face.tick(times[idx]));
   }
 
   connectedCallback() {
@@ -62,7 +66,7 @@ export class DominoClock extends LitElement {
       display: flex;
       flex-direction: var(--dominoclock-direction, var(--dominoclock-default-direction, row));
       gap: var(--dominoclock-face-gap, var(--dominoclock-default-face-gap, 0.25rem));
-    }
+D.    }
   `;
 
   render() {

src/DominoFace.ts

@@ -1,5 +1,5 @@
 import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, queryAll } from "lit/decorators.js";
 
 type Dots = [boolean, boolean, boolean, boolean];
 
@@ -14,6 +14,10 @@ function timeChanged(oldvalue: Dots, newvalue: Dots): boolean {
 export class DominoClockface extends LitElement {
   @property({ type: Array, hasChanged: timeChanged }) time = [false, false, false, false];
 
+  @queryAll(".dot") dots: HTMLCollection;
+
+  rendered: boolean = false;
+
   static styles = css`
     :host {
       --dominoclock-default-dot-size: 1rem;
@@ -46,7 +50,7 @@ export class DominoClockface extends LitElement {
     }
 
     .dot > div {
-      transition: opacity 0.3s ease;
+      transition: opacity 0.6s ease;
       width: var(--dominoclock-date-size, var(--dominoclock-default-date-size, 1rem));
       height: var(--dominoclock-date-size, var(--dominoclock-default-date-size, 1rem));
       background-color: var(--dominoclock-dot-color, var(--dominoclock-default-dot-color, #2f4f4f));
@@ -59,12 +63,30 @@ export class DominoClockface extends LitElement {
     }
   `;
 
+  tick(time) {
+    Array.from(this.dots).forEach((dot, idx) => {
+      if (time[idx]) {
+        dot.classList.add("active");
+      } else {
+        dot.classList.remove("active");
+      }
+    });
+  }
+
   render() {
-    return html`<div class="face">
-      ${this.time.map(pos =>
-        pos ? html`<div class="dot active"><div></div></div>` : html`<div class="dot"><div></div></div>`
-      )}
-    </div>`;
+    return html`
+      <div class="face">
+        ${this.time.map(pos =>
+          pos
+            ? html`
+                <div class="dot active"><div></div></div>
+              `
+            : html`
+                <div class="dot"><div></div></div>
+              `
+        )}
+      </div>
+    `;
   }
 }