diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.css
index 8056be00338c25c54582c061b7519f704d7f6f0f..7d242e5767ba4d3d027ff68fb87baaea26150503 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.css
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.css
@@ -38,8 +38,18 @@ tr:hover {
   display: inline;
   float: right; }
 
+@keyframes animation-open {
+  from {
+    transform: rotate(0deg); }
+  to {
+    transform: rotate(180deg); } }
+
 .line-header-dropdownbutton-up {
-  transform: rotate(180deg); }
+  transform: rotate(180deg);
+  animation: animation-open;
+  animation-duration: 100ms;
+  animation-iteration-count: 1;
+  animation-timing-function: linear; }
 
 .line-header-text {
   display: inline;
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.js
index d3f81e0a7e9784e037a255ec69f11cbe519e02fc..9fb4684f71bacd90c9ca77e5896093dfd3d6425a 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.js
@@ -294,14 +294,14 @@ class RTSMSummaryLine extends Component {
             all_rtsm = this.props.data.map((item, key) => this.renderTestLine(key, item, component_id_list))
         }
 
-        const dropdownStyle = { }
-        if(this.state.displaySingleTests) dropdownStyle.transform = "rotate(180deg)"
+        let dropdownAdditionStyles = ""
+        if(this.state.displaySingleTests) dropdownAdditionStyles += "line-header-dropdownbutton-up"
         jsx = (
                 <React.Fragment>
                     <tr>
                         <td className="line-header" onClick={this.toggleDisplaySingleTests}>
                             <div  className="line-header-text">RT {this.renderDateRange(this.props.data)}</div>
-                            <DropDownIcon className="line-header-dropdownbutton" style={dropdownStyle} color="black" />
+                            <DropDownIcon className={"line-header-dropdownbutton " + dropdownAdditionStyles} color="black" />
                         </td>
                         {summaryLine}</tr>
                     {all_rtsm}
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.scss b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.scss
index 61b264d02e9c9fdd79c3882551d82d47cf2669ad..ff977bbb0aad40cdc4ec8426437bd79d7dcdfa20 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.scss
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.scss
@@ -46,8 +46,19 @@ tr:hover {
   float: right;
 }
 
+@keyframes animation-open {
+  from {
+    transform: rotate(0deg);
+  } to {
+    transform: rotate(180deg);
+  }
+}
 .line-header-dropdownbutton-up {
-  transform: rotate(180deg)
+  transform: rotate(180deg);
+  animation: animation-open;
+  animation-duration: 100ms;
+  animation-iteration-count: 1;
+  animation-timing-function: linear;
 }
 
 .line-header-text {