diff --git a/web/markdown/markdown-spoiler.react.js b/web/markdown/markdown-spoiler.react.js
index 6399efec5..fea21853e 100644
--- a/web/markdown/markdown-spoiler.react.js
+++ b/web/markdown/markdown-spoiler.react.js
@@ -1,23 +1,40 @@
 // @flow
 
 import * as React from 'react';
 
 import type { ReactElement } from 'lib/shared/markdown';
 
 import css from './markdown.css';
 
 type MarkdownSpoilerProps = {
   +text: ReactElement,
 };
 
 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>(
   MarkdownSpoiler,
 );
 
 export default MemoizedMarkdownSpoiler;
diff --git a/web/markdown/markdown.css b/web/markdown/markdown.css
index cf099297a..69be4228c 100644
--- a/web/markdown/markdown.css
+++ b/web/markdown/markdown.css
@@ -1,84 +1,97 @@
 div.markdown {
   display: inline;
 }
 
 div.markdown h1,
 div.markdown h2,
 div.markdown h3,
 div.markdown h4,
 div.markdown h5,
 div.markdown h6 {
   display: inline;
 }
 
 div.markdown blockquote {
   display: inline-block;
   padding: 0.5em 10px;
   box-sizing: border-box;
   width: 100%;
   margin: 6px 0;
   border-radius: 8px;
   border-left: 8px solid #00000066;
   box-shadow: 0 1px 2px 1px #00000033;
 }
 
 div.markdown > blockquote {
   background-color: #00000066;
 }
 
 div.markdown code {
   padding: 0 4px;
   margin: 0 2px;
   border-radius: 3px;
 }
 div.lightBackground code {
   background: #dcdcdc;
   color: #222222;
 }
 div.darkBackground code {
   background: #222222;
   color: #f3f3f3;
 }
 
 div.markdown pre {
   padding: 0.5em 10px;
   border-radius: 5px;
   margin: 6px 0;
 }
 div.lightBackground pre {
   background: #dcdcdc;
   color: #222222;
 }
 div.darkBackground pre {
   background: #222222;
   color: #f3f3f3;
 }
 div.markdown pre > code {
   width: 100%;
   display: inline-block;
   box-sizing: border-box;
   tab-size: 2;
   overflow-x: auto;
 }
 
 div.markdown ol,
 div.markdown ul {
   padding-left: 1em;
   margin-left: 0.5em;
 }
 
 div.markdown a {
   text-decoration: underline;
 }
 div.lightBackground a {
   color: #2a5db0;
 }
 div.darkBackground a {
   color: white;
 }
 
 span.spoiler {
   background: var(--spoiler-background-color);
   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;
+  }
+}