diff --git a/core/themes/seven/css/components/entity-meta.css b/core/themes/seven/css/components/entity-meta.css
index 9877ec3..2633c7f 100644
--- a/core/themes/seven/css/components/entity-meta.css
+++ b/core/themes/seven/css/components/entity-meta.css
@@ -57,3 +57,21 @@
 .entity-meta details .summary {
  display: none; /* Hide JS summaries. @todo Rethink summaries. */
 }
+/* Collapse animation on details. */
+.entity-meta details {
+  max-height: 40px;
+  overflow: hidden;
+  -moz-transition: max-height 0.225s ease-in-out;
+  -ms-transition: max-height 0.225s ease-in-out;
+  -o-transition: max-height 0.225s ease-in-out;
+  -webkit-transition: max-height 0.225s ease-in-out;
+  transition: max-height 0.225s ease-in-out;
+}
+/**
+ * CSS3 transitions needs to have a specific height.
+ *
+ * @see http://stackoverflow.com/a/19341648
+ */
+.entity-meta details[open] {
+  max-height: 1000px; /* To account for blocks of any size, we choose something 'impossibly' large. */
+}