jeremyckahn/stylie

A graphical CSS3 animation tool

Stylie - A CSS 3 animation tool

Stylie is a fun tool for easily creating CSS 3 animations. Quickly design your animation graphically, grab the generated CSS and go! To learn how to use the app, either run it locally (see below) or go to https://jeremyckahn.github.io/stylie/ and click the "?" icon in the header for a manual.

Install locally

Clone this repo and install the dependencies:

npm install

To run the app:

npm start

You can now access Stylie from http://localhost:9005.

Developing Stylie

You can build the project with:

npm run build

Releasing

Release process uses standard npm version process:

npm version [major|minor|patch]

You'll need Git remote repo write/push permissions for this to work.

Contributors

I can't design things, but I know people that can. The overall look of the app is courtesy of Jon Victorino. The Help icon was masterfully crafted by @nrrrdcore.

License

Stylie is distributed under a CC BY-NC-SA license. Don't worry, this license does not extend to the animations you create with Stylie, just the application itself. You are free to use the animations created by Stylie however you please. You are encouraged to use and modify the code to suit your needs, as well as redistribute it non-commercially.

stylie's Issues

How to Scale

Happy New Year!

RE: transform: scale(1,3); /* Standard syntax scale(x,y) */
How do I stretch the height the object from the right panel ?
SCALE only have one input.

As a user, I want to modify and re-publish an existing animation

Blocked by #17.

Automatically make keyframes on alteration

Things like After Effects operate like so: when someone pauses and moves the slider manually to a spot they like, then create any alteration, it automatically makes a keyframe and tween between the old and new keyframe.

Stop animation???

How do I make a stop in my animation?

already changed the infinite to 1 and did not work.

Can you help-me?

.stylie {
animation-name: stylie-transform-keyframes;
animation-duration: 2000ms;
animation-delay: 0ms;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform-origin: 0 0;
}
@Keyframes stylie-transform-keyframes {
0% {transform:translateX(40px) translateY(437px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
100% {transform:translateX(447.5px) translateY(437px) rotate(0deg) translate(-50%, -50%);}
}

TODO: Implement Reddit suggestions

From here:

• Holding shift to display the rotation handles has poor discoverability.
• If you edit rotation in the keyframes tab it isn't propagated to the dragging controls. This means that if you drag one of the handles it resets the rotation angle to whatever you set with the handles.
• It would be nice if I had an option to center the image on the path line (appending translate(-50%,-50%) to the transform works nicely).
• Multiple keyframe support
• Get a non rotationally symmetric default image
• Add the a beziercurve in the 'animation'-property instead of hardcoding it in the keyframes (i.e. cubic-bezier(0.345, 0.005, 0.670, 0.975); instead of linear)
• Add graphical controls for the easing functions.

As a user, I want to login via Twitter

Preprocessor Support

I noticed in the output its all compiled CSS. It would like to take the output via SASS w/ Compass and put it in my app and still be manageable. http://www.colorzilla.com/gradient-editor/ does it for gradients.

Error installing

Hi, could you please guide me on how to install stylie. i get this errors

$ npm install https://github.com/jeremyckahn/stylie
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: This module moved to @hapi/sntp. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated [email protected]: Use uuid module instead
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: This module moved to @hapi/hawk. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated [email protected]: request has been deprecated, see request/request#3142
npm WARN deprecated [email protected]: connect 2.x series is deprecated
npm ERR! code 1
npm ERR! git dep preparation failed
npm ERR! command C:\Program Files\nodejs\node.exe C:\Users\User\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js install --force --cache=C:\Users\User\AppData\Local\npm-cache --prefer-offline=false --prefer-online=false --offline=false --no-progress --no-save --no-audit
npm ERR! npm WARN using --force Recommended protections disabled.
npm ERR! npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/pinpoint'
npm ERR! npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm ERR! npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm ERR! npm WARN deprecated [email protected]: this library is no longer supported
npm ERR! npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm ERR! npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm ERR! npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm ERR! npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm ERR! npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm ERR! npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm ERR! npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm ERR! npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm ERR! npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/formula'
npm ERR! npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.
npm ERR! npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm ERR! npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm ERR! npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm ERR! npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm ERR! npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm ERR! npm WARN deprecated [email protected]: This module moved to @hapi/sntp. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm ERR! npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm ERR! npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm ERR! npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm ERR! npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm ERR! npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm ERR! npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/address'
npm ERR! npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm ERR! npm WARN deprecated [email protected]: Use uuid module instead
npm ERR! npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm ERR! npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm ERR! npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm ERR! npm WARN deprecated [email protected]: request has been deprecated, see request/request#3142
npm ERR! npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm ERR! npm WARN deprecated [email protected]: This module moved to @hapi/hawk. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm ERR! npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm ERR! npm WARN deprecated [email protected]: request has been deprecated, see request/request#3142
npm ERR! npm WARN deprecated @hapi/[email protected]: Switch to 'npm install joi'
npm ERR! npm WARN deprecated [email protected]: connect 2.x series is deprecated
npm ERR! npm ERR! code 1
npm ERR! npm ERR! path C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\node-sass
npm ERR! npm ERR! command failed
npm ERR! npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! npm ERR! gyp info it worked if it ends with ok
npm ERR! npm ERR! gyp verb cli [
npm ERR! npm ERR! gyp verb cli 'C:\Program Files\nodejs\node.exe',
npm ERR! npm ERR! gyp verb cli 'C:\Users\User\AppData\Local\npm-cache\_cacache\tmp\git-clone-87149d77\node_modules\node-gyp\bin\node-gyp.js',
npm ERR! npm ERR! gyp verb cli 'rebuild',
npm ERR! npm ERR! gyp verb cli '--verbose',
npm ERR! npm ERR! gyp verb cli '--libsass_ext=',
npm ERR! npm ERR! gyp verb cli '--libsass_cflags=',
npm ERR! npm ERR! gyp verb cli '--libsass_ldflags=',
npm ERR! npm ERR! gyp verb cli '--libsass_library='
npm ERR! npm ERR! gyp verb cli ]
npm ERR! npm ERR! gyp info using [email protected]
npm ERR! npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! npm ERR! gyp verb command rebuild []
npm ERR! npm ERR! gyp verb command clean []
npm ERR! npm ERR! gyp verb clean removing "build" directory
npm ERR! npm ERR! gyp verb command configure []
npm ERR! npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! npm ERR! gyp verb which failed Error: not found: python2
npm ERR! npm ERR! gyp verb which failed at getNotFoundError (C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\which\which.js:13:12)
npm ERR! npm ERR! gyp verb which failed at F (C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\which\which.js:68:19)
npm ERR! npm ERR! gyp verb which failed at E (C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\which\which.js:80:29)
npm ERR! npm ERR! gyp verb which failed at C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\which\which.js:89:16
npm ERR! npm ERR! gyp verb which failed at C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\isexe\index.js:42:5
npm ERR! npm ERR! gyp verb which failed at C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\isexe\windows.js:36:5
npm ERR! npm ERR! gyp verb which failed at FSReqCallback.oncomplete (fs.js:183:21)
npm ERR! npm ERR! gyp verb which failed python2 Error: not found: python2
npm ERR! npm ERR! gyp verb which failed at getNotFoundError (C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\which\which.js:13:12)
npm ERR! npm ERR! gyp verb which failed at F (C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\which\which.js:68:19)
npm ERR! npm ERR! gyp verb which failed at E (C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\which\which.js:80:29)
npm ERR! npm ERR! gyp verb which failed at C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\which\which.js:89:16
npm ERR! npm ERR! gyp verb which failed at C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\isexe\index.js:42:5
npm ERR! npm ERR! gyp verb which failed at C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\isexe\windows.js:36:5
npm ERR! npm ERR! gyp verb which failed at FSReqCallback.oncomplete (fs.js:183:21) {
npm ERR! npm ERR! gyp verb which failed code: 'ENOENT'
npm ERR! npm ERR! gyp verb which failed }
npm ERR! npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! npm ERR! gyp verb which succeeded python C:\Users\User\AppData\Local\Programs\Python\Python39\python.EXE
npm ERR! npm ERR! gyp ERR! configure error
npm ERR! npm ERR! gyp ERR! stack Error: Command failed: C:\Users\User\AppData\Local\Programs\Python\Python39\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! npm ERR! gyp ERR! stack File "", line 1
npm ERR! npm ERR! gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! npm ERR! gyp ERR! stack ^
npm ERR! npm ERR! gyp ERR! stack SyntaxError: invalid syntax
npm ERR! npm ERR! gyp ERR! stack
npm ERR! npm ERR! gyp ERR! stack at ChildProcess.exithandler (child_process.js:308:12)
npm ERR! npm ERR! gyp ERR! stack at ChildProcess.emit (events.js:315:20)
npm ERR! npm ERR! gyp ERR! stack at maybeClose (internal/child_process.js:1048:16)
npm ERR! npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
npm ERR! npm ERR! gyp ERR! System Windows_NT 10.0.19041
npm ERR! npm ERR! gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\User\AppData\Local\npm-cache\_cacache\tmp\git-clone-87149d77\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! npm ERR! gyp ERR! cwd C:\Users\User\AppData\Local\npm-cache_cacache\tmp\git-clone-87149d77\node_modules\node-sass
npm ERR! npm ERR! gyp ERR! node -v v14.16.0
npm ERR! npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! npm ERR! gyp ERR! not ok
npm ERR! npm ERR! Build failed with error code: 1
npm ERR!
npm ERR! npm ERR! A complete log of this run can be found in:
npm ERR! npm ERR! C:\Users\User\AppData\Local\npm-cache_logs\2021-04-06T15_54_11_951Z-debug.log

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\User\AppData\Local\npm-cache_logs\2021-04-06T15_54_25_926Z-debug.log

As a user, I want to be able to save animations linked to my cloud account

Blocked by #16.

Specify CSS position in the output

Copy/pasting the generated CSS as-is won't do much good until it has position: absolute.

Any way to make the object being animated rotate to face the direction of travel?

Hi, Great project you have here. Just wondered if there is any way to make the object being animated rotate to face the direction of travel? In your demo, you use a circle but for any other sort of object at some point if there is a change of direction, the object ends up facing the wrong way.

Is there any way to auto rotate the object to the direction of travel? Thanks.

TODO: Use https

Stylie is currently being served as http. Switch to https to prevent Mantra exports from breaking.

Task: Add a code of conduct

Per https://opensource.com/life/16/3/creating-welcoming-and-inclusive-open-source-space.

Bezier paths

Create bezier handles for the anchors of the paths rather than CSS easing terms (no one knows what those are, but they can visually see the path change). A lot of projects do this so I don't think it would be too crazy, but it would help a lot.

Moving keyframes is broken

Moving keyframes by re-typing the millisecond value in the form is causing the animation to break. This is a pretty tough bug to fix — I've already spent several hours on it. This is a significant bug, so I'm working to get a fix out as quickly as I can.

Filing this issue for visibility.

Add titles to input labels

Fine grained control of curve with custom bezier field

http://cubic-bezier.com/#.17,.67,.94,.35

I would like a bezier function to update in realtime with the option of editing it in the UI.

As a user, I want to publish an animation

Blocked by #16.

Missing -o- prefixes for Opera

Would be nice to have them, happy to send a PR.

TODO: Implement Reddit suggestions v2

From here:

• Add UI to control CSS output granularity
• Support all transform properties
• Optionally force GPU by adding translateZ(360)

Stop button does not reset slider

When users press the Stop Button in the bottom left play icon the scrubber icon resets to the beginning of the clip while the main slider icon does not reset until play is pressed again

Not sure if this is an oversight or if it's working as intended, but I figure I'd point it out.

Visible canvas and percentage based translations

Hi, great little tool, thanks!

I have a few use cases for stylie, first some context: I'd like to use the generated animations inside a HTML5 magazine solution, which adapts to screensize. This means there's no fixed canvas, and sometimes we need to use percentage based values for animations. Together with that, elements are often positioned with an initial offset which positions them outside the viewport.

Would it be possible to add a visible canvas to stylie, so it's possible to animate elements from outside to the inside?

And together with that, could it use % based values for translates/scaling instead of pixels as an option?

property 'centerToPath' of undefined

JS error stops Stylie working at all. Renders blank page. Happens on http://jeremyckahn.github.io/stylie/ and locally.

New design

Bug: The app is ugly.

Resolution: Make the app not ugly.

Strategy: Do this: http://d.pr/i/aGqt

Transform translate applied twice, once in pixels, once in percentage

First and foremost, thanks for this tool. It is extremely impressive, and has made playing with CSS animations fun! Huge thanks!

I wouldn't claim to be an expert here, so this could be by design. Why are there two translates applied in the transform, one with pixels as units and the other with percentages as units?

I was struggling to figure out why my animations were different between Chrome and Firefox. I believe FF is ignoring the second translate, while Chrome applies both. When I remove the second percentage-based definition, both browsers behave similarly. If this is a bug, I hope this helps; if not, I'd love to know what's going on...

Thanks again!

Example CSS Ouput: (translates emphasized)

.S {
-webkit-animation-name: S-transform-keyframes;
-webkit-animation-duration: 5000ms;
-webkit-animation-delay: 0ms;
-webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 0 0;
animation-name: S-transform-keyframes;
animation-duration: 5000ms;
animation-delay: 0ms;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform-origin: 0 0;
}
@-webkit-keyframes S-transform-keyframes {
0% {-webkit-transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);-webkit-animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
40% {-webkit-transform:translate(2px, -14px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);-webkit-animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
60% {-webkit-transform:translate(-9px, -14px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);-webkit-animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
80% {-webkit-transform:translate(-17px, -6px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);-webkit-animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
100% {-webkit-transform:translate(-1px, -1px) scale(1) rotateX(0deg) rotateY(39deg) rotateZ(0deg) translate(-50%, -50%);}
}
@Keyframes S-transform-keyframes {
0% {transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
40% {transform:translate(2px, -14px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
60% {transform:translate(-9px, -14px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
80% {transform:translate(-17px, -6px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
100% {transform:translate(-1px, -1px) scale(1) rotateX(0deg) rotateY(39deg) rotateZ(0deg) translate(-50%, -50%);}
}