diff --git a/web/markdown/markdown-spoiler.react.js b/web/markdown/markdown-spoiler.react.js
--- a/web/markdown/markdown-spoiler.react.js
+++ b/web/markdown/markdown-spoiler.react.js
@@ -13,7 +13,24 @@
 function MarkdownSpoiler(props: MarkdownSpoilerProps): React.Node {
   const { text } = props;
 
-  return <span className={css.spoiler}>{text}</span>;
+  const [isRevealed, setIsRevealed] = React.useState(false);
+
+  const styleBasedOnSpoilerState = React.useMemo(() => {
+    if (isRevealed) {
+      return css.revealSpoilerAnimation;
+    }
+    return css.spoiler;
+  }, [isRevealed]);
+
+  const onSpoilerClick = React.useCallback(() => {
+    setIsRevealed(true);
+  }, [setIsRevealed]);
+
+  return (
+    <span className={styleBasedOnSpoilerState} onClick={onSpoilerClick}>
+      {text}
+    </span>
+  );
 }
 
 const MemoizedMarkdownSpoiler: React.ComponentType<MarkdownSpoilerProps> = React.memo<MarkdownSpoilerProps>(
diff --git a/web/markdown/markdown.css b/web/markdown/markdown.css
--- a/web/markdown/markdown.css
+++ b/web/markdown/markdown.css
@@ -82,3 +82,16 @@
   color: var(--spoiler-text-color);
   cursor: pointer;
 }
+span.revealSpoilerAnimation {
+  animation: revealSpoiler 1s;
+}
+@keyframes revealSpoiler {
+  from {
+    background: var(--spoiler-background-color);
+    color: var(--spoiler-text-color);
+  }
+  to {
+    background: transparent;
+    color: white;
+  }
+}