diff --git a/blog_images/perfect-timing.jpg b/blog_images/perfect-timing.jpg
new file mode 100644
index 000000000..ab103c3b8
Binary files /dev/null and b/blog_images/perfect-timing.jpg differ
diff --git a/blog_posts/perfect-css-transition-duration.md b/blog_posts/perfect-css-transition-duration.md
new file mode 100644
index 000000000..2a1bdd9f4
--- /dev/null
+++ b/blog_posts/perfect-css-transition-duration.md
@@ -0,0 +1,16 @@
+---
+title: "Tip: The perfect duration for CSS transitions"
+type: tip
+tags: css,interactivity,visual,animation
+authors: chalarangelo
+cover: blog_images/perfect-timing.jpg
+excerpt: Learn how to make your CSS transitions feel perfect when users interact with elements on the page with this simple tip.
+---
+
+We have all experienced a website interaction that feels sluggish or otherwise off on account of poor transition or animation duration and timing. However, there is a very simple "golden rule" to help you avoid this poor user experience, called **Doherty Threshold:**
+
+> Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
+
+The **magic number** of `0.4s` sounds like a very reasonable threshold, but take a look at any of your favorite websites and you'll notice that most `transition-duration` or `animation-duration` values are closer to `0.3s`. This might have something to do with our more recent expectation of what a fast interaction should feel like - after all the relevant research paper was published in 1982.
+
+**Image credit:** [Josh Calabrese](https://unsplash.com/@joshcala?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)