magic.styl

//  vendor prefixes, thanks Stylus 

//schema of all prefixes
vendor(prop,arguments)
    -webkit-{prop} arguments
    -moz-{prop} arguments
    -ms-{prop} arguments
    -o-{prop} arguments
    {prop} arguments

// Propertys and values(arguments)
animation-name()
    vendor('animation-name',arguments)
animation-duration()
    vendor('animation-duration',arguments)
animation-fill-mode()
    vendor('animation-fill-mode',arguments)
transform-origin()
    vendor('transform-origin',arguments)
transform()
    vendor('transform',arguments)
animation-timing-function()
    vendor('animation-timing-function',arguments)
//http://caniuse.com/#feat=css-filters
filter() //This css property is only supported in -webkit- engine for now
    -webkit-filter : arguments
backface-visibility() // only Opera not supported
    vendor('backface-visibility',arguments)

// start animations
body
    backface-visibility: hidden

.magictime
    animation-duration: 1s
    animation-fill-mode: both


@keyframes magic
    0%
        opacity: 1
        transform-origin: 100% 200%
        transform: scale(1.0,1.0) rotate(0deg)
    100%
        opacity: 0
        transform-origin: 200% 500%
        transform: scale(0.0,0.0) rotate(270deg)


.magic
    animation-name: magic


@keyframes openDownLeft
    0%
        transform-origin: bottom left
        transform: rotate(0deg)
        animation-timing-function: ease-out
    100%
        transform-origin: bottom left
        transform: rotate(-110deg)
        animation-timing-function: ease-in-out


.openDownLeft
    animation-name: openDownLeft


@keyframes openDownRight
    0%
        transform-origin: bottom right
        transform: rotate(0deg)
        animation-timing-function: ease-out
    100%
        transform-origin: bottom right
        transform: rotate(110deg)
        animation-timing-function: ease-in-out


.openDownRight
    animation-name: openDownRight


@keyframes openUpLeft
    0%
        transform-origin: top left
        transform: rotate(0deg)
        animation-timing-function: ease-out
    100%
        transform-origin: top left
        transform: rotate(110deg)
        animation-timing-function: ease-in-out


.openUpLeft
    animation-name: openUpLeft


@keyframes openUpRight
    0%
        transform-origin: top right
        transform: rotate(0deg)
        animation-timing-function: ease-out
    100%
        transform-origin: top right
        transform: rotate(-110deg)
        animation-timing-function: ease-in-out


.openUpRight
    animation-name: openUpRight


@keyframes openDownLeftReturn
    0%
        transform-origin: bottom left
        transform: rotate(-110deg)
        animation-timing-function: ease-in-out
    100%
        transform-origin: bottom left
        transform: rotate(0deg)
        animation-timing-function: ease-out


.openDownLeftReturn
    animation-name: openDownLeftReturn


@keyframes openDownRightReturn
    0%
        transform-origin: bottom right
        transform: rotate(110deg)
        animation-timing-function: ease-in-out
    100%
        transform-origin: bottom right
        transform: rotate(0deg)
        animation-timing-function: ease-out


.openDownRightReturn
    animation-name: openDownRightReturn


@keyframes openUpLeftReturn
    0%
        transform-origin: top left
        transform: rotate(110deg)
        animation-timing-function: ease-in-out
    100%
        transform-origin: top left
        transform: rotate(0deg)
        animation-timing-function: ease-out


.openUpLeftReturn
    animation-name: openUpLeftReturn


@keyframes openUpRightReturn
    0%
        transform-origin: top right
        transform: rotate(-110deg)
        animation-timing-function: ease-in-out
    100%
        transform-origin: top right
        transform: rotate(0deg)
        animation-timing-function: ease-out


.openUpRightReturn
    animation-name: openUpRightReturn


@keyframes openDownLeftOut
    0%
        opacity: 1
        transform-origin: bottom left
        transform: rotate(0deg)
        animation-timing-function: ease-out
    100%
        opacity: 0
        transform-origin: bottom left
        transform: rotate(-110deg)
        animation-timing-function: ease-in-o


.openDownLeftOut
    animation-name: openDownLeftOut


@keyframes openDownRightOut
    0%
        opacity: 1
        transform-origin: bottom right
        transform: rotate(0deg)
        animation-timing-function: ease-out
    100%
        opacity: 0
        transform-origin: bottom right
        transform: rotate(110deg)
        animation-timing-function: ease-in-o


.openDownRightOut
    animation-name: openDownRightOut


@keyframes openUpLeftOut
    0%
        opacity: 1
        transform-origin: top left
        transform: rotate(0deg)
        animation-timing-function: ease-out
    100%
        opacity: 0
        transform-origin: top left
        transform: rotate(110deg)
        animation-timing-function: ease-in-o


.openUpLeftOut
    animation-name: openUpLeftOut


@keyframes openUpRightOut
    0%
        opacity: 1
        transform-origin: top right
        transform: rotate(0deg)
        animation-timing-function: ease-out
    100%
        opacity: 0
        transform-origin: top right
        transform: rotate(-110deg)
        animation-timing-function: ease-in-o


.openUpRightOut
    animation-name: openUpRightOut


@keyframes perspectiveDown
    0%
        transform-origin: 0 100%
        transform: perspective(800px) rotateX(0deg)
    100%
        transform-origin: 0 100%
        transform: perspective(800px) rotateX(-180deg)


.perspectiveDown
    backface-visibility: visible !important
    animation-name: perspectiveDown


@keyframes perspectiveLeft
    0%
        transform-origin: 0 0
        transform: perspective(800px) rotateY(0deg)
    100%
        transform-origin: 0 0
        transform: perspective(800px) rotateY(-180deg)


.perspectiveLeft
    backface-visibility: visible !important
    animation-name: perspectiveLeft


@keyframes perspectiveRight
    0%
        transform-origin: 100% 0
        transform: perspective(800px) rotateY(0deg)
    100%
        transform-origin: 100% 0
        transform: perspective(800px) rotateY(180deg)


.perspectiveRight
    backface-visibility: visible !important
    animation-name: perspectiveRight


@keyframes perspectiveUp
    0%
        transform-origin: 0 0
        transform: perspective(800px) rotateX(0deg)
    100%
        transform-origin: 0 0
        transform: perspective(800px) rotateX(180deg)


.perspectiveUp
    backface-visibility: visible !important
    animation-name: perspectiveUp


@keyframes perspectiveDownReturn
    0%
        transform-origin: 0 100%
        transform: perspective(800px) rotateX(-180deg)
    100%
        transform-origin: 0 100%
        transform: perspective(800px) rotateX(0deg)


.perspectiveDownReturn
    backface-visibility: visible !important
    animation-name: perspectiveDownReturn


@keyframes perspectiveLeftReturn
    0%
        transform-origin: 0 0
        transform: perspective(800px) rotateY(-180deg)
    100%
        transform-origin: 0 0
        transform: perspective(800px) rotateY(0deg)


.perspectiveLeftReturn
    backface-visibility: visible !important
    animation-name: perspectiveLeftReturn


@keyframes perspectiveRightReturn
    0%
        transform-origin: 100% 0
        transform: perspective(800px) rotateY(180deg)
    100%
        transform-origin: 100% 0
        transform: perspective(800px) rotateY(0deg)


.perspectiveRightReturn
    backface-visibility: visible !important
    animation-name: perspectiveRightReturn


@keyframes perspectiveUpReturn
    0%
        transform-origin: 0 0
        transform: perspective(800px) rotateX(180deg)
    100%
        transform-origin: 0 0
        transform: perspective(800px) rotateX(0deg)


.perspectiveUpReturn
    backface-visibility: visible !important
    animation-name: perspectiveUpReturn


@keyframes puffIn
    0%
        opacity: 0
        transform-origin: 50% 50%
        transform: scale(2.0,2.0)
        filter: blur(2px)
    100%
        opacity: 1
        transform-origin: 50% 50%
        transform: scale(1.0,1.0)


.puffIn
    animation-name: puffIn


@keyframes puffOut
    0%
        opacity: 1
        transform-origin: 50% 50%
        transform: scale(1.0,1.0)
    100%
        opacity: 0
        transform-origin: 50% 50%
        transform: scale(2.0,2.0)
        filter: blur(2px)


.puffOut
    animation-name: puffOut


@keyframes rotateDown
    0%
        transform-origin: 0 0
        transform: perspective(800px) rotateX(0deg) translateZ(0px)
    100%
        opacity: 0
        transform-origin: 50% 100%
        transform: perspective(800px) rotateX(-180deg) translateZ(300px)


.rotateDown
    backface-visibility: visible !important
    animation-name: rotateDown


@keyframes rotateLeft
    0%
        transform-origin: 0 0
        transform: perspective(800px) rotateY(0deg) translateZ(0px)
    100%
        opacity: 0
        transform-origin: 50% 0
        transform: perspective(800px) rotateY(180deg) translateZ(300px)


.rotateLeft
    backface-visibility: visible !important
    animation-name: rotateLeft


@keyframes rotateRight
    0%
        transform-origin: 0 0
        transform: perspective(800px) rotateY(0deg) translate3d(0px)
    100%
        opacity: 0
        transform-origin: 50% 0
        transform: perspective(800px) rotateY(-180deg) translateZ(150px)


.rotateRight
    backface-visibility: visible !important
    animation-name: rotateRight


@keyframes rotateUp
    0%
        transform-origin: 0 0
        transform: perspective(800px) rotateX(0deg) translateZ(0px)
    100%
        opacity: 0
        transform-origin: 50% 0
        transform: perspective(800px) rotateX(180deg) translateZ(100px)


.rotateUp
    backface-visibility: visible !important
    animation-name: rotateUp


@keyframes slideDown
    0%
        transform-origin: 0 0
        transform: translateY(0%)
    100%
        transform-origin: 0 0
        transform: translateY(100%)


.slideDown
    animation-name: slideDown


@keyframes slideLeft
    0%
        transform-origin: 0 0
        transform: translateX(0%)
    100%
        transform-origin: 0 0
        transform: translateX(-100%)


.slideLeft
    animation-name: slideLeft


@keyframes slideRight
    0%
        transform-origin: 0 0
        transform: translateX(0%)
    100%
        transform-origin: 0 0
        transform: translateX(100%)


.slideRight
    animation-name: slideRight


@keyframes slideUp
    0%
        transform-origin: 0 0
        transform: translateY(0%)
    100%
        transform-origin: 0 0
        transform: translateY(-100%)


.slideUp
    animation-name: slideUp


@keyframes slideDownReturn
    0%
        transform-origin: 0 0
        transform: translateY(100%)
    100%
        transform-origin: 0 0
        transform: translateY(0%)


.slideDownReturn
    animation-name: slideDownReturn


@keyframes slideLeftReturn
    0%
        transform-origin: 0 0
        transform: translateX(-100%)
    100%
        transform-origin: 0 0
        transform: translateX(0%)


.slideLeftReturn
    animation-name: slideLeftReturn


@keyframes slideRightReturn
    0%
        transform-origin: 0 0
        transform: translateX(100%)
    100%
        transform-origin: 0 0
        transform: translateX(0%)


.slideRightReturn
    animation-name: slideRightReturn


@keyframes slideUpReturn
    0%
        transform-origin: 0 0
        transform: translateY(-100%)
    100%
        transform-origin: 0 0
        transform: translateY(0%)


.slideUpReturn
    animation-name: slideUpReturn


@keyframes swap
    0%
        opacity: 0
        transform-origin: 0 100%
        transform: scale(0.0,0.0) translate(-700px,0px)
    100%
        opacity: 1
        transform-origin: 100% 100%
        transform: scale(1.0,1.0) translate(0px,0px)


.swap
    animation-name: swap


@keyframes twisterInDown
    0%
        opacity: 0
        transform-origin: 0 100%
        transform: scale(0.0,0.0) rotate(360deg) translateY(-100%)
    30%
        transform-origin: 0 100%
        transform: scale(0.0,0.0) rotate(360deg) translateY(-100%)
    100%
        opacity: 1
        transform-origin: 100% 100%
        transform: scale(1.0,1.0) rotate(0deg) translateY(0%)


.twisterInDown
    animation-name: twisterInDown


@keyframes twisterInUp
    0%
        opacity: 0
        transform-origin: 100% 0
        transform: scale(0.0,0.0) rotate(360deg) translateY(100%)
    30%
        transform-origin: 100% 0
        transform: scale(0.0,0.0) rotate(360deg) translateY(100%)
    100%
        opacity: 1
        transform-origin: 0 0
        transform: scale(1.0,1.0) rotate(0deg) translateY(0)


.twisterInUp
    animation-name: twisterInUp


@keyframes vanishIn
    0%
        opacity: 0
        transform-origin: 50% 50%
        transform: scale(2.0,2.0)
        filter: blur(90px)
    100%
        opacity: 1
        transform-origin: 50% 50%
        transform: scale(1.0,1.0)


.vanishIn
    animation-name: vanishIn


@keyframes vanishOut
    0%
        opacity: 1
        transform-origin: 50% 50%
        transform: scale(1.0,1.0)
    100%
        opacity: 0
        transform-origin: 50% 50%
        transform: scale(2.0,2.0)
        filter: blur(20px)


.vanishOut
    animation-name: vanishOut


@keyframes swashOut
    0%
        opacity: 1
        transform-origin: 50% 50%
        transform: scale(1.0,1.0)
    80%
        opacity: 1
        transform-origin: 50% 50%
        transform: scale(0.9,0.9)
    100%
        opacity: 0
        transform-origin: 50% 50%
        transform: scale(0.0,0.0)


.swashOut
    animation-name: swashOut


@keyframes swashIn
    0%
        opacity: 0
        transform-origin: 50% 50%
        transform: scale(0.0,0.0)
    90%
        opacity: 1
        transform-origin: 50% 50%
        transform: scale(0.9,0.9)
    100%
        transform-origin: 50% 50%
        transform: scale(1.0,1.0)


.swashIn
    animation-name: swashIn


@keyframes foolishOut
    0%
        opacity: 1
        transform-origin: 50% 50%
        transform: scale(1.0,1.0) rotate(360deg)
    20%
        opacity: 1
        transform-origin: 0% 0%
        transform: scale(0.5,0.5) rotate(0deg)
    40%
        opacity: 1
        transform-origin: 100% 0%
        transform: scale(0.5,0.5) rotate(0deg)
    60%
        opacity: 1
        transform-origin: 100%% 100%
        transform: scale(0.5,0.5) rotate(0deg)
    80%
        opacity: 1
        transform-origin: 0% 100%
        transform: scale(0.5,0.5) rotate(0deg)
    100%
        opacity: 0
        transform-origin: 50% 50%
        transform: scale(0.0,0.0) rotate(0deg)


.foolishOut
    animation-name: foolishOut


@keyframes foolishIn
    0%
        opacity: 0
        transform-origin: 50% 50%
        transform: scale(0.0,0.0) rotate(360deg)
    20%
        opacity: 1
        transform-origin: 0% 100%
        transform: scale(0.5,0.5) rotate(0deg)
    40%
        opacity: 1
        transform-origin: 100% 100%
        transform: scale(0.5,0.5) rotate(0deg)
    60%
        opacity: 1
        transform-origin: 100%% 0%
        transform: scale(0.5,0.5) rotate(0deg)
    80%
        opacity: 1
        transform-origin: 0% 0%
        transform: scale(0.5,0.5) rotate(0deg)
    100%
        opacity: 1
        transform-origin: 50% 50%
        transform: scale(1.0,1.0) rotate(0deg)


.foolishIn
    animation-name: foolishIn


@keyframes holeOut
    0%
        opacity: 1
        transform-origin: 50% 50%
        transform: scale(1.0,1.0) rotateY(0deg)
    100%
        opacity: 0
        transform-origin: 50% 50%
        transform: scale(0.0,0.0) rotateY(180deg)


.holeOut
    animation-name: holeOut


@keyframes tinRightOut
    0%, 20%, 40%, 50%
        opacity: 1
        transform: scale(1.0,1.0) translateX(0)
    10%, 30%
        opacity: 1
        transform: scale(1.1,1.1) translateX(0)
    100%
        opacity: 0
        transform: scale(1.0,1.0) translateX(900%)


.tinRightOut
    animation-name: tinRightOut


@keyframes tinLeftOut
    0%, 20%, 40%, 50%
        opacity: 1
        transform: scale(1.0,1.0) translateX(0)
    10%, 30%
        opacity: 1
        transform: scale(1.1,1.1) translateX(0)
    100%
        opacity: 0
        transform: scale(1.0,1.0) translateX(-900%)


.tinLeftOut
    animation-name: tinLeftOut


@keyframes tinUpOut
    0%, 20%, 40%, 50%
        opacity: 1
        transform: scale(1.0,1.0) translateY(0)
    10%, 30%
        opacity: 1
        transform: scale(1.1,1.1) translateY(0)
    100%
        opacity: 0
        transform: scale(1.0,1.0) translateY(-900%)


.tinUpOut
    animation-name: tinUpOut


@keyframes tinDownOut
    0%, 20%, 40%, 50%
        opacity: 1
        transform: scale(1.0,1.0) translateY(0)
    10%, 30%
        opacity: 1
        transform: scale(1.1,1.1) translateY(0)
    100%
        opacity: 0
        transform: scale(1.0,1.0) translateY(900%)


.tinDownOut
    animation-name: tinDownOut


@keyframes tinRightIn
    0%
        opacity: 0
        transform: scale(1.0,1.0) translateX(900%)
    50%, 70%, 90%
        opacity: 1
        transform: scale(1.1,1.1) translateX(0)
    60%, 80%, 100%
        opacity: 1
        transform: scale(1.0,1.0) translateX(0)


.tinRightIn
    animation-name: tinRightIn


@keyframes tinLeftIn
    0%
        opacity: 0
        transform: scale(1.0,1.0) translateX(-900%)
    50%, 70%, 90%
        opacity: 1
        transform: scale(1.1,1.1) translateX(0)
    60%, 80%, 100%
        opacity: 1
        transform: scale(1.0,1.0) translateX(0)


.tinLeftIn
    animation-name: tinLeftIn


@keyframes tinUpIn
    0%
        opacity: 0
        transform: scale(1.0,1.0) translateY(-900%)
    50%, 70%, 90%
        opacity: 1
        transform: scale(1.1,1.1) translateY(0)
    60%, 80%, 100%
        opacity: 1
        transform: scale(1.0,1.0) translateY(0)


.tinUpIn
    animation-name: tinUpIn


@keyframes tinDownIn
    0%
        opacity: 0
        transform: scale(1.0,1.0) translateY(900%)
    50%, 70%, 90%
        opacity: 1
        transform: scale(1.1,1.1) translateY(0)
    60%, 80%, 100%
        opacity: 1
        transform: scale(1.0,1.0) translateY(0)


.tinDownIn
    animation-name: tinDownIn


@keyframes bombRightOut
    0%
        opacity: 1
        transform-origin: 50% 50%
        transform: rotate(0deg)
        filter: blur(0px)
    50%
        opacity: 1
        transform-origin: 200% 50%
        transform: rotate(160deg)
        filter: blur(0px)
    100%
        opacity: 0
        transform-origin: 200% 50%
        transform: rotate(160deg)
        filter: blur(20px)


.bombRightOut
    animation-name: bombRightOut


@keyframes bombLeftOut
    0%
        opacity: 1
        transform-origin: 50% 50%
        transform: rotate(0deg)
        filter: blur(0px)
    50%
        opacity: 1
        transform-origin: -100% 50%
        transform: rotate(-160deg)
        filter: blur(0px)
    100%
        opacity: 0
        transform-origin: -100% 50%
        transform: rotate(-160deg)
        filter: blur(20px)

.bombLeftOut
    animation-name: bombLeftOut