Repository: miniMAC/magic
Branch: master
Commit: f26d3c3beaf3
Files: 74
Total size: 122.6 KB
Directory structure:
gitextract_wd8dlsq4/
├── .gitignore
├── LICENSE
├── README.md
├── assets/
│ └── scss/
│ ├── _magictime.scss
│ ├── _media.scss
│ ├── bling/
│ │ ├── _puffIn.scss
│ │ ├── _puffOut.scss
│ │ ├── _vanishIn.scss
│ │ └── _vanishOut.scss
│ ├── boing/
│ │ ├── _boingInUp.scss
│ │ └── _boingOutDown.scss
│ ├── bomb/
│ │ ├── _bombLeftOut.scss
│ │ └── _bombRightOut.scss
│ ├── magic.scss
│ ├── magic_effects/
│ │ ├── _magic.scss
│ │ ├── _swap.scss
│ │ ├── _twisterInDown.scss
│ │ └── _twisterInUp.scss
│ ├── math/
│ │ ├── _foolishIn.scss
│ │ ├── _foolishOut.scss
│ │ ├── _holeOut.scss
│ │ ├── _swashIn.scss
│ │ └── _swashOut.scss
│ ├── on_the_space/
│ │ ├── _spaceInDown.scss
│ │ ├── _spaceInLeft.scss
│ │ ├── _spaceInRight.scss
│ │ ├── _spaceInUp.scss
│ │ ├── _spaceOutDown.scss
│ │ ├── _spaceOutLeft.scss
│ │ ├── _spaceOutRight.scss
│ │ └── _spaceOutUp.scss
│ ├── perspective/
│ │ ├── _perspectiveDown.scss
│ │ ├── _perspectiveDownReturn.scss
│ │ ├── _perspectiveLeft.scss
│ │ ├── _perspectiveLeftReturn.scss
│ │ ├── _perspectiveRight.scss
│ │ ├── _perspectiveRightReturn.scss
│ │ ├── _perspectiveUp.scss
│ │ └── _perspectiveUpReturn.scss
│ ├── rotate/
│ │ ├── _rotateDown.scss
│ │ ├── _rotateLeft.scss
│ │ ├── _rotateRight.scss
│ │ └── _rotateUp.scss
│ ├── slide/
│ │ ├── _slideDown.scss
│ │ ├── _slideDownReturn.scss
│ │ ├── _slideLeft.scss
│ │ ├── _slideLeftReturn.scss
│ │ ├── _slideRight.scss
│ │ ├── _slideRightReturn.scss
│ │ ├── _slideUp.scss
│ │ └── _slideUpReturn.scss
│ ├── static_effects/
│ │ ├── _openDownLeft.scss
│ │ ├── _openDownLeftReturn.scss
│ │ ├── _openDownRight.scss
│ │ ├── _openDownRightReturn.scss
│ │ ├── _openUpLeft.scss
│ │ ├── _openUpLeftReturn.scss
│ │ ├── _openUpRight.scss
│ │ └── _openUpRightReturn.scss
│ ├── static_effects_out/
│ │ ├── _openDownLeftOut.scss
│ │ ├── _openDownRightOut.scss
│ │ ├── _openUpLeftOut.scss
│ │ └── _openUpRightOut.scss
│ └── tin/
│ ├── _tinDownIn.scss
│ ├── _tinDownOut.scss
│ ├── _tinLeftIn.scss
│ ├── _tinLeftOut.scss
│ ├── _tinRightIn.scss
│ ├── _tinRightOut.scss
│ ├── _tinUpIn.scss
│ └── _tinUpOut.scss
├── dist/
│ └── magic.css
├── gulpfile.js
└── package.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
# Exclusion
/node_modules
.DS_Store
.vscode
todo.txt
next.md
package-lock.json
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2022 Christian Pucci
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
:tophat: magic
---------------
CSS3 Animations with special effects. **(→ 3.1 kB gzip)**
## Demo
Checkout the demo for the animations [here](https://www.minimamente.com/project/magic/)
## **Table of Contents**
- [Installation](#installation)
- [Getting Started](#getting-started)
- [Usage with JavaScript](#usage-with-javascript)
- [Usage with jQuery](#usage-with-jquery)
- [HTML & CSS tips](#html--css-tips)
- [:tada: Gulp and SCSS (SASS) compiling](#tada-gulp-and-scss-sass-compiling)
- [:white_check_mark: Browser Support](#white_check_mark-browser-support)
## Installation
**GitHub Package Registry** - [Package url](https://github.com/miniMAC/magic/packages/24129)
```bash
npm install @minimac/magic.css
```
**NPM** - [Package url](https://www.npmjs.com/package/magic.css)
```bash
npm i magic.css
```
**YARN** - [Package url](https://yarnpkg.com/en/package/magic.css)
```bash
yarn add magic.css
```
## Getting Started
Include the file **magic.css** or include the minified version **magic.min.css**
```html
<link rel="stylesheet" href="yourpath/magic.css">
```
or
```html
<link rel="stylesheet" href="yourpath/magic.min.css">
```
## Usage with JavaScript
This is a sample code for on hover effect with **JavaScript**.
First, Include the class `magictime` and then a desired animation class.
```js
const selector = document.querySelector('.yourdiv')
selector.classList.add('magictime', 'puffIn')
```
If you want to load the animation after certain time, you can use this example:
```js
//set timer to 5 seconds, after that, load the magic animation
function myFunction() {
const selector = document.querySelector('.yourdiv')
selector.classList.add('magictime', 'puffIn')
}
setTimeout(myFunction, 5000);
```
If you want to load the animation after certain time but with an infinite loop, you can use this example:
```js
//set timer to 3 seconds, after that, load the magic animation and repeat forever
function myFunction() {
const selector = document.querySelector('.yourdiv')
selector.classList.add('magictime', 'puffIn')
}
setInterval(myFunction, 3000);
```
## Usage with jQuery
This is a sample code for on hover effect with jQuery.
First, Include the class `magictime` and then the desired animation class.
```js
$('.yourdiv').hover(function () {
$(this).addClass('magictime puffIn');
});
```
If you want to load the animation after certain time, you can use this example:
```js
//set timer to 5 seconds, after that, load the magic animation
setTimeout(function(){
$('.yourdiv').addClass('magictime puffIn');
}, 5000);
```
If you want to load the animation after certain time but with infinite loop, you can use this example:
```js
//set timer to 3 seconds, after that, load the magic animation and repeat forever
setInterval(function(){
$('.yourdiv').toggleClass('magictime puffIn');
}, 3000 );
```
## HTML & CSS tips
You can **change the time** of the animation by setting the class `magictime` for example:
```css
.magictime {
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
```
**Default** CSS timing is:
```css
.magictime {
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
```
If you want to assign the **timing to a specific animation**, you can use the following code *(use 2 class)*:
```css
.magictime.magic {
-webkit-animation-duration: 10s;
animation-duration: 10s;
}
```
## Animation Classes
| MAGIC EFFECTS | BLING | STATIC EFFECTS | STATIC EFFECTS OUT | PERSPECTIVE | ROTATE |
|---------------|-----------|---------------------|--------------------|------------------------|-------------|
| magic | puffIn | openDownLeft | openDownLeftOut | perspectiveDown | rotateDown |
| twisterInDown | puffOut | openDownRight | openDownRightOut | perspectiveUp | rotateUp |
| twisterInUp | vanishIn | openUpLeft | openUpLeftOut | perspectiveLeft | rotateLeft |
| swap | vanishOut | openUpRight | openUpRightOut | perspectiveRight | rotateRight |
| | | openDownLeftReturn | | perspectiveDownReturn | |
| | | openDownRightReturn | | perspectiveUpReturn | |
| | | openUpLeftReturn | | perspectiveLeftReturn | |
| | | openUpRightReturn | | perspectiveRightReturn | |
| SLIDE | MATH | TIN | BOMB | BOING | ON THE SPACE |
|------------------|-----------|-------------|--------------|--------------|---------------|
| slideDown | swashOut | tinRightOut | bombRightOut | boingInUp | spaceOutUp |
| slideUp | swashIn | tinLeftOut | bombLeftOut | boingOutDown | spaceOutRight |
| slideLeft | foolishIn | tinUpOut | | | spaceOutDown |
| slideRight | holeOut | tinDownOut | | | spaceOutLeft |
| slideDownReturn | | tinRightIn | | | spaceInUp |
| slideUpReturn | | tinLeftIn | | | spaceInRight |
| slideLeftReturn | | tinUpIn | | | spaceInDown |
| slideRightReturn | | tinDownIn | | | spaceInLeft |
:tada: Gulp and SCSS (SASS) compiling
---------------
If you want to customize the CSS files, now you will have the chance. For example, if you want to include only certain animations, you will have to go to this file:
```html
assets/scss/magic.scss
```
Comment or uncomment your desired file and run from terminal the following commands:
```bash
npm install
```
and last command:
```bash
gulp
```
**Automatically** this generate the new files!
:white_check_mark: Browser Support
---------------
**Browser** | Chrome | Firefox | Safari | iOS Safari | Opera | Android | Android Chrome | IE | Opera Mini
--- | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---:
**Version** | 31+ | 31+ | 7+ | 7.1+ | 27+ | 4.1+ | 42+ | 10+ | :x:
================================================
FILE: assets/scss/_magictime.scss
================================================
.magictime {
animation-duration: 1s;
animation-fill-mode: both;
}
================================================
FILE: assets/scss/_media.scss
================================================
@media (print), (prefers-reduced-motion) {
.magictime {
animation: unset !important;
transition: none !important;
}
}
================================================
FILE: assets/scss/bling/_puffIn.scss
================================================
.puffIn {
animation-name: puffIn;
}
@-webkit-keyframes puffIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2, 2);
filter: blur(2px);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
filter: blur(0px);
}
}
@keyframes puffIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2, 2);
filter: blur(2px);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
filter: blur(0px);
}
}
================================================
FILE: assets/scss/bling/_puffOut.scss
================================================
.puffOut {
animation-name: puffOut;
}
@-webkit-keyframes puffOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
filter: blur(0px);
}
100% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2, 2);
filter: blur(2px);
}
}
@keyframes puffOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
filter: blur(0px);
}
100% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2, 2);
filter: blur(2px);
}
}
================================================
FILE: assets/scss/bling/_vanishIn.scss
================================================
.vanishIn {
animation-name: vanishIn;
}
@-webkit-keyframes vanishIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2, 2);
filter: blur(90px);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
filter: blur(0px);
}
}
@keyframes vanishIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2, 2);
filter: blur(90px);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
filter: blur(0px);
}
}
================================================
FILE: assets/scss/bling/_vanishOut.scss
================================================
.vanishOut {
animation-name: vanishOut;
}
@-webkit-keyframes vanishOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
filter: blur(0px);
}
100% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2, 2);
filter: blur(20px);
}
}
@keyframes vanishOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
filter: blur(0px);
}
100% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2, 2);
filter: blur(20px);
}
}
================================================
FILE: assets/scss/boing/_boingInUp.scss
================================================
.boingInUp {
-webkit-animation-name: boingInUp;
animation-name: boingInUp;
}
@-webkit-keyframes boingInUp {
0% {
opacity: 0;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(800px) rotateX(-90deg);
transform: perspective(800px) rotateX(-90deg);
}
50% {
opacity: 1;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(800px) rotateX(50deg);
transform: perspective(800px) rotateX(50deg);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(800px) rotateX(0deg);
transform: perspective(800px) rotateX(0deg);
}
}
@keyframes boingInUp {
0% {
opacity: 0;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(800px) rotateX(-90deg);
transform: perspective(800px) rotateX(-90deg);
}
50% {
opacity: 1;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(800px) rotateX(50deg);
transform: perspective(800px) rotateX(50deg);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(800px) rotateX(0deg);
transform: perspective(800px) rotateX(0deg);
}
}
================================================
FILE: assets/scss/boing/_boingOutDown.scss
================================================
.boingOutDown {
-webkit-animation-name: boingOutDown;
animation-name: boingOutDown;
}
@-webkit-keyframes boingOutDown {
0% {
opacity: 1;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
transform: perspective(800px) rotateX(0deg) rotateY(0deg);
}
20% {
opacity: 1;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: perspective(800px) rotateX(0deg) rotateY(10deg);
transform: perspective(800px) rotateX(0deg) rotateY(10deg);
}
30% {
opacity: 1;
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
transform: perspective(800px) rotateX(0deg) rotateY(0deg);
}
40% {
opacity: 1;
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: perspective(800px) rotateX(10deg) rotateY(10deg);
transform: perspective(800px) rotateX(10deg) rotateY(10deg);
}
100% {
opacity: 0;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: perspective(800px) rotateX(90deg) rotateY(0deg);
transform: perspective(800px) rotateX(90deg) rotateY(0deg);
}
}
@keyframes boingOutDown {
0% {
opacity: 1;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
transform: perspective(800px) rotateX(0deg) rotateY(0deg);
}
20% {
opacity: 1;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: perspective(800px) rotateX(0deg) rotateY(10deg);
transform: perspective(800px) rotateX(0deg) rotateY(10deg);
}
30% {
opacity: 1;
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
transform: perspective(800px) rotateX(0deg) rotateY(0deg);
}
40% {
opacity: 1;
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: perspective(800px) rotateX(10deg) rotateY(10deg);
transform: perspective(800px) rotateX(10deg) rotateY(10deg);
}
100% {
opacity: 0;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: perspective(800px) rotateX(90deg) rotateY(0deg);
transform: perspective(800px) rotateX(90deg) rotateY(0deg);
}
}
================================================
FILE: assets/scss/bomb/_bombLeftOut.scss
================================================
.bombLeftOut {
-webkit-animation-name: bombLeftOut;
animation-name: bombLeftOut;
}
@-webkit-keyframes bombLeftOut {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-filter: blur(0px);
filter: blur(0px);
}
50% {
opacity: 1;
-webkit-transform-origin: -100% 50%;
transform-origin: -100% 50%;
-webkit-transform: rotate(-160deg);
transform: rotate(-160deg);
-webkit-filter: blur(0px);
filter: blur(0px);
}
100% {
opacity: 0;
-webkit-transform-origin: -100% 50%;
transform-origin: -100% 50%;
-webkit-transform: rotate(-160deg);
transform: rotate(-160deg);
-webkit-filter: blur(20px);
filter: blur(20px);
}
}
@keyframes bombLeftOut {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-filter: blur(0px);
filter: blur(0px);
}
50% {
opacity: 1;
-webkit-transform-origin: -100% 50%;
transform-origin: -100% 50%;
-webkit-transform: rotate(-160deg);
transform: rotate(-160deg);
-webkit-filter: blur(0px);
filter: blur(0px);
}
100% {
opacity: 0;
-webkit-transform-origin: -100% 50%;
transform-origin: -100% 50%;
-webkit-transform: rotate(-160deg);
transform: rotate(-160deg);
-webkit-filter: blur(20px);
filter: blur(20px);
}
}
================================================
FILE: assets/scss/bomb/_bombRightOut.scss
================================================
.bombRightOut {
-webkit-animation-name: bombRightOut;
animation-name: bombRightOut;
}
@-webkit-keyframes bombRightOut {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-filter: blur(0px);
filter: blur(0px);
}
50% {
opacity: 1;
-webkit-transform-origin: 200% 50%;
transform-origin: 200% 50%;
-webkit-transform: rotate(160deg);
transform: rotate(160deg);
-webkit-filter: blur(0px);
filter: blur(0px);
}
100% {
opacity: 0;
-webkit-transform-origin: 200% 50%;
transform-origin: 200% 50%;
-webkit-transform: rotate(160deg);
transform: rotate(160deg);
-webkit-filter: blur(20px);
filter: blur(20px);
}
}
@keyframes bombRightOut {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-filter: blur(0px);
filter: blur(0px);
}
50% {
opacity: 1;
-webkit-transform-origin: 200% 50%;
transform-origin: 200% 50%;
-webkit-transform: rotate(160deg);
transform: rotate(160deg);
-webkit-filter: blur(0px);
filter: blur(0px);
}
100% {
opacity: 0;
-webkit-transform-origin: 200% 50%;
transform-origin: 200% 50%;
-webkit-transform: rotate(160deg);
transform: rotate(160deg);
-webkit-filter: blur(20px);
filter: blur(20px);
}
}
================================================
FILE: assets/scss/magic.scss
================================================
@charset "UTF-8";
/*!
* Magic - https://www.minimamente.com
* Licensed under the MIT license - https://opensource.org/licenses/MIT
* Copyright (c) 2022 Christian Pucci
*/
// bling
@import "bling/puffIn";
@import "bling/puffOut";
@import "bling/vanishIn";
@import "bling/vanishOut";
// boing
@import "boing/boingInUp";
@import "boing/boingOutDown";
// bomb
@import "bomb/bombLeftOut";
@import "bomb/bombRightOut";
// magic_effects
@import "magic_effects/magic";
@import "magic_effects/swap";
@import "magic_effects/twisterInDown";
@import "magic_effects/twisterInUp";
// math
@import "math/foolishIn";
@import "math/foolishOut";
@import "math/holeOut";
@import "math/swashIn";
@import "math/swashOut";
// on_the_space
@import "on_the_space/spaceInDown";
@import "on_the_space/spaceInLeft";
@import "on_the_space/spaceInRight";
@import "on_the_space/spaceInUp";
@import "on_the_space/spaceOutDown";
@import "on_the_space/spaceOutLeft";
@import "on_the_space/spaceOutRight";
@import "on_the_space/spaceOutUp";
// perspective
@import "perspective/perspectiveDown";
@import "perspective/perspectiveDownReturn";
@import "perspective/perspectiveLeft";
@import "perspective/perspectiveLeftReturn";
@import "perspective/perspectiveRight";
@import "perspective/perspectiveRightReturn";
@import "perspective/perspectiveUp";
@import "perspective/perspectiveUpReturn";
// rotate
@import "rotate/rotateDown";
@import "rotate/rotateLeft";
@import "rotate/rotateRight";
@import "rotate/rotateUp";
// slide
@import "slide/slideDown";
@import "slide/slideDownReturn";
@import "slide/slideLeft";
@import "slide/slideLeftReturn";
@import "slide/slideRight";
@import "slide/slideRightReturn";
@import "slide/slideUp";
@import "slide/slideUpReturn";
// static_effects
@import "static_effects/openDownLeft";
@import "static_effects/openDownLeftReturn";
@import "static_effects/openDownRight";
@import "static_effects/openDownRightReturn";
@import "static_effects/openUpLeft";
@import "static_effects/openUpLeftReturn";
@import "static_effects/openUpRight";
@import "static_effects/openUpRightReturn";
// static_effects_out
@import "static_effects_out/openDownLeftOut";
@import "static_effects_out/openDownRightOut";
@import "static_effects_out/openUpLeftOut";
@import "static_effects_out/openUpRightOut";
// tin
@import "tin/tinDownIn";
@import "tin/tinDownOut";
@import "tin/tinLeftIn";
@import "tin/tinLeftOut";
@import "tin/tinRightIn";
@import "tin/tinRightOut";
@import "tin/tinUpIn";
@import "tin/tinUpOut";
// magictime
@import "magictime";
// media
@import "media";
================================================
FILE: assets/scss/magic_effects/_magic.scss
================================================
.magic {
-webkit-animation-name: magic;
animation-name: magic;
}
@-webkit-keyframes magic {
0% {
opacity: 1;
-webkit-transform-origin: 100% 200%;
transform-origin: 100% 200%;
-webkit-transform: scale(1, 1) rotate(0deg);
transform: scale(1, 1) rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform-origin: 200% 500%;
transform-origin: 200% 500%;
-webkit-transform: scale(0, 0) rotate(270deg);
transform: scale(0, 0) rotate(270deg);
}
}
@keyframes magic {
0% {
opacity: 1;
-webkit-transform-origin: 100% 200%;
transform-origin: 100% 200%;
-webkit-transform: scale(1, 1) rotate(0deg);
transform: scale(1, 1) rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform-origin: 200% 500%;
transform-origin: 200% 500%;
-webkit-transform: scale(0, 0) rotate(270deg);
transform: scale(0, 0) rotate(270deg);
}
}
================================================
FILE: assets/scss/magic_effects/_swap.scss
================================================
.swap {
-webkit-animation-name: swap;
animation-name: swap;
}
@-webkit-keyframes swap {
0% {
opacity: 0;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scale(0, 0) translate(-700px, 0px);
transform: scale(0, 0) translate(-700px, 0px);
}
100% {
opacity: 1;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: scale(1, 1) translate(0px, 0px);
transform: scale(1, 1) translate(0px, 0px);
}
}
@keyframes swap {
0% {
opacity: 0;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scale(0, 0) translate(-700px, 0px);
transform: scale(0, 0) translate(-700px, 0px);
}
100% {
opacity: 1;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: scale(1, 1) translate(0px, 0px);
transform: scale(1, 1) translate(0px, 0px);
}
}
================================================
FILE: assets/scss/magic_effects/_twisterInDown.scss
================================================
.twisterInDown {
-webkit-animation-name: twisterInDown;
animation-name: twisterInDown;
}
@-webkit-keyframes twisterInDown {
0% {
opacity: 0;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%);
transform: scale(0, 0) rotate(360deg) translateY(-100%);
}
30% {
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%);
transform: scale(0, 0) rotate(360deg) translateY(-100%);
}
100% {
opacity: 1;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: scale(1, 1) rotate(0deg) translateY(0%);
transform: scale(1, 1) rotate(0deg) translateY(0%);
}
}
@keyframes twisterInDown {
0% {
opacity: 0;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%);
transform: scale(0, 0) rotate(360deg) translateY(-100%);
}
30% {
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%);
transform: scale(0, 0) rotate(360deg) translateY(-100%);
}
100% {
opacity: 1;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: scale(1, 1) rotate(0deg) translateY(0%);
transform: scale(1, 1) rotate(0deg) translateY(0%);
}
}
================================================
FILE: assets/scss/magic_effects/_twisterInUp.scss
================================================
.twisterInUp {
-webkit-animation-name: twisterInUp;
animation-name: twisterInUp;
}
@-webkit-keyframes twisterInUp {
0% {
opacity: 0;
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: scale(0, 0) rotate(360deg) translateY(100%);
transform: scale(0, 0) rotate(360deg) translateY(100%);
}
30% {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: scale(0, 0) rotate(360deg) translateY(100%);
transform: scale(0, 0) rotate(360deg) translateY(100%);
}
100% {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(1, 1) rotate(0deg) translateY(0);
transform: scale(1, 1) rotate(0deg) translateY(0);
}
}
@keyframes twisterInUp {
0% {
opacity: 0;
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: scale(0, 0) rotate(360deg) translateY(100%);
transform: scale(0, 0) rotate(360deg) translateY(100%);
}
30% {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: scale(0, 0) rotate(360deg) translateY(100%);
transform: scale(0, 0) rotate(360deg) translateY(100%);
}
100% {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(1, 1) rotate(0deg) translateY(0);
transform: scale(1, 1) rotate(0deg) translateY(0);
}
}
================================================
FILE: assets/scss/math/_foolishIn.scss
================================================
.foolishIn {
-webkit-animation-name: foolishIn;
animation-name: foolishIn;
}
@-webkit-keyframes foolishIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0, 0) rotate(360deg);
transform: scale(0, 0) rotate(360deg);
}
20% {
opacity: 1;
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
40% {
opacity: 1;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
60% {
opacity: 1;
-webkit-transform-origin: 0%;
transform-origin: 0%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
80% {
opacity: 1;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(1, 1) rotate(0deg);
transform: scale(1, 1) rotate(0deg);
}
}
@keyframes foolishIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0, 0) rotate(360deg);
transform: scale(0, 0) rotate(360deg);
}
20% {
opacity: 1;
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
40% {
opacity: 1;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
60% {
opacity: 1;
-webkit-transform-origin: 0%;
transform-origin: 0%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
80% {
opacity: 1;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(1, 1) rotate(0deg);
transform: scale(1, 1) rotate(0deg);
}
}
================================================
FILE: assets/scss/math/_foolishOut.scss
================================================
.foolishOut {
-webkit-animation-name: foolishOut;
animation-name: foolishOut;
}
@-webkit-keyframes foolishOut {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(1, 1) rotate(360deg);
transform: scale(1, 1) rotate(360deg);
}
20% {
opacity: 1;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
40% {
opacity: 1;
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
60% {
opacity: 1;
-webkit-transform-origin: 0%;
transform-origin: 0%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
80% {
opacity: 1;
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0, 0) rotate(0deg);
transform: scale(0, 0) rotate(0deg);
}
}
@keyframes foolishOut {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(1, 1) rotate(360deg);
transform: scale(1, 1) rotate(360deg);
}
20% {
opacity: 1;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
40% {
opacity: 1;
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
60% {
opacity: 1;
-webkit-transform-origin: 0%;
transform-origin: 0%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
80% {
opacity: 1;
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0, 0) rotate(0deg);
transform: scale(0, 0) rotate(0deg);
}
}
================================================
FILE: assets/scss/math/_holeOut.scss
================================================
.holeOut {
-webkit-animation-name: holeOut;
animation-name: holeOut;
}
@-webkit-keyframes holeOut {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(1, 1) rotateY(0deg);
transform: scale(1, 1) rotateY(0deg);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0, 0) rotateY(180deg);
transform: scale(0, 0) rotateY(180deg);
}
}
@keyframes holeOut {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(1, 1) rotateY(0deg);
transform: scale(1, 1) rotateY(0deg);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0, 0) rotateY(180deg);
transform: scale(0, 0) rotateY(180deg);
}
}
================================================
FILE: assets/scss/math/_swashIn.scss
================================================
.swashIn {
-webkit-animation-name: swashIn;
animation-name: swashIn;
}
@-webkit-keyframes swashIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
}
90% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@keyframes swashIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
}
90% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
================================================
FILE: assets/scss/math/_swashOut.scss
================================================
.swashOut {
-webkit-animation-name: swashOut;
animation-name: swashOut;
}
@-webkit-keyframes swashOut {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
80% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
}
}
@keyframes swashOut {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
80% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
}
}
================================================
FILE: assets/scss/on_the_space/_spaceInDown.scss
================================================
.spaceInDown {
-webkit-animation-name: spaceInDown;
animation-name: spaceInDown;
}
@-webkit-keyframes spaceInDown {
0% {
opacity: 0;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scale(0.2) translate(0%, 200%);
transform: scale(0.2) translate(0%, 200%);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scale(1) translate(0%, 0%);
transform: scale(1) translate(0%, 0%);
}
}
@keyframes spaceInDown {
0% {
opacity: 0;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scale(0.2) translate(0%, 200%);
transform: scale(0.2) translate(0%, 200%);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scale(1) translate(0%, 0%);
transform: scale(1) translate(0%, 0%);
}
}
================================================
FILE: assets/scss/on_the_space/_spaceInLeft.scss
================================================
.spaceInLeft {
-webkit-animation-name: spaceInLeft;
animation-name: spaceInLeft;
}
@-webkit-keyframes spaceInLeft {
0% {
opacity: 0;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: scale(0.2) translate(-200%, 0%);
transform: scale(0.2) translate(-200%, 0%);
}
100% {
opacity: 1;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: scale(1) translate(0%, 0%);
transform: scale(1) translate(0%, 0%);
}
}
@keyframes spaceInLeft {
0% {
opacity: 0;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: scale(0.2) translate(-200%, 0%);
transform: scale(0.2) translate(-200%, 0%);
}
100% {
opacity: 1;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: scale(1) translate(0%, 0%);
transform: scale(1) translate(0%, 0%);
}
}
================================================
FILE: assets/scss/on_the_space/_spaceInRight.scss
================================================
.spaceInRight {
-webkit-animation-name: spaceInRight;
animation-name: spaceInRight;
}
@-webkit-keyframes spaceInRight {
0% {
opacity: 0;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: scale(0.2) translate(200%, 0%);
transform: scale(0.2) translate(200%, 0%);
}
100% {
opacity: 1;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: scale(1) translate(0%, 0%);
transform: scale(1) translate(0%, 0%);
}
}
@keyframes spaceInRight {
0% {
opacity: 0;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: scale(0.2) translate(200%, 0%);
transform: scale(0.2) translate(200%, 0%);
}
100% {
opacity: 1;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: scale(1) translate(0%, 0%);
transform: scale(1) translate(0%, 0%);
}
}
================================================
FILE: assets/scss/on_the_space/_spaceInUp.scss
================================================
.spaceInUp {
-webkit-animation-name: spaceInUp;
animation-name: spaceInUp;
}
@-webkit-keyframes spaceInUp {
0% {
opacity: 0;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(0.2) translate(0%, -200%);
transform: scale(0.2) translate(0%, -200%);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(1) translate(0%, 0%);
transform: scale(1) translate(0%, 0%);
}
}
@keyframes spaceInUp {
0% {
opacity: 0;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(0.2) translate(0%, -200%);
transform: scale(0.2) translate(0%, -200%);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(1) translate(0%, 0%);
transform: scale(1) translate(0%, 0%);
}
}
================================================
FILE: assets/scss/on_the_space/_spaceOutDown.scss
================================================
.spaceOutDown {
-webkit-animation-name: spaceOutDown;
animation-name: spaceOutDown;
}
@-webkit-keyframes spaceOutDown {
0% {
opacity: 1;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scale(1) translate(0%, 0%);
transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scale(0.2) translate(0%, 200%);
transform: scale(0.2) translate(0%, 200%);
}
}
@keyframes spaceOutDown {
0% {
opacity: 1;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scale(1) translate(0%, 0%);
transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scale(0.2) translate(0%, 200%);
transform: scale(0.2) translate(0%, 200%);
}
}
================================================
FILE: assets/scss/on_the_space/_spaceOutLeft.scss
================================================
.spaceOutLeft {
-webkit-animation-name: spaceOutLeft;
animation-name: spaceOutLeft;
}
@-webkit-keyframes spaceOutLeft {
0% {
opacity: 1;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: scale(1) translate(0%, 0%);
transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: scale(0.2) translate(-200%, 0%);
transform: scale(0.2) translate(-200%, 0%);
}
}
@keyframes spaceOutLeft {
0% {
opacity: 1;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: scale(1) translate(0%, 0%);
transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: scale(0.2) translate(-200%, 0%);
transform: scale(0.2) translate(-200%, 0%);
}
}
================================================
FILE: assets/scss/on_the_space/_spaceOutRight.scss
================================================
.spaceOutRight {
-webkit-animation-name: spaceOutRight;
animation-name: spaceOutRight;
}
@-webkit-keyframes spaceOutRight {
0% {
opacity: 1;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: scale(1) translate(0%, 0%);
transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: scale(0.2) translate(200%, 0%);
transform: scale(0.2) translate(200%, 0%);
}
}
@keyframes spaceOutRight {
0% {
opacity: 1;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: scale(1) translate(0%, 0%);
transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: scale(0.2) translate(200%, 0%);
transform: scale(0.2) translate(200%, 0%);
}
}
================================================
FILE: assets/scss/on_the_space/_spaceOutUp.scss
================================================
.spaceOutUp {
-webkit-animation-name: spaceOutUp;
animation-name: spaceOutUp;
}
@-webkit-keyframes spaceOutUp {
0% {
opacity: 1;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(1) translate(0%, 0%);
transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(0.2) translate(0%, -200%);
transform: scale(0.2) translate(0%, -200%);
}
}
@keyframes spaceOutUp {
0% {
opacity: 1;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(1) translate(0%, 0%);
transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(0.2) translate(0%, -200%);
transform: scale(0.2) translate(0%, -200%);
}
}
================================================
FILE: assets/scss/perspective/_perspectiveDown.scss
================================================
.perspectiveDown {
-webkit-animation-name: perspectiveDown;
animation-name: perspectiveDown;
}
@-webkit-keyframes perspectiveDown {
0% {
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: perspective(800px) rotateX(0deg);
transform: perspective(800px) rotateX(0deg);
}
100% {
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: perspective(800px) rotateX(-180deg);
transform: perspective(800px) rotateX(-180deg);
}
}
@keyframes perspectiveDown {
0% {
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: perspective(800px) rotateX(0deg);
transform: perspective(800px) rotateX(0deg);
}
100% {
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: perspective(800px) rotateX(-180deg);
transform: perspective(800px) rotateX(-180deg);
}
}
================================================
FILE: assets/scss/perspective/_perspectiveDownReturn.scss
================================================
.perspectiveDownReturn {
-webkit-animation-name: perspectiveDownReturn;
animation-name: perspectiveDownReturn;
}
@-webkit-keyframes perspectiveDownReturn {
0% {
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: perspective(800px) rotateX(-180deg);
transform: perspective(800px) rotateX(-180deg);
}
100% {
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: perspective(800px) rotateX(0deg);
transform: perspective(800px) rotateX(0deg);
}
}
@keyframes perspectiveDownReturn {
0% {
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: perspective(800px) rotateX(-180deg);
transform: perspective(800px) rotateX(-180deg);
}
100% {
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: perspective(800px) rotateX(0deg);
transform: perspective(800px) rotateX(0deg);
}
}
================================================
FILE: assets/scss/perspective/_perspectiveLeft.scss
================================================
.perspectiveLeft {
-webkit-animation-name: perspectiveLeft;
animation-name: perspectiveLeft;
}
@-webkit-keyframes perspectiveLeft {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateY(0deg);
transform: perspective(800px) rotateY(0deg);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateY(-180deg);
transform: perspective(800px) rotateY(-180deg);
}
}
@keyframes perspectiveLeft {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateY(0deg);
transform: perspective(800px) rotateY(0deg);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateY(-180deg);
transform: perspective(800px) rotateY(-180deg);
}
}
================================================
FILE: assets/scss/perspective/_perspectiveLeftReturn.scss
================================================
.perspectiveLeftReturn {
-webkit-animation-name: perspectiveLeftReturn;
animation-name: perspectiveLeftReturn;
}
@-webkit-keyframes perspectiveLeftReturn {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateY(-180deg);
transform: perspective(800px) rotateY(-180deg);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateY(0deg);
transform: perspective(800px) rotateY(0deg);
}
}
@keyframes perspectiveLeftReturn {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateY(-180deg);
transform: perspective(800px) rotateY(-180deg);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateY(0deg);
transform: perspective(800px) rotateY(0deg);
}
}
================================================
FILE: assets/scss/perspective/_perspectiveRight.scss
================================================
.perspectiveRight {
-webkit-animation-name: perspectiveRight;
animation-name: perspectiveRight;
}
@-webkit-keyframes perspectiveRight {
0% {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: perspective(800px) rotateY(0deg);
transform: perspective(800px) rotateY(0deg);
}
100% {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: perspective(800px) rotateY(180deg);
transform: perspective(800px) rotateY(180deg);
}
}
@keyframes perspectiveRight {
0% {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: perspective(800px) rotateY(0deg);
transform: perspective(800px) rotateY(0deg);
}
100% {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: perspective(800px) rotateY(180deg);
transform: perspective(800px) rotateY(180deg);
}
}
================================================
FILE: assets/scss/perspective/_perspectiveRightReturn.scss
================================================
.perspectiveRightReturn {
-webkit-animation-name: perspectiveRightReturn;
animation-name: perspectiveRightReturn;
}
@-webkit-keyframes perspectiveRightReturn {
0% {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: perspective(800px) rotateY(180deg);
transform: perspective(800px) rotateY(180deg);
}
100% {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: perspective(800px) rotateY(0deg);
transform: perspective(800px) rotateY(0deg);
}
}
@keyframes perspectiveRightReturn {
0% {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: perspective(800px) rotateY(180deg);
transform: perspective(800px) rotateY(180deg);
}
100% {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: perspective(800px) rotateY(0deg);
transform: perspective(800px) rotateY(0deg);
}
}
================================================
FILE: assets/scss/perspective/_perspectiveUp.scss
================================================
.perspectiveUp {
-webkit-animation-name: perspectiveUp;
animation-name: perspectiveUp;
}
@-webkit-keyframes perspectiveUp {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateX(0deg);
transform: perspective(800px) rotateX(0deg);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateX(180deg);
transform: perspective(800px) rotateX(180deg);
}
}
@keyframes perspectiveUp {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateX(0deg);
transform: perspective(800px) rotateX(0deg);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateX(180deg);
transform: perspective(800px) rotateX(180deg);
}
}
================================================
FILE: assets/scss/perspective/_perspectiveUpReturn.scss
================================================
.perspectiveUpReturn {
-webkit-animation-name: perspectiveUpReturn;
animation-name: perspectiveUpReturn;
}
@-webkit-keyframes perspectiveUpReturn {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateX(180deg);
transform: perspective(800px) rotateX(180deg);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateX(0deg);
transform: perspective(800px) rotateX(0deg);
}
}
@keyframes perspectiveUpReturn {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateX(180deg);
transform: perspective(800px) rotateX(180deg);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateX(0deg);
transform: perspective(800px) rotateX(0deg);
}
}
================================================
FILE: assets/scss/rotate/_rotateDown.scss
================================================
.rotateDown {
-webkit-animation-name: rotateDown;
animation-name: rotateDown;
}
@-webkit-keyframes rotateDown {
0% {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
transform: perspective(800px) rotateX(0deg) translateZ(0px);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(800px) rotateX(-180deg) translateZ(300px);
transform: perspective(800px) rotateX(-180deg) translateZ(300px);
}
}
@keyframes rotateDown {
0% {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
transform: perspective(800px) rotateX(0deg) translateZ(0px);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(800px) rotateX(-180deg) translateZ(300px);
transform: perspective(800px) rotateX(-180deg) translateZ(300px);
}
}
================================================
FILE: assets/scss/rotate/_rotateLeft.scss
================================================
.rotateLeft {
-webkit-animation-name: rotateLeft;
animation-name: rotateLeft;
}
@-webkit-keyframes rotateLeft {
0% {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateY(0deg) translateZ(0px);
transform: perspective(800px) rotateY(0deg) translateZ(0px);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: perspective(800px) rotateY(-180deg) translateZ(300px);
transform: perspective(800px) rotateY(-180deg) translateZ(300px);
}
}
@keyframes rotateLeft {
0% {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateY(0deg) translateZ(0px);
transform: perspective(800px) rotateY(0deg) translateZ(0px);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: perspective(800px) rotateY(-180deg) translateZ(300px);
transform: perspective(800px) rotateY(-180deg) translateZ(300px);
}
}
================================================
FILE: assets/scss/rotate/_rotateRight.scss
================================================
.rotateRight {
-webkit-animation-name: rotateRight;
animation-name: rotateRight;
}
@-webkit-keyframes rotateRight {
0% {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateY(0deg) translate3d(0px);
transform: perspective(800px) rotateY(0deg) translate3d(0px);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: perspective(800px) rotateY(180deg) translateZ(150px);
transform: perspective(800px) rotateY(180deg) translateZ(150px);
}
}
@keyframes rotateRight {
0% {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateY(0deg) translate3d(0px);
transform: perspective(800px) rotateY(0deg) translate3d(0px);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: perspective(800px) rotateY(180deg) translateZ(150px);
transform: perspective(800px) rotateY(180deg) translateZ(150px);
}
}
================================================
FILE: assets/scss/rotate/_rotateUp.scss
================================================
.rotateUp {
-webkit-animation-name: rotateUp;
animation-name: rotateUp;
}
@-webkit-keyframes rotateUp {
0% {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
transform: perspective(800px) rotateX(0deg) translateZ(0px);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: perspective(800px) rotateX(180deg) translateZ(100px);
transform: perspective(800px) rotateX(180deg) translateZ(100px);
}
}
@keyframes rotateUp {
0% {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
transform: perspective(800px) rotateX(0deg) translateZ(0px);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: perspective(800px) rotateX(180deg) translateZ(100px);
transform: perspective(800px) rotateX(180deg) translateZ(100px);
}
}
================================================
FILE: assets/scss/slide/_slideDown.scss
================================================
.slideDown {
-webkit-animation-name: slideDown;
animation-name: slideDown;
}
@-webkit-keyframes slideDown {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}
@keyframes slideDown {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}
================================================
FILE: assets/scss/slide/_slideDownReturn.scss
================================================
.slideDownReturn {
-webkit-animation-name: slideDownReturn;
animation-name: slideDownReturn;
}
@-webkit-keyframes slideDownReturn {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
}
@keyframes slideDownReturn {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
}
================================================
FILE: assets/scss/slide/_slideLeft.scss
================================================
.slideLeft {
-webkit-animation-name: slideLeft;
animation-name: slideLeft;
}
@-webkit-keyframes slideLeft {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@keyframes slideLeft {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
================================================
FILE: assets/scss/slide/_slideLeftReturn.scss
================================================
.slideLeftReturn {
-webkit-animation-name: slideLeftReturn;
animation-name: slideLeftReturn;
}
@-webkit-keyframes slideLeftReturn {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
@keyframes slideLeftReturn {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
================================================
FILE: assets/scss/slide/_slideRight.scss
================================================
.slideRight {
-webkit-animation-name: slideRight;
animation-name: slideRight;
}
@-webkit-keyframes slideRight {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@keyframes slideRight {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
================================================
FILE: assets/scss/slide/_slideRightReturn.scss
================================================
.slideRightReturn {
-webkit-animation-name: slideRightReturn;
animation-name: slideRightReturn;
}
@-webkit-keyframes slideRightReturn {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
@keyframes slideRightReturn {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
================================================
FILE: assets/scss/slide/_slideUp.scss
================================================
.slideUp {
-webkit-animation-name: slideUp;
animation-name: slideUp;
}
@-webkit-keyframes slideUp {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@keyframes slideUp {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
================================================
FILE: assets/scss/slide/_slideUpReturn.scss
================================================
.slideUpReturn {
-webkit-animation-name: slideUpReturn;
animation-name: slideUpReturn;
}
@-webkit-keyframes slideUpReturn {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
}
@keyframes slideUpReturn {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
}
================================================
FILE: assets/scss/static_effects/_openDownLeft.scss
================================================
.openDownLeft {
-webkit-animation-name: openDownLeft;
animation-name: openDownLeft;
}
@-webkit-keyframes openDownLeft {
0% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-110deg);
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
@keyframes openDownLeft {
0% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-110deg);
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
================================================
FILE: assets/scss/static_effects/_openDownLeftReturn.scss
================================================
.openDownLeftReturn {
-webkit-animation-name: openDownLeftReturn;
animation-name: openDownLeftReturn;
}
@-webkit-keyframes openDownLeftReturn {
0% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-110deg);
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes openDownLeftReturn {
0% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-110deg);
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
================================================
FILE: assets/scss/static_effects/_openDownRight.scss
================================================
.openDownRight {
-webkit-animation-name: openDownRight;
animation-name: openDownRight;
}
@-webkit-keyframes openDownRight {
0% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: rotate(110deg);
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
@keyframes openDownRight {
0% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: rotate(110deg);
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
================================================
FILE: assets/scss/static_effects/_openDownRightReturn.scss
================================================
.openDownRightReturn {
-webkit-animation-name: openDownRightReturn;
animation-name: openDownRightReturn;
}
@-webkit-keyframes openDownRightReturn {
0% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: rotate(110deg);
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes openDownRightReturn {
0% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: rotate(110deg);
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
================================================
FILE: assets/scss/static_effects/_openUpLeft.scss
================================================
.openUpLeft {
-webkit-animation-name: openUpLeft;
animation-name: openUpLeft;
}
@-webkit-keyframes openUpLeft {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(110deg);
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
@keyframes openUpLeft {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(110deg);
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
================================================
FILE: assets/scss/static_effects/_openUpLeftReturn.scss
================================================
.openUpLeftReturn {
-webkit-animation-name: openUpLeftReturn;
animation-name: openUpLeftReturn;
}
@-webkit-keyframes openUpLeftReturn {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(110deg);
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes openUpLeftReturn {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(110deg);
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
================================================
FILE: assets/scss/static_effects/_openUpRight.scss
================================================
.openUpRight {
-webkit-animation-name: openUpRight;
animation-name: openUpRight;
}
@-webkit-keyframes openUpRight {
0% {
-webkit-transform-origin: top right;
transform-origin: top right;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform-origin: top right;
transform-origin: top right;
-webkit-transform: rotate(-110deg);
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
@keyframes openUpRight {
0% {
-webkit-transform-origin: top right;
transform-origin: top right;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform-origin: top right;
transform-origin: top right;
-webkit-transform: rotate(-110deg);
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
================================================
FILE: assets/scss/static_effects/_openUpRightReturn.scss
================================================
.openUpRightReturn {
-webkit-animation-name: openUpRightReturn;
animation-name: openUpRightReturn;
}
@-webkit-keyframes openUpRightReturn {
0% {
-webkit-transform-origin: top right;
transform-origin: top right;
-webkit-transform: rotate(-110deg);
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
-webkit-transform-origin: top right;
transform-origin: top right;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes openUpRightReturn {
0% {
-webkit-transform-origin: top right;
transform-origin: top right;
-webkit-transform: rotate(-110deg);
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
-webkit-transform-origin: top right;
transform-origin: top right;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
================================================
FILE: assets/scss/static_effects_out/_openDownLeftOut.scss
================================================
.openDownLeftOut {
-webkit-animation-name: openDownLeftOut;
animation-name: openDownLeftOut;
}
@-webkit-keyframes openDownLeftOut {
0% {
opacity: 1;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
opacity: 0;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-110deg);
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
@keyframes openDownLeftOut {
0% {
opacity: 1;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
opacity: 0;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-110deg);
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
================================================
FILE: assets/scss/static_effects_out/_openDownRightOut.scss
================================================
.openDownRightOut {
-webkit-animation-name: openDownRightOut;
animation-name: openDownRightOut;
}
@-webkit-keyframes openDownRightOut {
0% {
opacity: 1;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
opacity: 0;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: rotate(110deg);
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
@keyframes openDownRightOut {
0% {
opacity: 1;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
opacity: 0;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: rotate(110deg);
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
================================================
FILE: assets/scss/static_effects_out/_openUpLeftOut.scss
================================================
.openUpLeftOut {
-webkit-animation-name: openUpLeftOut;
animation-name: openUpLeftOut;
}
@-webkit-keyframes openUpLeftOut {
0% {
opacity: 1;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
opacity: 0;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(110deg);
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
@keyframes openUpLeftOut {
0% {
opacity: 1;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
opacity: 0;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(110deg);
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
================================================
FILE: assets/scss/static_effects_out/_openUpRightOut.scss
================================================
.openUpRightOut {
-webkit-animation-name: openUpRightOut;
animation-name: openUpRightOut;
}
@-webkit-keyframes openUpRightOut {
0% {
opacity: 1;
-webkit-transform-origin: top right;
transform-origin: top right;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
opacity: 0;
-webkit-transform-origin: top right;
transform-origin: top right;
-webkit-transform: rotate(-110deg);
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
@keyframes openUpRightOut {
0% {
opacity: 1;
-webkit-transform-origin: top right;
transform-origin: top right;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
opacity: 0;
-webkit-transform-origin: top right;
transform-origin: top right;
-webkit-transform: rotate(-110deg);
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
================================================
FILE: assets/scss/tin/_tinDownIn.scss
================================================
.tinDownIn {
-webkit-animation-name: tinDownIn;
animation-name: tinDownIn;
}
@-webkit-keyframes tinDownIn {
0% {
opacity: 0;
-webkit-transform: scale(1, 1) translateY(900%);
transform: scale(1, 1) translateY(900%);
}
50%,
70%,
90% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateY(0);
transform: scale(1.1, 1.1) translateY(0);
}
60%,
80%,
100% {
opacity: 1;
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0);
}
}
@keyframes tinDownIn {
0% {
opacity: 0;
-webkit-transform: scale(1, 1) translateY(900%);
transform: scale(1, 1) translateY(900%);
}
50%,
70%,
90% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateY(0);
transform: scale(1.1, 1.1) translateY(0);
}
60%,
80%,
100% {
opacity: 1;
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0);
}
}
================================================
FILE: assets/scss/tin/_tinDownOut.scss
================================================
.tinDownOut {
-webkit-animation-name: tinDownOut;
animation-name: tinDownOut;
}
@-webkit-keyframes tinDownOut {
0%,
20%,
40%,
50% {
opacity: 1;
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0);
}
10%,
30% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateY(0);
transform: scale(1.1, 1.1) translateY(0);
}
100% {
opacity: 0;
-webkit-transform: scale(1, 1) translateY(900%);
transform: scale(1, 1) translateY(900%);
}
}
@keyframes tinDownOut {
0%,
20%,
40%,
50% {
opacity: 1;
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0);
}
10%,
30% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateY(0);
transform: scale(1.1, 1.1) translateY(0);
}
100% {
opacity: 0;
-webkit-transform: scale(1, 1) translateY(900%);
transform: scale(1, 1) translateY(900%);
}
}
================================================
FILE: assets/scss/tin/_tinLeftIn.scss
================================================
.tinLeftIn {
-webkit-animation-name: tinLeftIn;
animation-name: tinLeftIn;
}
@-webkit-keyframes tinLeftIn {
0% {
opacity: 0;
-webkit-transform: scale(1, 1) translateX(-900%);
transform: scale(1, 1) translateX(-900%);
}
50%,
70%,
90% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateX(0);
transform: scale(1.1, 1.1) translateX(0);
}
60%,
80%,
100% {
opacity: 1;
-webkit-transform: scale(1, 1) translateX(0);
transform: scale(1, 1) translateX(0);
}
}
@keyframes tinLeftIn {
0% {
opacity: 0;
-webkit-transform: scale(1, 1) translateX(-900%);
transform: scale(1, 1) translateX(-900%);
}
50%,
70%,
90% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateX(0);
transform: scale(1.1, 1.1) translateX(0);
}
60%,
80%,
100% {
opacity: 1;
-webkit-transform: scale(1, 1) translateX(0);
transform: scale(1, 1) translateX(0);
}
}
================================================
FILE: assets/scss/tin/_tinLeftOut.scss
================================================
.tinLeftOut {
-webkit-animation-name: tinLeftOut;
animation-name: tinLeftOut;
}
@-webkit-keyframes tinLeftOut {
0%,
20%,
40%,
50% {
opacity: 1;
-webkit-transform: scale(1, 1) translateX(0);
transform: scale(1, 1) translateX(0);
}
10%,
30% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateX(0);
transform: scale(1.1, 1.1) translateX(0);
}
100% {
opacity: 0;
-webkit-transform: scale(1, 1) translateX(-900%);
transform: scale(1, 1) translateX(-900%);
}
}
@keyframes tinLeftOut {
0%,
20%,
40%,
50% {
opacity: 1;
-webkit-transform: scale(1, 1) translateX(0);
transform: scale(1, 1) translateX(0);
}
10%,
30% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateX(0);
transform: scale(1.1, 1.1) translateX(0);
}
100% {
opacity: 0;
-webkit-transform: scale(1, 1) translateX(-900%);
transform: scale(1, 1) translateX(-900%);
}
}
================================================
FILE: assets/scss/tin/_tinRightIn.scss
================================================
.tinRightIn {
-webkit-animation-name: tinRightIn;
animation-name: tinRightIn;
}
@-webkit-keyframes tinRightIn {
0% {
opacity: 0;
-webkit-transform: scale(1, 1) translateX(900%);
transform: scale(1, 1) translateX(900%);
}
50%,
70%,
90% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateX(0);
transform: scale(1.1, 1.1) translateX(0);
}
60%,
80%,
100% {
opacity: 1;
-webkit-transform: scale(1, 1) translateX(0);
transform: scale(1, 1) translateX(0);
}
}
@keyframes tinRightIn {
0% {
opacity: 0;
-webkit-transform: scale(1, 1) translateX(900%);
transform: scale(1, 1) translateX(900%);
}
50%,
70%,
90% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateX(0);
transform: scale(1.1, 1.1) translateX(0);
}
60%,
80%,
100% {
opacity: 1;
-webkit-transform: scale(1, 1) translateX(0);
transform: scale(1, 1) translateX(0);
}
}
================================================
FILE: assets/scss/tin/_tinRightOut.scss
================================================
.tinRightOut {
-webkit-animation-name: tinRightOut;
animation-name: tinRightOut;
}
@-webkit-keyframes tinRightOut {
0%,
20%,
40%,
50% {
opacity: 1;
-webkit-transform: scale(1, 1) translateX(0);
transform: scale(1, 1) translateX(0);
}
10%,
30% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateX(0);
transform: scale(1.1, 1.1) translateX(0);
}
100% {
opacity: 0;
-webkit-transform: scale(1, 1) translateX(900%);
transform: scale(1, 1) translateX(900%);
}
}
@keyframes tinRightOut {
0%,
20%,
40%,
50% {
opacity: 1;
-webkit-transform: scale(1, 1) translateX(0);
transform: scale(1, 1) translateX(0);
}
10%,
30% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateX(0);
transform: scale(1.1, 1.1) translateX(0);
}
100% {
opacity: 0;
-webkit-transform: scale(1, 1) translateX(900%);
transform: scale(1, 1) translateX(900%);
}
}
================================================
FILE: assets/scss/tin/_tinUpIn.scss
================================================
.tinUpIn {
-webkit-animation-name: tinUpIn;
animation-name: tinUpIn;
}
@-webkit-keyframes tinUpIn {
0% {
opacity: 0;
-webkit-transform: scale(1, 1) translateY(-900%);
transform: scale(1, 1) translateY(-900%);
}
50%,
70%,
90% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateY(0);
transform: scale(1.1, 1.1) translateY(0);
}
60%,
80%,
100% {
opacity: 1;
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0);
}
}
@keyframes tinUpIn {
0% {
opacity: 0;
-webkit-transform: scale(1, 1) translateY(-900%);
transform: scale(1, 1) translateY(-900%);
}
50%,
70%,
90% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateY(0);
transform: scale(1.1, 1.1) translateY(0);
}
60%,
80%,
100% {
opacity: 1;
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0);
}
}
================================================
FILE: assets/scss/tin/_tinUpOut.scss
================================================
.tinUpOut {
-webkit-animation-name: tinUpOut;
animation-name: tinUpOut;
}
@-webkit-keyframes tinUpOut {
0%,
20%,
40%,
50% {
opacity: 1;
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0);
}
10%,
30% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateY(0);
transform: scale(1.1, 1.1) translateY(0);
}
100% {
opacity: 0;
-webkit-transform: scale(1, 1) translateY(-900%);
transform: scale(1, 1) translateY(-900%);
}
}
@keyframes tinUpOut {
0%,
20%,
40%,
50% {
opacity: 1;
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0);
}
10%,
30% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateY(0);
transform: scale(1.1, 1.1) translateY(0);
}
100% {
opacity: 0;
-webkit-transform: scale(1, 1) translateY(-900%);
transform: scale(1, 1) translateY(-900%);
}
}
================================================
FILE: dist/magic.css
================================================
/*!
* Magic - https://www.minimamente.com
* Licensed under the MIT license - https://opensource.org/licenses/MIT
* Copyright (c) 2022 Christian Pucci
*/
.puffIn {
-webkit-animation-name: puffIn;
animation-name: puffIn;
}
@-webkit-keyframes puffIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2, 2);
filter: blur(2px);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
filter: blur(0px);
}
}
@keyframes puffIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2, 2);
filter: blur(2px);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
filter: blur(0px);
}
}
.puffOut {
-webkit-animation-name: puffOut;
animation-name: puffOut;
}
@-webkit-keyframes puffOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
filter: blur(0px);
}
100% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2, 2);
filter: blur(2px);
}
}
@keyframes puffOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
filter: blur(0px);
}
100% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2, 2);
filter: blur(2px);
}
}
.vanishIn {
-webkit-animation-name: vanishIn;
animation-name: vanishIn;
}
@-webkit-keyframes vanishIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2, 2);
filter: blur(90px);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
filter: blur(0px);
}
}
@keyframes vanishIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2, 2);
filter: blur(90px);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
filter: blur(0px);
}
}
.vanishOut {
-webkit-animation-name: vanishOut;
animation-name: vanishOut;
}
@-webkit-keyframes vanishOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
filter: blur(0px);
}
100% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2, 2);
filter: blur(20px);
}
}
@keyframes vanishOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
filter: blur(0px);
}
100% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2, 2);
filter: blur(20px);
}
}
.boingInUp {
-webkit-animation-name: boingInUp;
animation-name: boingInUp;
}
@-webkit-keyframes boingInUp {
0% {
opacity: 0;
transform-origin: 50% 0%;
transform: perspective(800px) rotateX(-90deg);
}
50% {
opacity: 1;
transform-origin: 50% 0%;
transform: perspective(800px) rotateX(50deg);
}
100% {
opacity: 1;
transform-origin: 50% 0%;
transform: perspective(800px) rotateX(0deg);
}
}
@keyframes boingInUp {
0% {
opacity: 0;
transform-origin: 50% 0%;
transform: perspective(800px) rotateX(-90deg);
}
50% {
opacity: 1;
transform-origin: 50% 0%;
transform: perspective(800px) rotateX(50deg);
}
100% {
opacity: 1;
transform-origin: 50% 0%;
transform: perspective(800px) rotateX(0deg);
}
}
.boingOutDown {
-webkit-animation-name: boingOutDown;
animation-name: boingOutDown;
}
@-webkit-keyframes boingOutDown {
0% {
opacity: 1;
transform-origin: 100% 100%;
transform: perspective(800px) rotateX(0deg) rotateY(0deg);
}
20% {
opacity: 1;
transform-origin: 100% 100%;
transform: perspective(800px) rotateX(0deg) rotateY(10deg);
}
30% {
opacity: 1;
transform-origin: 0% 100%;
transform: perspective(800px) rotateX(0deg) rotateY(0deg);
}
40% {
opacity: 1;
transform-origin: 0% 100%;
transform: perspective(800px) rotateX(10deg) rotateY(10deg);
}
100% {
opacity: 0;
transform-origin: 100% 100%;
transform: perspective(800px) rotateX(90deg) rotateY(0deg);
}
}
@keyframes boingOutDown {
0% {
opacity: 1;
transform-origin: 100% 100%;
transform: perspective(800px) rotateX(0deg) rotateY(0deg);
}
20% {
opacity: 1;
transform-origin: 100% 100%;
transform: perspective(800px) rotateX(0deg) rotateY(10deg);
}
30% {
opacity: 1;
transform-origin: 0% 100%;
transform: perspective(800px) rotateX(0deg) rotateY(0deg);
}
40% {
opacity: 1;
transform-origin: 0% 100%;
transform: perspective(800px) rotateX(10deg) rotateY(10deg);
}
100% {
opacity: 0;
transform-origin: 100% 100%;
transform: perspective(800px) rotateX(90deg) rotateY(0deg);
}
}
.bombLeftOut {
-webkit-animation-name: bombLeftOut;
animation-name: bombLeftOut;
}
@-webkit-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);
}
}
@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);
}
}
.bombRightOut {
-webkit-animation-name: bombRightOut;
animation-name: bombRightOut;
}
@-webkit-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);
}
}
@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);
}
}
.magic {
-webkit-animation-name: magic;
animation-name: magic;
}
@-webkit-keyframes magic {
0% {
opacity: 1;
transform-origin: 100% 200%;
transform: scale(1, 1) rotate(0deg);
}
100% {
opacity: 0;
transform-origin: 200% 500%;
transform: scale(0, 0) rotate(270deg);
}
}
@keyframes magic {
0% {
opacity: 1;
transform-origin: 100% 200%;
transform: scale(1, 1) rotate(0deg);
}
100% {
opacity: 0;
transform-origin: 200% 500%;
transform: scale(0, 0) rotate(270deg);
}
}
.swap {
-webkit-animation-name: swap;
animation-name: swap;
}
@-webkit-keyframes swap {
0% {
opacity: 0;
transform-origin: 0 100%;
transform: scale(0, 0) translate(-700px, 0px);
}
100% {
opacity: 1;
transform-origin: 100% 100%;
transform: scale(1, 1) translate(0px, 0px);
}
}
@keyframes swap {
0% {
opacity: 0;
transform-origin: 0 100%;
transform: scale(0, 0) translate(-700px, 0px);
}
100% {
opacity: 1;
transform-origin: 100% 100%;
transform: scale(1, 1) translate(0px, 0px);
}
}
.twisterInDown {
-webkit-animation-name: twisterInDown;
animation-name: twisterInDown;
}
@-webkit-keyframes twisterInDown {
0% {
opacity: 0;
transform-origin: 0 100%;
transform: scale(0, 0) rotate(360deg) translateY(-100%);
}
30% {
transform-origin: 0 100%;
transform: scale(0, 0) rotate(360deg) translateY(-100%);
}
100% {
opacity: 1;
transform-origin: 100% 100%;
transform: scale(1, 1) rotate(0deg) translateY(0%);
}
}
@keyframes twisterInDown {
0% {
opacity: 0;
transform-origin: 0 100%;
transform: scale(0, 0) rotate(360deg) translateY(-100%);
}
30% {
transform-origin: 0 100%;
transform: scale(0, 0) rotate(360deg) translateY(-100%);
}
100% {
opacity: 1;
transform-origin: 100% 100%;
transform: scale(1, 1) rotate(0deg) translateY(0%);
}
}
.twisterInUp {
-webkit-animation-name: twisterInUp;
animation-name: twisterInUp;
}
@-webkit-keyframes twisterInUp {
0% {
opacity: 0;
transform-origin: 100% 0;
transform: scale(0, 0) rotate(360deg) translateY(100%);
}
30% {
transform-origin: 100% 0;
transform: scale(0, 0) rotate(360deg) translateY(100%);
}
100% {
opacity: 1;
transform-origin: 0 0;
transform: scale(1, 1) rotate(0deg) translateY(0);
}
}
@keyframes twisterInUp {
0% {
opacity: 0;
transform-origin: 100% 0;
transform: scale(0, 0) rotate(360deg) translateY(100%);
}
30% {
transform-origin: 100% 0;
transform: scale(0, 0) rotate(360deg) translateY(100%);
}
100% {
opacity: 1;
transform-origin: 0 0;
transform: scale(1, 1) rotate(0deg) translateY(0);
}
}
.foolishIn {
-webkit-animation-name: foolishIn;
animation-name: foolishIn;
}
@-webkit-keyframes foolishIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(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: 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, 1) rotate(0deg);
}
}
@keyframes foolishIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(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: 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, 1) rotate(0deg);
}
}
.foolishOut {
-webkit-animation-name: foolishOut;
animation-name: foolishOut;
}
@-webkit-keyframes foolishOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1) 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: 0%;
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) rotate(0deg);
}
}
@keyframes foolishOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1) 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: 0%;
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) rotate(0deg);
}
}
.holeOut {
-webkit-animation-name: holeOut;
animation-name: holeOut;
}
@-webkit-keyframes holeOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1) rotateY(0deg);
}
100% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0, 0) rotateY(180deg);
}
}
@keyframes holeOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1) rotateY(0deg);
}
100% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0, 0) rotateY(180deg);
}
}
.swashIn {
-webkit-animation-name: swashIn;
animation-name: swashIn;
}
@-webkit-keyframes swashIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0, 0);
}
90% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(0.9, 0.9);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
}
}
@keyframes swashIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0, 0);
}
90% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(0.9, 0.9);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
}
}
.swashOut {
-webkit-animation-name: swashOut;
animation-name: swashOut;
}
@-webkit-keyframes swashOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
}
80% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(0.9, 0.9);
}
100% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0, 0);
}
}
@keyframes swashOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
}
80% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(0.9, 0.9);
}
100% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0, 0);
}
}
.spaceInDown {
-webkit-animation-name: spaceInDown;
animation-name: spaceInDown;
}
@-webkit-keyframes spaceInDown {
0% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0.2) translate(0%, 200%);
}
100% {
opacity: 1;
transform-origin: 50% 100%;
transform: scale(1) translate(0%, 0%);
}
}
@keyframes spaceInDown {
0% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0.2) translate(0%, 200%);
}
100% {
opacity: 1;
transform-origin: 50% 100%;
transform: scale(1) translate(0%, 0%);
}
}
.spaceInLeft {
-webkit-animation-name: spaceInLeft;
animation-name: spaceInLeft;
}
@-webkit-keyframes spaceInLeft {
0% {
opacity: 0;
transform-origin: 0% 50%;
transform: scale(0.2) translate(-200%, 0%);
}
100% {
opacity: 1;
transform-origin: 0% 50%;
transform: scale(1) translate(0%, 0%);
}
}
@keyframes spaceInLeft {
0% {
opacity: 0;
transform-origin: 0% 50%;
transform: scale(0.2) translate(-200%, 0%);
}
100% {
opacity: 1;
transform-origin: 0% 50%;
transform: scale(1) translate(0%, 0%);
}
}
.spaceInRight {
-webkit-animation-name: spaceInRight;
animation-name: spaceInRight;
}
@-webkit-keyframes spaceInRight {
0% {
opacity: 0;
transform-origin: 100% 50%;
transform: scale(0.2) translate(200%, 0%);
}
100% {
opacity: 1;
transform-origin: 100% 50%;
transform: scale(1) translate(0%, 0%);
}
}
@keyframes spaceInRight {
0% {
opacity: 0;
transform-origin: 100% 50%;
transform: scale(0.2) translate(200%, 0%);
}
100% {
opacity: 1;
transform-origin: 100% 50%;
transform: scale(1) translate(0%, 0%);
}
}
.spaceInUp {
-webkit-animation-name: spaceInUp;
animation-name: spaceInUp;
}
@-webkit-keyframes spaceInUp {
0% {
opacity: 0;
transform-origin: 50% 0%;
transform: scale(0.2) translate(0%, -200%);
}
100% {
opacity: 1;
transform-origin: 50% 0%;
transform: scale(1) translate(0%, 0%);
}
}
@keyframes spaceInUp {
0% {
opacity: 0;
transform-origin: 50% 0%;
transform: scale(0.2) translate(0%, -200%);
}
100% {
opacity: 1;
transform-origin: 50% 0%;
transform: scale(1) translate(0%, 0%);
}
}
.spaceOutDown {
-webkit-animation-name: spaceOutDown;
animation-name: spaceOutDown;
}
@-webkit-keyframes spaceOutDown {
0% {
opacity: 1;
transform-origin: 50% 100%;
transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0.2) translate(0%, 200%);
}
}
@keyframes spaceOutDown {
0% {
opacity: 1;
transform-origin: 50% 100%;
transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0.2) translate(0%, 200%);
}
}
.spaceOutLeft {
-webkit-animation-name: spaceOutLeft;
animation-name: spaceOutLeft;
}
@-webkit-keyframes spaceOutLeft {
0% {
opacity: 1;
transform-origin: 0% 50%;
transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
transform-origin: 0% 50%;
transform: scale(0.2) translate(-200%, 0%);
}
}
@keyframes spaceOutLeft {
0% {
opacity: 1;
transform-origin: 0% 50%;
transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
transform-origin: 0% 50%;
transform: scale(0.2) translate(-200%, 0%);
}
}
.spaceOutRight {
-webkit-animation-name: spaceOutRight;
animation-name: spaceOutRight;
}
@-webkit-keyframes spaceOutRight {
0% {
opacity: 1;
transform-origin: 100% 50%;
transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
transform-origin: 100% 50%;
transform: scale(0.2) translate(200%, 0%);
}
}
@keyframes spaceOutRight {
0% {
opacity: 1;
transform-origin: 100% 50%;
transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
transform-origin: 100% 50%;
transform: scale(0.2) translate(200%, 0%);
}
}
.spaceOutUp {
-webkit-animation-name: spaceOutUp;
animation-name: spaceOutUp;
}
@-webkit-keyframes spaceOutUp {
0% {
opacity: 1;
transform-origin: 50% 0%;
transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
transform-origin: 50% 0%;
transform: scale(0.2) translate(0%, -200%);
}
}
@keyframes spaceOutUp {
0% {
opacity: 1;
transform-origin: 50% 0%;
transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
transform-origin: 50% 0%;
transform: scale(0.2) translate(0%, -200%);
}
}
.perspectiveDown {
-webkit-animation-name: perspectiveDown;
animation-name: perspectiveDown;
}
@-webkit-keyframes perspectiveDown {
0% {
transform-origin: 0 100%;
transform: perspective(800px) rotateX(0deg);
}
100% {
transform-origin: 0 100%;
transform: perspective(800px) rotateX(-180deg);
}
}
@keyframes perspectiveDown {
0% {
transform-origin: 0 100%;
transform: perspective(800px) rotateX(0deg);
}
100% {
transform-origin: 0 100%;
transform: perspective(800px) rotateX(-180deg);
}
}
.perspectiveDownReturn {
-webkit-animation-name: perspectiveDownReturn;
animation-name: perspectiveDownReturn;
}
@-webkit-keyframes perspectiveDownReturn {
0% {
transform-origin: 0 100%;
transform: perspective(800px) rotateX(-180deg);
}
100% {
transform-origin: 0 100%;
transform: perspective(800px) rotateX(0deg);
}
}
@keyframes perspectiveDownReturn {
0% {
transform-origin: 0 100%;
transform: perspective(800px) rotateX(-180deg);
}
100% {
transform-origin: 0 100%;
transform: perspective(800px) rotateX(0deg);
}
}
.perspectiveLeft {
-webkit-animation-name: perspectiveLeft;
animation-name: perspectiveLeft;
}
@-webkit-keyframes perspectiveLeft {
0% {
transform-origin: 0 0;
transform: perspective(800px) rotateY(0deg);
}
100% {
transform-origin: 0 0;
transform: perspective(800px) rotateY(-180deg);
}
}
@keyframes perspectiveLeft {
0% {
transform-origin: 0 0;
transform: perspective(800px) rotateY(0deg);
}
100% {
transform-origin: 0 0;
transform: perspective(800px) rotateY(-180deg);
}
}
.perspectiveLeftReturn {
-webkit-animation-name: perspectiveLeftReturn;
animation-name: perspectiveLeftReturn;
}
@-webkit-keyframes perspectiveLeftReturn {
0% {
transform-origin: 0 0;
transform: perspective(800px) rotateY(-180deg);
}
100% {
transform-origin: 0 0;
transform: perspective(800px) rotateY(0deg);
}
}
@keyframes perspectiveLeftReturn {
0% {
transform-origin: 0 0;
transform: perspective(800px) rotateY(-180deg);
}
100% {
transform-origin: 0 0;
transform: perspective(800px) rotateY(0deg);
}
}
.perspectiveRight {
-webkit-animation-name: perspectiveRight;
animation-name: perspectiveRight;
}
@-webkit-keyframes perspectiveRight {
0% {
transform-origin: 100% 0;
transform: perspective(800px) rotateY(0deg);
}
100% {
transform-origin: 100% 0;
transform: perspective(800px) rotateY(180deg);
}
}
@keyframes perspectiveRight {
0% {
transform-origin: 100% 0;
transform: perspective(800px) rotateY(0deg);
}
100% {
transform-origin: 100% 0;
transform: perspective(800px) rotateY(180deg);
}
}
.perspectiveRightReturn {
-webkit-animation-name: perspectiveRightReturn;
animation-name: perspectiveRightReturn;
}
@-webkit-keyframes perspectiveRightReturn {
0% {
transform-origin: 100% 0;
transform: perspective(800px) rotateY(180deg);
}
100% {
transform-origin: 100% 0;
transform: perspective(800px) rotateY(0deg);
}
}
@keyframes perspectiveRightReturn {
0% {
transform-origin: 100% 0;
transform: perspective(800px) rotateY(180deg);
}
100% {
transform-origin: 100% 0;
transform: perspective(800px) rotateY(0deg);
}
}
.perspectiveUp {
-webkit-animation-name: perspectiveUp;
animation-name: perspectiveUp;
}
@-webkit-keyframes perspectiveUp {
0% {
transform-origin: 0 0;
transform: perspective(800px) rotateX(0deg);
}
100% {
transform-origin: 0 0;
transform: perspective(800px) rotateX(180deg);
}
}
@keyframes perspectiveUp {
0% {
transform-origin: 0 0;
transform: perspective(800px) rotateX(0deg);
}
100% {
transform-origin: 0 0;
transform: perspective(800px) rotateX(180deg);
}
}
.perspectiveUpReturn {
-webkit-animation-name: perspectiveUpReturn;
animation-name: perspectiveUpReturn;
}
@-webkit-keyframes perspectiveUpReturn {
0% {
transform-origin: 0 0;
transform: perspective(800px) rotateX(180deg);
}
100% {
transform-origin: 0 0;
transform: perspective(800px) rotateX(0deg);
}
}
@keyframes perspectiveUpReturn {
0% {
transform-origin: 0 0;
transform: perspective(800px) rotateX(180deg);
}
100% {
transform-origin: 0 0;
transform: perspective(800px) rotateX(0deg);
}
}
.rotateDown {
-webkit-animation-name: rotateDown;
animation-name: rotateDown;
}
@-webkit-keyframes rotateDown {
0% {
opacity: 1;
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);
}
}
@keyframes rotateDown {
0% {
opacity: 1;
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);
}
}
.rotateLeft {
-webkit-animation-name: rotateLeft;
animation-name: rotateLeft;
}
@-webkit-keyframes rotateLeft {
0% {
opacity: 1;
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);
}
}
@keyframes rotateLeft {
0% {
opacity: 1;
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);
}
}
.rotateRight {
-webkit-animation-name: rotateRight;
animation-name: rotateRight;
}
@-webkit-keyframes rotateRight {
0% {
opacity: 1;
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);
}
}
@keyframes rotateRight {
0% {
opacity: 1;
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);
}
}
.rotateUp {
-webkit-animation-name: rotateUp;
animation-name: rotateUp;
}
@-webkit-keyframes rotateUp {
0% {
opacity: 1;
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);
}
}
@keyframes rotateUp {
0% {
opacity: 1;
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);
}
}
.slideDown {
-webkit-animation-name: slideDown;
animation-name: slideDown;
}
@-webkit-keyframes slideDown {
0% {
transform-origin: 0 0;
transform: translateY(0%);
}
100% {
transform-origin: 0 0;
transform: translateY(100%);
}
}
@keyframes slideDown {
0% {
transform-origin: 0 0;
transform: translateY(0%);
}
100% {
transform-origin: 0 0;
transform: translateY(100%);
}
}
.slideDownReturn {
-webkit-animation-name: slideDownReturn;
animation-name: slideDownReturn;
}
@-webkit-keyframes slideDownReturn {
0% {
transform-origin: 0 0;
transform: translateY(100%);
}
100% {
transform-origin: 0 0;
transform: translateY(0%);
}
}
@keyframes slideDownReturn {
0% {
transform-origin: 0 0;
transform: translateY(100%);
}
100% {
transform-origin: 0 0;
transform: translateY(0%);
}
}
.slideLeft {
-webkit-animation-name: slideLeft;
animation-name: slideLeft;
}
@-webkit-keyframes slideLeft {
0% {
transform-origin: 0 0;
transform: translateX(0%);
}
100% {
transform-origin: 0 0;
transform: translateX(-100%);
}
}
@keyframes slideLeft {
0% {
transform-origin: 0 0;
transform: translateX(0%);
}
100% {
transform-origin: 0 0;
transform: translateX(-100%);
}
}
.slideLeftReturn {
-webkit-animation-name: slideLeftReturn;
animation-name: slideLeftReturn;
}
@-webkit-keyframes slideLeftReturn {
0% {
transform-origin: 0 0;
transform: translateX(-100%);
}
100% {
transform-origin: 0 0;
transform: translateX(0%);
}
}
@keyframes slideLeftReturn {
0% {
transform-origin: 0 0;
transform: translateX(-100%);
}
100% {
transform-origin: 0 0;
transform: translateX(0%);
}
}
.slideRight {
-webkit-animation-name: slideRight;
animation-name: slideRight;
}
@-webkit-keyframes slideRight {
0% {
transform-origin: 0 0;
transform: translateX(0%);
}
100% {
transform-origin: 0 0;
transform: translateX(100%);
}
}
@keyframes slideRight {
0% {
transform-origin: 0 0;
transform: translateX(0%);
}
100% {
transform-origin: 0 0;
transform: translateX(100%);
}
}
.slideRightReturn {
-webkit-animation-name: slideRightReturn;
animation-name: slideRightReturn;
}
@-webkit-keyframes slideRightReturn {
0% {
transform-origin: 0 0;
transform: translateX(100%);
}
100% {
transform-origin: 0 0;
transform: translateX(0%);
}
}
@keyframes slideRightReturn {
0% {
transform-origin: 0 0;
transform: translateX(100%);
}
100% {
transform-origin: 0 0;
transform: translateX(0%);
}
}
.slideUp {
-webkit-animation-name: slideUp;
animation-name: slideUp;
}
@-webkit-keyframes slideUp {
0% {
transform-origin: 0 0;
transform: translateY(0%);
}
100% {
transform-origin: 0 0;
transform: translateY(-100%);
}
}
@keyframes slideUp {
0% {
transform-origin: 0 0;
transform: translateY(0%);
}
100% {
transform-origin: 0 0;
transform: translateY(-100%);
}
}
.slideUpReturn {
-webkit-animation-name: slideUpReturn;
animation-name: slideUpReturn;
}
@-webkit-keyframes slideUpReturn {
0% {
transform-origin: 0 0;
transform: translateY(-100%);
}
100% {
transform-origin: 0 0;
transform: translateY(0%);
}
}
@keyframes slideUpReturn {
0% {
transform-origin: 0 0;
transform: translateY(-100%);
}
100% {
transform-origin: 0 0;
transform: translateY(0%);
}
}
.openDownLeft {
-webkit-animation-name: openDownLeft;
animation-name: openDownLeft;
}
@-webkit-keyframes openDownLeft {
0% {
transform-origin: bottom left;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
transform-origin: bottom left;
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
@keyframes openDownLeft {
0% {
transform-origin: bottom left;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
transform-origin: bottom left;
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
.openDownLeftReturn {
-webkit-animation-name: openDownLeftReturn;
animation-name: openDownLeftReturn;
}
@-webkit-keyframes openDownLeftReturn {
0% {
transform-origin: bottom left;
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
transform-origin: bottom left;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes openDownLeftReturn {
0% {
transform-origin: bottom left;
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
transform-origin: bottom left;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
.openDownRight {
-webkit-animation-name: openDownRight;
animation-name: openDownRight;
}
@-webkit-keyframes openDownRight {
0% {
transform-origin: bottom right;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
transform-origin: bottom right;
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
@keyframes openDownRight {
0% {
transform-origin: bottom right;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
transform-origin: bottom right;
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
.openDownRightReturn {
-webkit-animation-name: openDownRightReturn;
animation-name: openDownRightReturn;
}
@-webkit-keyframes openDownRightReturn {
0% {
transform-origin: bottom right;
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
transform-origin: bottom right;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes openDownRightReturn {
0% {
transform-origin: bottom right;
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
transform-origin: bottom right;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
.openUpLeft {
-webkit-animation-name: openUpLeft;
animation-name: openUpLeft;
}
@-webkit-keyframes openUpLeft {
0% {
transform-origin: top left;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
transform-origin: top left;
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
@keyframes openUpLeft {
0% {
transform-origin: top left;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
transform-origin: top left;
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
.openUpLeftReturn {
-webkit-animation-name: openUpLeftReturn;
animation-name: openUpLeftReturn;
}
@-webkit-keyframes openUpLeftReturn {
0% {
transform-origin: top left;
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
transform-origin: top left;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes openUpLeftReturn {
0% {
transform-origin: top left;
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
transform-origin: top left;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
.openUpRight {
-webkit-animation-name: openUpRight;
animation-name: openUpRight;
}
@-webkit-keyframes openUpRight {
0% {
transform-origin: top right;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
transform-origin: top right;
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
@keyframes openUpRight {
0% {
transform-origin: top right;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
transform-origin: top right;
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
.openUpRightReturn {
-webkit-animation-name: openUpRightReturn;
animation-name: openUpRightReturn;
}
@-webkit-keyframes openUpRightReturn {
0% {
transform-origin: top right;
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
transform-origin: top right;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes openUpRightReturn {
0% {
transform-origin: top right;
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
transform-origin: top right;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
.openDownLeftOut {
-webkit-animation-name: openDownLeftOut;
animation-name: openDownLeftOut;
}
@-webkit-keyframes openDownLeftOut {
0% {
opacity: 1;
transform-origin: bottom left;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
opacity: 0;
transform-origin: bottom left;
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
@keyframes openDownLeftOut {
0% {
opacity: 1;
transform-origin: bottom left;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
opacity: 0;
transform-origin: bottom left;
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
.openDownRightOut {
-webkit-animation-name: openDownRightOut;
animation-name: openDownRightOut;
}
@-webkit-keyframes openDownRightOut {
0% {
opacity: 1;
transform-origin: bottom right;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
opacity: 0;
transform-origin: bottom right;
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
@keyframes openDownRightOut {
0% {
opacity: 1;
transform-origin: bottom right;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
opacity: 0;
transform-origin: bottom right;
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
.openUpLeftOut {
-webkit-animation-name: openUpLeftOut;
animation-name: openUpLeftOut;
}
@-webkit-keyframes openUpLeftOut {
0% {
opacity: 1;
transform-origin: top left;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
opacity: 0;
transform-origin: top left;
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
@keyframes openUpLeftOut {
0% {
opacity: 1;
transform-origin: top left;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
opacity: 0;
transform-origin: top left;
transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
.openUpRightOut {
-webkit-animation-name: openUpRightOut;
animation-name: openUpRightOut;
}
@-webkit-keyframes openUpRightOut {
0% {
opacity: 1;
transform-origin: top right;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
opacity: 0;
transform-origin: top right;
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
@keyframes openUpRightOut {
0% {
opacity: 1;
transform-origin: top right;
transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
opacity: 0;
transform-origin: top right;
transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
}
.tinDownIn {
-webkit-animation-name: tinDownIn;
animation-name: tinDownIn;
}
@-webkit-keyframes tinDownIn {
0% {
opacity: 0;
transform: scale(1, 1) translateY(900%);
}
50%, 70%, 90% {
opacity: 1;
transform: scale(1.1, 1.1) translateY(0);
}
60%, 80%, 100% {
opacity: 1;
transform: scale(1, 1) translateY(0);
}
}
@keyframes tinDownIn {
0% {
opacity: 0;
transform: scale(1, 1) translateY(900%);
}
50%, 70%, 90% {
opacity: 1;
transform: scale(1.1, 1.1) translateY(0);
}
60%, 80%, 100% {
opacity: 1;
transform: scale(1, 1) translateY(0);
}
}
.tinDownOut {
-webkit-animation-name: tinDownOut;
animation-name: tinDownOut;
}
@-webkit-keyframes tinDownOut {
0%, 20%, 40%, 50% {
opacity: 1;
transform: scale(1, 1) translateY(0);
}
10%, 30% {
opacity: 1;
transform: scale(1.1, 1.1) translateY(0);
}
100% {
opacity: 0;
transform: scale(1, 1) translateY(900%);
}
}
@keyframes tinDownOut {
0%, 20%, 40%, 50% {
opacity: 1;
transform: scale(1, 1) translateY(0);
}
10%, 30% {
opacity: 1;
transform: scale(1.1, 1.1) translateY(0);
}
100% {
opacity: 0;
transform: scale(1, 1) translateY(900%);
}
}
.tinLeftIn {
-webkit-animation-name: tinLeftIn;
animation-name: tinLeftIn;
}
@-webkit-keyframes tinLeftIn {
0% {
opacity: 0;
transform: scale(1, 1) translateX(-900%);
}
50%, 70%, 90% {
opacity: 1;
transform: scale(1.1, 1.1) translateX(0);
}
60%, 80%, 100% {
opacity: 1;
transform: scale(1, 1) translateX(0);
}
}
@keyframes tinLeftIn {
0% {
opacity: 0;
transform: scale(1, 1) translateX(-900%);
}
50%, 70%, 90% {
opacity: 1;
transform: scale(1.1, 1.1) translateX(0);
}
60%, 80%, 100% {
opacity: 1;
transform: scale(1, 1) translateX(0);
}
}
.tinLeftOut {
-webkit-animation-name: tinLeftOut;
animation-name: tinLeftOut;
}
@-webkit-keyframes tinLeftOut {
0%, 20%, 40%, 50% {
opacity: 1;
transform: scale(1, 1) translateX(0);
}
10%, 30% {
opacity: 1;
transform: scale(1.1, 1.1) translateX(0);
}
100% {
opacity: 0;
transform: scale(1, 1) translateX(-900%);
}
}
@keyframes tinLeftOut {
0%, 20%, 40%, 50% {
opacity: 1;
transform: scale(1, 1) translateX(0);
}
10%, 30% {
opacity: 1;
transform: scale(1.1, 1.1) translateX(0);
}
100% {
opacity: 0;
transform: scale(1, 1) translateX(-900%);
}
}
.tinRightIn {
-webkit-animation-name: tinRightIn;
animation-name: tinRightIn;
}
@-webkit-keyframes tinRightIn {
0% {
opacity: 0;
transform: scale(1, 1) translateX(900%);
}
50%, 70%, 90% {
opacity: 1;
transform: scale(1.1, 1.1) translateX(0);
}
60%, 80%, 100% {
opacity: 1;
transform: scale(1, 1) translateX(0);
}
}
@keyframes tinRightIn {
0% {
opacity: 0;
transform: scale(1, 1) translateX(900%);
}
50%, 70%, 90% {
opacity: 1;
transform: scale(1.1, 1.1) translateX(0);
}
60%, 80%, 100% {
opacity: 1;
transform: scale(1, 1) translateX(0);
}
}
.tinRightOut {
-webkit-animation-name: tinRightOut;
animation-name: tinRightOut;
}
@-webkit-keyframes tinRightOut {
0%, 20%, 40%, 50% {
opacity: 1;
transform: scale(1, 1) translateX(0);
}
10%, 30% {
opacity: 1;
transform: scale(1.1, 1.1) translateX(0);
}
100% {
opacity: 0;
transform: scale(1, 1) translateX(900%);
}
}
@keyframes tinRightOut {
0%, 20%, 40%, 50% {
opacity: 1;
transform: scale(1, 1) translateX(0);
}
10%, 30% {
opacity: 1;
transform: scale(1.1, 1.1) translateX(0);
}
100% {
opacity: 0;
transform: scale(1, 1) translateX(900%);
}
}
.tinUpIn {
-webkit-animation-name: tinUpIn;
animation-name: tinUpIn;
}
@-webkit-keyframes tinUpIn {
0% {
opacity: 0;
transform: scale(1, 1) translateY(-900%);
}
50%, 70%, 90% {
opacity: 1;
transform: scale(1.1, 1.1) translateY(0);
}
60%, 80%, 100% {
opacity: 1;
transform: scale(1, 1) translateY(0);
}
}
@keyframes tinUpIn {
0% {
opacity: 0;
transform: scale(1, 1) translateY(-900%);
}
50%, 70%, 90% {
opacity: 1;
transform: scale(1.1, 1.1) translateY(0);
}
60%, 80%, 100% {
opacity: 1;
transform: scale(1, 1) translateY(0);
}
}
.tinUpOut {
-webkit-animation-name: tinUpOut;
animation-name: tinUpOut;
}
@-webkit-keyframes tinUpOut {
0%, 20%, 40%, 50% {
opacity: 1;
transform: scale(1, 1) translateY(0);
}
10%, 30% {
opacity: 1;
transform: scale(1.1, 1.1) translateY(0);
}
100% {
opacity: 0;
transform: scale(1, 1) translateY(-900%);
}
}
@keyframes tinUpOut {
0%, 20%, 40%, 50% {
opacity: 1;
transform: scale(1, 1) translateY(0);
}
10%, 30% {
opacity: 1;
transform: scale(1.1, 1.1) translateY(0);
}
100% {
opacity: 0;
transform: scale(1, 1) translateY(-900%);
}
}
.magictime {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@media (print), (prefers-reduced-motion) {
.magictime {
-webkit-animation: unset !important;
animation: unset !important;
transition: none !important;
}
}
/*# sourceMappingURL=magic.css.map */
================================================
FILE: gulpfile.js
================================================
/**
* Gulp
*
* npm i --save-dev gulp sass gulp-sass postcss gulp-postcss autoprefixer gulp-rename cssnano gulp-cssnano
*
* @see https://gulpjs.com/
*/
const { src, dest, watch, parallel } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const rename = require('gulp-rename');
// Define project paths
let paths = {
styles: {
// grab all .scss files from that path
src: 'assets/scss/*.scss',
// destination path
dest: 'dist'
}
};
// SCSS
function style() {
return src(paths.styles.src, { sourcemaps: true })
.pipe(sass().on("error", sass.logError))
.pipe(postcss([ autoprefixer() ]))
.pipe(dest(paths.styles.dest, { sourcemaps: '.' }))
}
function styleMin() {
return src(paths.styles.src, { sourcemaps: true })
.pipe(sass().on("error", sass.logError))
.pipe(postcss([ autoprefixer(), cssnano() ]))
.pipe(rename({ extname: '.min.css' }))
.pipe(dest(paths.styles.dest, { sourcemaps: '.' }));
}
// Watchers
watch('assets/scss/*.scss', style);
// Yo baby!! ✌️
exports.default = parallel( style, styleMin );
================================================
FILE: package.json
================================================
{
"name": "magic.css",
"version": "1.4.8",
"description": "Magic CSS3 animations",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/miniMAC/magic.git"
},
"author": "Christian Pucci <minimac@minimamente.com> (https://www.minimamente.com/)",
"license": "MIT",
"bugs": {
"url": "https://github.com/miniMAC/magic/issues"
},
"homepage": "https://github.com/miniMAC/magic#readme",
"devDependencies": {
"autoprefixer": "^10.3.7",
"cssnano": "^5.0.8",
"gulp": "^4.0.2",
"gulp-cssnano": "^1.1.0",
"gulp-postcss": "^9.0.1",
"gulp-rename": "^2.0.0",
"gulp-sass": "^5.1.0",
"np": "^7.6.2",
"postcss": "^8.3.9",
"sass": "^1.49.8"
},
"keywords": [
"css",
"css3",
"animation",
"animations",
"magic"
]
}
gitextract_wd8dlsq4/ ├── .gitignore ├── LICENSE ├── README.md ├── assets/ │ └── scss/ │ ├── _magictime.scss │ ├── _media.scss │ ├── bling/ │ │ ├── _puffIn.scss │ │ ├── _puffOut.scss │ │ ├── _vanishIn.scss │ │ └── _vanishOut.scss │ ├── boing/ │ │ ├── _boingInUp.scss │ │ └── _boingOutDown.scss │ ├── bomb/ │ │ ├── _bombLeftOut.scss │ │ └── _bombRightOut.scss │ ├── magic.scss │ ├── magic_effects/ │ │ ├── _magic.scss │ │ ├── _swap.scss │ │ ├── _twisterInDown.scss │ │ └── _twisterInUp.scss │ ├── math/ │ │ ├── _foolishIn.scss │ │ ├── _foolishOut.scss │ │ ├── _holeOut.scss │ │ ├── _swashIn.scss │ │ └── _swashOut.scss │ ├── on_the_space/ │ │ ├── _spaceInDown.scss │ │ ├── _spaceInLeft.scss │ │ ├── _spaceInRight.scss │ │ ├── _spaceInUp.scss │ │ ├── _spaceOutDown.scss │ │ ├── _spaceOutLeft.scss │ │ ├── _spaceOutRight.scss │ │ └── _spaceOutUp.scss │ ├── perspective/ │ │ ├── _perspectiveDown.scss │ │ ├── _perspectiveDownReturn.scss │ │ ├── _perspectiveLeft.scss │ │ ├── _perspectiveLeftReturn.scss │ │ ├── _perspectiveRight.scss │ │ ├── _perspectiveRightReturn.scss │ │ ├── _perspectiveUp.scss │ │ └── _perspectiveUpReturn.scss │ ├── rotate/ │ │ ├── _rotateDown.scss │ │ ├── _rotateLeft.scss │ │ ├── _rotateRight.scss │ │ └── _rotateUp.scss │ ├── slide/ │ │ ├── _slideDown.scss │ │ ├── _slideDownReturn.scss │ │ ├── _slideLeft.scss │ │ ├── _slideLeftReturn.scss │ │ ├── _slideRight.scss │ │ ├── _slideRightReturn.scss │ │ ├── _slideUp.scss │ │ └── _slideUpReturn.scss │ ├── static_effects/ │ │ ├── _openDownLeft.scss │ │ ├── _openDownLeftReturn.scss │ │ ├── _openDownRight.scss │ │ ├── _openDownRightReturn.scss │ │ ├── _openUpLeft.scss │ │ ├── _openUpLeftReturn.scss │ │ ├── _openUpRight.scss │ │ └── _openUpRightReturn.scss │ ├── static_effects_out/ │ │ ├── _openDownLeftOut.scss │ │ ├── _openDownRightOut.scss │ │ ├── _openUpLeftOut.scss │ │ └── _openUpRightOut.scss │ └── tin/ │ ├── _tinDownIn.scss │ ├── _tinDownOut.scss │ ├── _tinLeftIn.scss │ ├── _tinLeftOut.scss │ ├── _tinRightIn.scss │ ├── _tinRightOut.scss │ ├── _tinUpIn.scss │ └── _tinUpOut.scss ├── dist/ │ └── magic.css ├── gulpfile.js └── package.json
SYMBOL INDEX (2 symbols across 1 files)
FILE: gulpfile.js
function style (line 27) | function style() {
function styleMin (line 34) | function styleMin() {
Condensed preview — 74 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (136K chars).
[
{
"path": ".gitignore",
"chars": 78,
"preview": "# Exclusion\n/node_modules\n.DS_Store\n.vscode\ntodo.txt\nnext.md\npackage-lock.json"
},
{
"path": "LICENSE",
"chars": 1081,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2022 Christian Pucci\n\nPermission is hereby granted, free of charge, to any person o"
},
{
"path": "README.md",
"chars": 6218,
"preview": ":tophat: magic\n---------------\n\nCSS3 Animations with special effects. **(→ 3.1 kB gzip)**\n\n## Demo\n\nCheckout the demo fo"
},
{
"path": "assets/scss/_magictime.scss",
"chars": 73,
"preview": ".magictime {\n animation-duration: 1s;\n animation-fill-mode: both;\n}"
},
{
"path": "assets/scss/_media.scss",
"chars": 130,
"preview": "@media (print), (prefers-reduced-motion) {\n .magictime {\n animation: unset !important;\n transition: none !importa"
},
{
"path": "assets/scss/bling/_puffIn.scss",
"chars": 532,
"preview": ".puffIn {\n animation-name: puffIn;\n}\n\n@-webkit-keyframes puffIn {\n 0% {\n opacity: 0;\n transform-origin: 50% 50%;"
},
{
"path": "assets/scss/bling/_puffOut.scss",
"chars": 536,
"preview": ".puffOut {\n animation-name: puffOut;\n}\n\n@-webkit-keyframes puffOut {\n 0% {\n opacity: 1;\n transform-origin: 50% 5"
},
{
"path": "assets/scss/bling/_vanishIn.scss",
"chars": 542,
"preview": ".vanishIn {\n animation-name: vanishIn;\n}\n\n@-webkit-keyframes vanishIn {\n 0% {\n opacity: 0;\n transform-origin: 50"
},
{
"path": "assets/scss/bling/_vanishOut.scss",
"chars": 546,
"preview": ".vanishOut {\n animation-name: vanishOut;\n}\n\n@-webkit-keyframes vanishOut {\n 0% {\n opacity: 1;\n transform-origin:"
},
{
"path": "assets/scss/boing/_boingInUp.scss",
"chars": 1365,
"preview": ".boingInUp {\n -webkit-animation-name: boingInUp;\n animation-name: boingInUp;\n}\n\n@-webkit-keyframes boingInUp {\n 0% {\n"
},
{
"path": "assets/scss/boing/_boingOutDown.scss",
"chars": 2522,
"preview": ".boingOutDown {\n -webkit-animation-name: boingOutDown;\n animation-name: boingOutDown;\n}\n@-webkit-keyframes boingOutDow"
},
{
"path": "assets/scss/bomb/_bombLeftOut.scss",
"chars": 1505,
"preview": ".bombLeftOut {\n -webkit-animation-name: bombLeftOut;\n animation-name: bombLeftOut;\n}\n@-webkit-keyframes bombLeftOut {\n"
},
{
"path": "assets/scss/bomb/_bombRightOut.scss",
"chars": 1494,
"preview": ".bombRightOut {\n -webkit-animation-name: bombRightOut;\n animation-name: bombRightOut;\n}\n@-webkit-keyframes bombRightOu"
},
{
"path": "assets/scss/magic.scss",
"chars": 2570,
"preview": "@charset \"UTF-8\";\n\n/*!\n * Magic - https://www.minimamente.com\n * Licensed under the MIT license - https://opensource.org"
},
{
"path": "assets/scss/magic_effects/_magic.scss",
"chars": 897,
"preview": ".magic {\n -webkit-animation-name: magic;\n animation-name: magic;\n}\n@-webkit-keyframes magic {\n 0% {\n opacity: 1;\n "
},
{
"path": "assets/scss/magic_effects/_swap.scss",
"chars": 940,
"preview": ".swap {\n -webkit-animation-name: swap;\n animation-name: swap;\n}\n@-webkit-keyframes swap {\n 0% {\n opacity: 0;\n -"
},
{
"path": "assets/scss/magic_effects/_twisterInDown.scss",
"chars": 1479,
"preview": ".twisterInDown {\n -webkit-animation-name: twisterInDown;\n animation-name: twisterInDown;\n}\n@-webkit-keyframes twisterI"
},
{
"path": "assets/scss/magic_effects/_twisterInUp.scss",
"chars": 1433,
"preview": ".twisterInUp {\n -webkit-animation-name: twisterInUp;\n animation-name: twisterInUp;\n}\n@-webkit-keyframes twisterInUp {\n"
},
{
"path": "assets/scss/math/_foolishIn.scss",
"chars": 2457,
"preview": ".foolishIn {\n -webkit-animation-name: foolishIn;\n animation-name: foolishIn;\n}\n@-webkit-keyframes foolishIn {\n 0% {\n "
},
{
"path": "assets/scss/math/_foolishOut.scss",
"chars": 2454,
"preview": ".foolishOut {\n -webkit-animation-name: foolishOut;\n animation-name: foolishOut;\n}\n@-webkit-keyframes foolishOut {\n 0%"
},
{
"path": "assets/scss/math/_holeOut.scss",
"chars": 899,
"preview": ".holeOut {\n -webkit-animation-name: holeOut;\n animation-name: holeOut;\n}\n@-webkit-keyframes holeOut {\n 0% {\n opaci"
},
{
"path": "assets/scss/math/_swashIn.scss",
"chars": 1121,
"preview": ".swashIn {\n -webkit-animation-name: swashIn;\n animation-name: swashIn;\n}\n@-webkit-keyframes swashIn {\n 0% {\n opaci"
},
{
"path": "assets/scss/math/_swashOut.scss",
"chars": 1126,
"preview": ".swashOut {\n -webkit-animation-name: swashOut;\n animation-name: swashOut;\n}\n@-webkit-keyframes swashOut {\n 0% {\n o"
},
{
"path": "assets/scss/on_the_space/_spaceInDown.scss",
"chars": 943,
"preview": ".spaceInDown {\n -webkit-animation-name: spaceInDown;\n animation-name: spaceInDown;\n}\n@-webkit-keyframes spaceInDown {\n"
},
{
"path": "assets/scss/on_the_space/_spaceInLeft.scss",
"chars": 931,
"preview": ".spaceInLeft {\n -webkit-animation-name: spaceInLeft;\n animation-name: spaceInLeft;\n}\n@-webkit-keyframes spaceInLeft {\n"
},
{
"path": "assets/scss/on_the_space/_spaceInRight.scss",
"chars": 948,
"preview": ".spaceInRight {\n -webkit-animation-name: spaceInRight;\n animation-name: spaceInRight;\n}\n@-webkit-keyframes spaceInRigh"
},
{
"path": "assets/scss/on_the_space/_spaceInUp.scss",
"chars": 921,
"preview": ".spaceInUp {\n -webkit-animation-name: spaceInUp;\n animation-name: spaceInUp;\n}\n@-webkit-keyframes spaceInUp {\n 0% {\n "
},
{
"path": "assets/scss/on_the_space/_spaceOutDown.scss",
"chars": 948,
"preview": ".spaceOutDown {\n -webkit-animation-name: spaceOutDown;\n animation-name: spaceOutDown;\n}\n@-webkit-keyframes spaceOutDow"
},
{
"path": "assets/scss/on_the_space/_spaceOutLeft.scss",
"chars": 936,
"preview": ".spaceOutLeft {\n -webkit-animation-name: spaceOutLeft;\n animation-name: spaceOutLeft;\n}\n@-webkit-keyframes spaceOutLef"
},
{
"path": "assets/scss/on_the_space/_spaceOutRight.scss",
"chars": 953,
"preview": ".spaceOutRight {\n -webkit-animation-name: spaceOutRight;\n animation-name: spaceOutRight;\n}\n@-webkit-keyframes spaceOut"
},
{
"path": "assets/scss/on_the_space/_spaceOutUp.scss",
"chars": 926,
"preview": ".spaceOutUp {\n -webkit-animation-name: spaceOutUp;\n animation-name: spaceOutUp;\n}\n@-webkit-keyframes spaceOutUp {\n 0%"
},
{
"path": "assets/scss/perspective/_perspectiveDown.scss",
"chars": 927,
"preview": ".perspectiveDown {\n -webkit-animation-name: perspectiveDown;\n animation-name: perspectiveDown;\n}\n@-webkit-keyframes pe"
},
{
"path": "assets/scss/perspective/_perspectiveDownReturn.scss",
"chars": 957,
"preview": ".perspectiveDownReturn {\n -webkit-animation-name: perspectiveDownReturn;\n animation-name: perspectiveDownReturn;\n}\n@-w"
},
{
"path": "assets/scss/perspective/_perspectiveLeft.scss",
"chars": 903,
"preview": ".perspectiveLeft {\n -webkit-animation-name: perspectiveLeft;\n animation-name: perspectiveLeft;\n}\n@-webkit-keyframes pe"
},
{
"path": "assets/scss/perspective/_perspectiveLeftReturn.scss",
"chars": 933,
"preview": ".perspectiveLeftReturn {\n -webkit-animation-name: perspectiveLeftReturn;\n animation-name: perspectiveLeftReturn;\n}\n@-w"
},
{
"path": "assets/scss/perspective/_perspectiveRight.scss",
"chars": 928,
"preview": ".perspectiveRight {\n -webkit-animation-name: perspectiveRight;\n animation-name: perspectiveRight;\n}\n@-webkit-keyframes"
},
{
"path": "assets/scss/perspective/_perspectiveRightReturn.scss",
"chars": 958,
"preview": ".perspectiveRightReturn {\n -webkit-animation-name: perspectiveRightReturn;\n animation-name: perspectiveRightReturn;\n}\n"
},
{
"path": "assets/scss/perspective/_perspectiveUp.scss",
"chars": 889,
"preview": ".perspectiveUp {\n -webkit-animation-name: perspectiveUp;\n animation-name: perspectiveUp;\n}\n@-webkit-keyframes perspect"
},
{
"path": "assets/scss/perspective/_perspectiveUpReturn.scss",
"chars": 919,
"preview": ".perspectiveUpReturn {\n -webkit-animation-name: perspectiveUpReturn;\n animation-name: perspectiveUpReturn;\n}\n@-webkit-"
},
{
"path": "assets/scss/rotate/_rotateDown.scss",
"chars": 1098,
"preview": ".rotateDown {\n -webkit-animation-name: rotateDown;\n animation-name: rotateDown;\n}\n@-webkit-keyframes rotateDown {\n 0%"
},
{
"path": "assets/scss/rotate/_rotateLeft.scss",
"chars": 1086,
"preview": ".rotateLeft {\n -webkit-animation-name: rotateLeft;\n animation-name: rotateLeft;\n}\n@-webkit-keyframes rotateLeft {\n 0%"
},
{
"path": "assets/scss/rotate/_rotateRight.scss",
"chars": 1091,
"preview": ".rotateRight {\n -webkit-animation-name: rotateRight;\n animation-name: rotateRight;\n}\n@-webkit-keyframes rotateRight {\n"
},
{
"path": "assets/scss/rotate/_rotateUp.scss",
"chars": 1072,
"preview": ".rotateUp {\n -webkit-animation-name: rotateUp;\n animation-name: rotateUp;\n}\n@-webkit-keyframes rotateUp {\n 0% {\n o"
},
{
"path": "assets/scss/slide/_slideDown.scss",
"chars": 725,
"preview": ".slideDown {\n -webkit-animation-name: slideDown;\n animation-name: slideDown;\n}\n@-webkit-keyframes slideDown {\n 0% {\n "
},
{
"path": "assets/scss/slide/_slideDownReturn.scss",
"chars": 755,
"preview": ".slideDownReturn {\n -webkit-animation-name: slideDownReturn;\n animation-name: slideDownReturn;\n}\n@-webkit-keyframes sl"
},
{
"path": "assets/scss/slide/_slideLeft.scss",
"chars": 729,
"preview": ".slideLeft {\n -webkit-animation-name: slideLeft;\n animation-name: slideLeft;\n}\n@-webkit-keyframes slideLeft {\n 0% {\n "
},
{
"path": "assets/scss/slide/_slideLeftReturn.scss",
"chars": 759,
"preview": ".slideLeftReturn {\n -webkit-animation-name: slideLeftReturn;\n animation-name: slideLeftReturn;\n}\n@-webkit-keyframes sl"
},
{
"path": "assets/scss/slide/_slideRight.scss",
"chars": 730,
"preview": ".slideRight {\n -webkit-animation-name: slideRight;\n animation-name: slideRight;\n}\n@-webkit-keyframes slideRight {\n 0%"
},
{
"path": "assets/scss/slide/_slideRightReturn.scss",
"chars": 760,
"preview": ".slideRightReturn {\n -webkit-animation-name: slideRightReturn;\n animation-name: slideRightReturn;\n}\n@-webkit-keyframes"
},
{
"path": "assets/scss/slide/_slideUp.scss",
"chars": 719,
"preview": ".slideUp {\n -webkit-animation-name: slideUp;\n animation-name: slideUp;\n}\n@-webkit-keyframes slideUp {\n 0% {\n -webk"
},
{
"path": "assets/scss/slide/_slideUpReturn.scss",
"chars": 749,
"preview": ".slideUpReturn {\n -webkit-animation-name: slideUpReturn;\n animation-name: slideUpReturn;\n}\n@-webkit-keyframes slideUpR"
},
{
"path": "assets/scss/static_effects/_openDownLeft.scss",
"chars": 1164,
"preview": ".openDownLeft {\n -webkit-animation-name: openDownLeft;\n animation-name: openDownLeft;\n}\n@-webkit-keyframes openDownLef"
},
{
"path": "assets/scss/static_effects/_openDownLeftReturn.scss",
"chars": 1194,
"preview": ".openDownLeftReturn {\n -webkit-animation-name: openDownLeftReturn;\n animation-name: openDownLeftReturn;\n}\n@-webkit-key"
},
{
"path": "assets/scss/static_effects/_openDownRight.scss",
"chars": 1173,
"preview": ".openDownRight {\n -webkit-animation-name: openDownRight;\n animation-name: openDownRight;\n}\n@-webkit-keyframes openDown"
},
{
"path": "assets/scss/static_effects/_openDownRightReturn.scss",
"chars": 1203,
"preview": ".openDownRightReturn {\n -webkit-animation-name: openDownRightReturn;\n animation-name: openDownRightReturn;\n}\n@-webkit-"
},
{
"path": "assets/scss/static_effects/_openUpLeft.scss",
"chars": 1126,
"preview": ".openUpLeft {\n -webkit-animation-name: openUpLeft;\n animation-name: openUpLeft;\n}\n@-webkit-keyframes openUpLeft {\n 0%"
},
{
"path": "assets/scss/static_effects/_openUpLeftReturn.scss",
"chars": 1156,
"preview": ".openUpLeftReturn {\n -webkit-animation-name: openUpLeftReturn;\n animation-name: openUpLeftReturn;\n}\n@-webkit-keyframes"
},
{
"path": "assets/scss/static_effects/_openUpRight.scss",
"chars": 1143,
"preview": ".openUpRight {\n -webkit-animation-name: openUpRight;\n animation-name: openUpRight;\n}\n@-webkit-keyframes openUpRight {\n"
},
{
"path": "assets/scss/static_effects/_openUpRightReturn.scss",
"chars": 1173,
"preview": ".openUpRightReturn {\n -webkit-animation-name: openUpRightReturn;\n animation-name: openUpRightReturn;\n}\n@-webkit-keyfra"
},
{
"path": "assets/scss/static_effects_out/_openDownLeftOut.scss",
"chars": 1243,
"preview": ".openDownLeftOut {\n -webkit-animation-name: openDownLeftOut;\n animation-name: openDownLeftOut;\n}\n@-webkit-keyframes op"
},
{
"path": "assets/scss/static_effects_out/_openDownRightOut.scss",
"chars": 1252,
"preview": ".openDownRightOut {\n -webkit-animation-name: openDownRightOut;\n animation-name: openDownRightOut;\n}\n@-webkit-keyframes"
},
{
"path": "assets/scss/static_effects_out/_openUpLeftOut.scss",
"chars": 1205,
"preview": ".openUpLeftOut {\n -webkit-animation-name: openUpLeftOut;\n animation-name: openUpLeftOut;\n}\n@-webkit-keyframes openUpLe"
},
{
"path": "assets/scss/static_effects_out/_openUpRightOut.scss",
"chars": 1222,
"preview": ".openUpRightOut {\n -webkit-animation-name: openUpRightOut;\n animation-name: openUpRightOut;\n}\n@-webkit-keyframes openU"
},
{
"path": "assets/scss/tin/_tinDownIn.scss",
"chars": 947,
"preview": ".tinDownIn {\n -webkit-animation-name: tinDownIn;\n animation-name: tinDownIn;\n}\n@-webkit-keyframes tinDownIn {\n 0% {\n "
},
{
"path": "assets/scss/tin/_tinDownOut.scss",
"chars": 952,
"preview": ".tinDownOut {\n -webkit-animation-name: tinDownOut;\n animation-name: tinDownOut;\n}\n@-webkit-keyframes tinDownOut {\n 0%"
},
{
"path": "assets/scss/tin/_tinLeftIn.scss",
"chars": 951,
"preview": ".tinLeftIn {\n -webkit-animation-name: tinLeftIn;\n animation-name: tinLeftIn;\n}\n@-webkit-keyframes tinLeftIn {\n 0% {\n "
},
{
"path": "assets/scss/tin/_tinLeftOut.scss",
"chars": 956,
"preview": ".tinLeftOut {\n -webkit-animation-name: tinLeftOut;\n animation-name: tinLeftOut;\n}\n@-webkit-keyframes tinLeftOut {\n 0%"
},
{
"path": "assets/scss/tin/_tinRightIn.scss",
"chars": 952,
"preview": ".tinRightIn {\n -webkit-animation-name: tinRightIn;\n animation-name: tinRightIn;\n}\n@-webkit-keyframes tinRightIn {\n 0%"
},
{
"path": "assets/scss/tin/_tinRightOut.scss",
"chars": 957,
"preview": ".tinRightOut {\n -webkit-animation-name: tinRightOut;\n animation-name: tinRightOut;\n}\n@-webkit-keyframes tinRightOut {\n"
},
{
"path": "assets/scss/tin/_tinUpIn.scss",
"chars": 941,
"preview": ".tinUpIn {\n -webkit-animation-name: tinUpIn;\n animation-name: tinUpIn;\n}\n@-webkit-keyframes tinUpIn {\n 0% {\n opaci"
},
{
"path": "assets/scss/tin/_tinUpOut.scss",
"chars": 946,
"preview": ".tinUpOut {\n -webkit-animation-name: tinUpOut;\n animation-name: tinUpOut;\n}\n@-webkit-keyframes tinUpOut {\n 0%,\n 20%,"
},
{
"path": "dist/magic.css",
"chars": 44345,
"preview": "/*!\n * Magic - https://www.minimamente.com\n * Licensed under the MIT license - https://opensource.org/licenses/MIT\n * Co"
},
{
"path": "gulpfile.js",
"chars": 1262,
"preview": "/**\n * Gulp\n *\n * npm i --save-dev gulp sass gulp-sass postcss gulp-postcss autoprefixer gulp-rename cssnano gulp-cssnan"
},
{
"path": "package.json",
"chars": 901,
"preview": "{\n \"name\": \"magic.css\",\n \"version\": \"1.4.8\",\n \"description\": \"Magic CSS3 animations\",\n \"main\": \"index.js\",\n \"script"
}
]
About this extraction
This page contains the full source code of the miniMAC/magic GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 74 files (122.6 KB), approximately 41.6k tokens, and a symbol index with 2 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.