diff --git a/magic.styl b/magic.styl deleted file mode 100644 index bbb3475..0000000 --- a/magic.styl +++ /dev/null @@ -1,915 +0,0 @@ -// 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