diff --git a/src/routes/_components/list/ListItem.html b/src/routes/_components/list/ListItem.html
index 62c3c77c..15db923b 100644
--- a/src/routes/_components/list/ListItem.html
+++ b/src/routes/_components/list/ListItem.html
@@ -1,4 +1,17 @@
-<div class="list-item"
+<style>
+  .list-item {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s linear;
+    contain: content; /* see https://www.w3.org/TR/2018/CR-css-contain-1-20181108/#valdef-contain-content */
+  }
+
+  .list-item.shown {
+    opacity: 1;
+    pointer-events: auto;
+  }
+</style>
+<div class="list-item {shown && 'shown'}"
      id={`list-item-${key}`} >
   <svelte:component this={component}
               virtualProps={props}
@@ -7,3 +20,17 @@
               virtualKey={key}
   />
 </div>
+<script>
+  import { doubleRAF } from '../../_utils/doubleRAF'
+
+  export default {
+    oncreate () {
+      doubleRAF(() => {
+        this.set({ shown: true }) // ensure fade-in animation happens after rAF
+      })
+    },
+    data: () => ({
+      shown: false
+    })
+  }
+</script>