.spin {
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.animate-removeRow {
    animation-name: removeRow;
    animation-fill-mode: forwards;
    animation-duration: 800ms;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.38, 0.97, 0.56, 0.76);
}

@keyframes removeRow {
    50% { height: 10px; padding: 5px; }
    100% {
        transform: rotateX(-90deg);
        transform-origin: top center;
        height: 5px;
        opacity: 0;
        padding: 0;
    }
}

/** https://thinkdobecreate.com/articles/css-animating-newly-added-element/ **/

.anim-show {
    animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
}

@keyframes show {
    100% {
        opacity: 1;
        transform: none;
    }
}
