Fade new dashcard from light yellow

resources/frontend_client/app/components/dashboard/dashboard.css

@@ -46,6 +46,21 @@
     transition: border .3s, background-color .3s;
 }
 
+@keyframes fade-out-yellow {
+    from {
+        background-color: rgba(255, 250, 243, 1.0);
+    }
+    to {
+        background-color: rgba(255, 250, 243, 0.0);
+    }
+}
+
+.Dash--editing .DashCard .Card.Card--recent {
+    /*background-color: rgb(255, 250, 243);*/
+    animation-duration: 30s;
+    animation-name: fade-out-yellow;
+}
+
 .Dash--editing .DashCard:hover .Card {
   border: 1px dashed var(--brand-color);
   background-color: #F6FAFD;

resources/frontend_client/app/dashboard/components/DashCard.react.js

@@ -8,6 +8,8 @@ import LoadingSpinner from "metabase/components/LoadingSpinner.react";
 
 import { fetchDashCardData } from "../actions";
 
+import cx from "classnames";
+
 class DashCard extends React.Component {
 
     componentDidMount() {
@@ -40,8 +42,9 @@ class DashCard extends React.Component {
 
     render() {
         let { card } = this.props.dashcard;
+        let recent = this.props.dashcard.isAdded;
         return (
-            <div className="Card bordered rounded flex flex-column">
+            <div className={"Card bordered rounded flex flex-column " + cx({ "Card--recent": recent })}>
                 <div className="Card-heading my1 px2">
                     <h3 className="text-normal my1">
                         <a className="Card-title link" href={"/card/"+card.id}>{card.name}</a>