diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css
index 7d22371ec3..bcd347382c 100644
--- a/packages/canon/css/components.css
+++ b/packages/canon/css/components.css
@@ -106,6 +106,7 @@
   max-width: 120rem;
   padding: 0 var(--canon-space-4);
   margin: 0 auto;
+  transition: padding .2s ease-in-out;
 }
 
 @media (width >= 640px) {
diff --git a/packages/canon/css/container.css b/packages/canon/css/container.css
index 86329e4c30..4ba6b65dee 100644
--- a/packages/canon/css/container.css
+++ b/packages/canon/css/container.css
@@ -2,6 +2,7 @@
   max-width: 120rem;
   padding: 0 var(--canon-space-4);
   margin: 0 auto;
+  transition: padding .2s ease-in-out;
 }
 
 @media (width >= 640px) {
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index 6017eacf0e..37c5cb4d2d 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -9312,6 +9312,7 @@
   max-width: 120rem;
   padding: 0 var(--canon-space-4);
   margin: 0 auto;
+  transition: padding .2s ease-in-out;
 }
 
 @media (width >= 640px) {