move-motion($className, $keyframeName)

    make-motion($className, $keyframeName);
    {$className}-enter-active, {$className}-appear
        opacity: 0;
        animation-timing-function: $ease-in-out;
    {$className}-leave-active 
        animation-timing-function: $ease-in-out

move-motion('.move-up', viewMoveUp);

@keyframes viewMoveUpIn
    0%
        transform-origin: 0 0
        transform: translateY(-100%)
        opacity: 0
    100%
        transform-origin: 0 0
        transform: translateY(0%)
        opacity: 1

@keyframes viewMoveUpOut
    0%
        transform-origin: 0 0
        transform: translateY(0%)
        opacity: 1
    100% 
        transform-origin: 0 0
        transform: translateY(-100%)
        opacity: 0

move-motion('.move-notice', viewMoveNotice);

@keyframes viewMoveNoticeIn {
    0% {
        opacity: 0;
        transform-origin: 0 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform-origin: 0 0;
        transform: translateX(0%);
    }
}

@keyframes viewMoveNoticeOut {
    0% {
        transform-origin: 0 0;
        transform: translateX(0%);
        opacity: 1;
    }
    70% {
        transform-origin: 0 0;
        transform: translateX(100%);
        height: auto;
        padding: $notice-padding;
        margin-bottom: $notice-margin-bottom;
        opacity: 0;
    }
    100% {
        transform-origin: 0 0;
        transform: translateX(100%);
        height: 0;
        padding: 0;
        margin-bottom: 0;
        opacity: 0;
    }
}