diff --git a/components/ToggleList/DropDownList.less b/components/ToggleList/DropDownList.less
index f514e0b..7df1fbb 100644
--- a/components/ToggleList/DropDownList.less
+++ b/components/ToggleList/DropDownList.less
@@ -5,18 +5,20 @@
 .toggle-list__list--drop-down {
 	transform: translateY( -8px );
 
-	// Animate menu visibility, opacity, and translation changes in and out. Visibility must be
-	// animated since it's a boolean and nothing can be seen in display hidden. Visibility itself
-	// cannot be animated as it causes a flash on page load in Chromium due to
-	// https://bugs.chromium.org/p/chromium/issues/detail?id=332189. The effect is that the menu is
-	// animated in but not animated out.
-	.transition( opacity .1s ease-in-out, -webkit-tap-highlight-color 0s ease-in-out, transform .1s ease-in-out; );
-
 	// When cursor is pointer and -webkit-tap-highlight-color is set, the color does not seem to
 	// transition. Clear it.
 	-webkit-tap-highlight-color: transparent;
 }
 
+.animations {
+	.toggle-list__list--drop-down {
+		// Animate menu visibility, opacity, and translation changes in and out. Visibility duration
+		// cannot be animated initially as it causes a flash on page load in Chromium due to
+		// https://bugs.chromium.org/p/chromium/issues/detail?id=332189.
+		.transition( opacity .1s ease-in-out, -webkit-tap-highlight-color 0s ease-in-out, transform .1s ease-in-out, visibility .1s ease-in-out; );
+	}
+}
+
 .toggle-list__checkbox:checked ~ .toggle-list__list--drop-down {
 	transform: translateY( 0 );
 }