animation.styl

@keyframes c-rotate
    0%
        transform-origin 50% 50%
        transform rotate(0)
    100%
        transform-origin 50% 50%
        transform rotate(360deg)

$origins = {
    down: center top 0,
    up: center bottom 0,
    left: right center 0,
    right: left center 0
}
for type, value in $origins
    .c-slide{type}-enter
    .c-slide{type}-leave
    .c-slide{type}-leave-to // for vue
    .c-slide{type}-appear
        transform-origin value 
        opacity 0
        if type == down || type == up
            transform scaleY(.8)
        else
            transform scaleX(.8)
    .c-slide{type}-enter-active
    .c-slide{type}-leave-active
    .c-slide{type}-appear-active
        transform-origin value 
        transition opacity $transition, transform $transition !important
        pointer-events none

.c-fade-enter
.c-fade-leave
.c-fade-leave-to
.c-fade-appear
    opacity 0 !important
.c-fade-enter-active
.c-fade-leave-active
.c-fade-appear-active
    transition opacity $transition 
.c-fade-move
    transition transform $transition
    pointer-events none

.c-expand-enter
.c-expand-leave
.c-expand-leave-to
    opacity 0
    overflow hidden
.c-expand-enter-active
.c-expand-leave-active
    transition all $transition
    overflow hidden
.c-expand-move
    transition transform $transition

.c-dropdown-enter
.c-dropdown-leave
.c-dropdown-leave-to
    opacity 0
    transform translateY(-20px)
.c-dropdown-enter-active
.c-dropdown-leave-active
.c-dropdown-move
    transition all $transition