@keyframes lift {
    0%   {top: 0px; box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);}
    25%  {top: -1px; box-shadow: 0 5px 6px 0 rgba(0,0,0,.14), 0 1px 11px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);}
    50%  {top: -2px; box-shadow: 0 6px 7px 0 rgba(0,0,0,.14), 0 2px 12px 1px rgba(0,0,0,.12), 0 3px 4px -2px rgba(0,0,0,.2);}
    75%  {top: -3px; box-shadow: 0 7px 8px 1px rgba(0,0,0,.14), 0 2px 13px 1px rgba(0,0,0,.12), 0 4px 5px -2px rgba(0,0,0,.2);}
    100% {top: -4px; box-shadow: 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12), 0 5px 5px -3px rgba(0,0,0,.2);}
}

@keyframes drop {
    0%   {top: -4px; box-shadow: 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12), 0 5px 5px -3px rgba(0,0,0,.2);}
    25%  {top: -3px; box-shadow: 0 7px 8px 1px rgba(0,0,0,.14), 0 2px 13px 1px rgba(0,0,0,.12), 0 4px 5px -2px rgba(0,0,0,.2);}
    50%  {top: -2px; box-shadow: 0 6px 7px 0 rgba(0,0,0,.14), 0 2px 12px 1px rgba(0,0,0,.12), 0 3px 4px -2px rgba(0,0,0,.2);}
    75%  {top: -1px; box-shadow: 0 5px 6px 0 rgba(0,0,0,.14), 0 1px 11px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);}
    100% {top: 0px; box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);}
}

.mdl-card:hover {
    box-shadow: 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12), 0 5px 5px -3px rgba(0,0,0,.2);
    position: relative;
    top: -4px;
    animation-name: lift;
    animation-duration: 0.1s;
}

.mdl-card:not(:hover) {
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
    position: relative;
    top: 0px;
    animation-name: drop;
    animation-duration: 0.1s;
}