diff --git a/src/components/expansion-panel/expansion-panel.component.ts b/src/components/expansion-panel/expansion-panel.component.ts
index ea232974..61b4cd57 100644
--- a/src/components/expansion-panel/expansion-panel.component.ts
+++ b/src/components/expansion-panel/expansion-panel.component.ts
@@ -70,7 +70,13 @@ export class MdlExpansionPanelHeaderSecondaryContentComponent { }
     trigger('isExpanded', [
       state('true', style({ height: '*' })),
       state('false', style({ height: '0px' })),
-      transition('* => *', animate('250ms ease-in'))
+      transition('false => true', [
+        style({ height: '0px' }),
+        animate('250ms ease-in')
+      ]),
+      transition('true => false', [
+        animate('250ms ease-in')
+      ])
     ])
   ]
 })
diff --git a/src/components/expansion-panel/expansion-panel.scss b/src/components/expansion-panel/expansion-panel.scss
index 097e024b..f616f5c8 100644
--- a/src/components/expansion-panel/expansion-panel.scss
+++ b/src/components/expansion-panel/expansion-panel.scss
@@ -23,6 +23,7 @@ $gutter-horizontal: 24px;
     padding: 0px $gutter-horizontal;
     align-items: center;
     line-height: 48px;
+    transition: line-height 250ms ease-in;
     @include divider();
     &--list-content {
       flex-grow: 1;
@@ -76,6 +77,7 @@ $gutter-horizontal: 24px;
   display: block;
   .mdl-expansion-panel {
     margin: 0px;
+    transition: margin 250ms ease-in;
     &:focus {
       background-color: unquote("rgb(#{$palette-grey-200})");
       .mdl-expansion-panel__header--expand-icon {