Repository: needim/noty
Branch: master
Commit: 82f11352c38d
Files: 147
Total size: 1.4 MB
Directory structure:
gitextract_8xne0dab/
├── .babelrc
├── .codeclimate.yml
├── .editorconfig
├── .github/
│ ├── FUNDING.yml
│ └── ISSUE_TEMPLATE.md
├── .gitignore
├── .travis.yml
├── Gruntfile.js
├── LICENSE.txt
├── README.markdown
├── bower.json
├── browserstack-builds.json
├── browserstack-session.json
├── browserstack.json
├── composer.json
├── demo/
│ ├── animate.css
│ ├── bouncejs/
│ │ └── bounce.js
│ ├── demo.css
│ ├── demo.js
│ ├── font-awesome/
│ │ └── fonts/
│ │ └── FontAwesome.otf
│ ├── fonts/
│ │ └── stylesheet.css
│ ├── index.html
│ ├── push.html
│ └── sendpush.js
├── docs/
│ ├── .nojekyll
│ ├── README.md
│ ├── _assets/
│ │ ├── docs.js
│ │ ├── docsify.js
│ │ └── vue.css
│ ├── _navbar.md
│ ├── _sidebar.md
│ ├── animations.md
│ ├── api.md
│ ├── bakers.md
│ ├── browsers.md
│ ├── confirm.md
│ ├── index.html
│ ├── installation.md
│ ├── options.md
│ ├── push.md
│ ├── themes.md
│ ├── types.md
│ └── v2/
│ ├── animations.html
│ ├── api.html
│ ├── confirmations.html
│ ├── index.html
│ ├── layouts.html
│ ├── options.html
│ ├── releases.html
│ ├── themes.html
│ └── vendor/
│ ├── animate.css
│ ├── custom.css
│ ├── documentation.js
│ ├── fastclick.js
│ ├── google-code-prettify/
│ │ ├── prettify.css
│ │ └── prettify.js
│ ├── main.js
│ ├── noty-2.4.1/
│ │ ├── .gitignore
│ │ ├── Gruntfile.js
│ │ ├── LICENSE.txt
│ │ ├── README.markdown
│ │ ├── bower.json
│ │ ├── composer.json
│ │ ├── demo/
│ │ │ ├── allLayouts.html
│ │ │ ├── allTypes.html
│ │ │ ├── animate.css
│ │ │ ├── api.html
│ │ │ ├── buttons.css
│ │ │ ├── consumingAlert.html
│ │ │ ├── customContainer.html
│ │ │ ├── font-awesome/
│ │ │ │ └── fonts/
│ │ │ │ └── FontAwesome.otf
│ │ │ ├── index.html
│ │ │ ├── issue302.html
│ │ │ ├── jquery-1.8.0.js
│ │ │ ├── killer.html
│ │ │ ├── noanim.html
│ │ │ ├── notification_html.js
│ │ │ ├── progressbar.html
│ │ │ ├── themeBootstrap.html
│ │ │ ├── themeCss.html
│ │ │ ├── usingMaxVisible.html
│ │ │ ├── usingWithAnimate.css.html
│ │ │ ├── usingWithButtons.html
│ │ │ ├── usingWithButtons2.html
│ │ │ ├── usingWithModal.html
│ │ │ └── usingWithOldOptions.html
│ │ ├── js/
│ │ │ └── noty/
│ │ │ ├── jquery.noty.js
│ │ │ ├── layouts/
│ │ │ │ ├── bottom.js
│ │ │ │ ├── bottomCenter.js
│ │ │ │ ├── bottomLeft.js
│ │ │ │ ├── bottomRight.js
│ │ │ │ ├── center.js
│ │ │ │ ├── centerLeft.js
│ │ │ │ ├── centerRight.js
│ │ │ │ ├── inline.js
│ │ │ │ ├── top.js
│ │ │ │ ├── topCenter.js
│ │ │ │ ├── topLeft.js
│ │ │ │ └── topRight.js
│ │ │ ├── packaged/
│ │ │ │ └── jquery.noty.packaged.js
│ │ │ ├── promise.js
│ │ │ └── themes/
│ │ │ ├── bootstrap.js
│ │ │ ├── default.js
│ │ │ ├── metroui.js
│ │ │ ├── relax.js
│ │ │ └── semanticUI.js
│ │ ├── noty.jquery.json
│ │ └── package.json
│ ├── ps-icon-pack.css
│ └── showdown/
│ └── showdown.js
├── index.d.ts
├── lib/
│ ├── noty.css
│ ├── noty.js
│ └── themes/
│ ├── bootstrap-v3.css
│ ├── bootstrap-v4.css
│ ├── light.css
│ ├── metroui.css
│ ├── mint.css
│ ├── nest.css
│ ├── relax.css
│ ├── semanticui.css
│ └── sunset.css
├── manifest.json.template
├── package.json
├── postcss.config.js
├── service-worker.js.template
├── src/
│ ├── api.js
│ ├── button.js
│ ├── index.js
│ ├── noty.scss
│ ├── push.js
│ ├── themes/
│ │ ├── bootstrap-v3.scss
│ │ ├── bootstrap-v4.scss
│ │ ├── light.scss
│ │ ├── metroui.scss
│ │ ├── mint.scss
│ │ ├── nest.scss
│ │ ├── relax.scss
│ │ ├── semanticui.scss
│ │ └── sunset.scss
│ └── utils.js
├── test/
│ ├── index.html
│ ├── unit/
│ │ ├── init.test.js
│ │ └── phantom.js
│ └── vendor/
│ ├── qunit-theme-ninja.css
│ └── qunit.js
└── webpack.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
"presets": ["es2015"],
"plugins": ["babel-plugin-add-module-exports"]
}
================================================
FILE: .codeclimate.yml
================================================
engines:
eslint:
enabled: true
fixme:
enabled: true
ratings:
paths:
- "src/**/*.js"
exclude_paths:
- test/**/*
- demo/**/*
- node_modules/**/*
================================================
FILE: .editorconfig
================================================
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
================================================
FILE: .github/FUNDING.yml
================================================
github: [needim]
patreon: needim
ko_fi: needim
================================================
FILE: .github/ISSUE_TEMPLATE.md
================================================
> **_Noty version_**: .....
> **_Browser_**: .....
> **_OS_**: .....
> **_jsFiddle link (if available)_**: .....
----------
================================================
FILE: .gitignore
================================================
child/
.DS_Store
.idea/
node_modules/
_SpecRunner.html
/.vscode/
yarn.lock
.nyc_output
coverage
manifest.json
service-worker.js
================================================
FILE: .travis.yml
================================================
language: node_js
node_js:
- "7"
branches:
only:
- master
================================================
FILE: Gruntfile.js
================================================
module.exports = function (grunt) {
'use strict'
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
usebanner: {
taskName: {
options: {
position: 'top',
banner: '/* \n @package NOTY - Dependency-free notification library \n' +
' @version version: <%= pkg.version %> \n' +
' @contributors https://github.com/needim/noty/graphs/contributors \n' +
' @documentation Examples and Documentation - https://ned.im/noty \n' +
' @license Licensed under the MIT licenses: http://www.opensource.org/licenses/mit-license.php \n*/\n',
linebreak: true
},
files: {
src: ['lib/noty.js', 'lib/noty.min.js']
}
}
},
qunit: {
options: {
inject: 'test/unit/phantom.js'
},
files: 'test/index.html'
},
connect: {
server: {
options: {
port: 3000,
base: '.'
}
}
},
sass: {
dist: {
options: {
style: 'expanded',
sourcemap: 'file'
},
files: [{
expand: true,
cwd: 'src/themes',
src: ['*.scss'],
dest: 'lib/themes',
ext: '.css'
}]
}
},
curl: {
builds: {
src: {
url: 'https://www.browserstack.com/automate/builds.json',
auth: {
user: process.env.BROWSERSTACK_USERNAME,
pass: process.env.BROWSERSTACK_KEY
}
},
dest: 'browserstack-builds.json'
},
session: {
src: {
url: 'https://www.browserstack.com/automate/builds/' + grunt.file.readJSON('browserstack-builds.json')[0]['automation_build']['hashed_id'] + '/sessions.json',
auth: {
user: process.env.BROWSERSTACK_USERNAME,
pass: process.env.BROWSERSTACK_KEY
}
},
dest: 'browserstack-session.json'
}
}
})
require('load-grunt-tasks')(grunt)
grunt.registerTask('bs-create-md', function () {
const session = grunt.file.readJSON('browserstack-session.json')
const file = 'docs/browsers.md'
let contents = '!> This data is provided by BrowserStack Automate \n\n\n'
contents += `#### ${session[0].automation_session.build_name} \n\n`
contents += '| OS | Browser | Result | Details | \n'
contents += '| --- | --- | --- | --- | \n'
session.forEach(function (s) {
grunt.log.writeln(s.automation_session.hashed_id)
contents += `| ${s.automation_session.os} ${s.automation_session.os_version} | ${s.automation_session.browser} ${s.automation_session.browser_version} | ${s.automation_session.status} | [view](${s.automation_session.public_url}) |`
contents += '\n'
})
grunt.file.write(file, contents)
})
grunt.registerTask('browserstack-md', ['curl:builds', 'curl:session', 'bs-create-md'])
grunt.registerTask('banner', 'usebanner')
grunt.registerTask('test', 'qunit')
grunt.registerTask('saucelabs', ['qunit', 'connect', 'saucelabs-qunit'])
grunt.registerTask('default', ['test'])
grunt.registerTask('themes', ['sass'])
}
================================================
FILE: LICENSE.txt
================================================
Copyright (c) 2012 Nedim Arabacı
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.markdown
================================================
# DEPRECATED
This repository is no longer supported, please consider using alternatives.
[](http://unmaintained.tech/)
Dependency-free notification library.
Documentation »
## Hi
**NOTY** is a notification library that makes it easy to create **alert** - **success** - **error** - **warning** - **information** - **confirmation** messages as an alternative the standard alert dialog.
The notifications can be positioned at the;
**top** - **topLeft** - **topCenter** - **topRight** - **center** - **centerLeft** - **centerRight** - **bottom** - **bottomLeft** - **bottomCenter** - **bottomRight**
There are lots of other options in the API to customise the text, animation, buttons and much more.
It also has various callbacks for the buttons, opening closing the notifications and queue control.
---
### Features
- [x] Dependency-free
- [x] Web Push Notifications with Service Worker support
- [x] UMD
- [x] Named queue system
- [x] Has 11 layouts, 5 notification styles, 5+ themes
- [x] Custom container (inline notifications)
- [x] Confirm notifications
- [x] TTL
- [x] Progress bar indicator for timed notifications
- [x] Supports css animations, [animate.css](https://github.com/daneden/animate.css), [mojs](https://github.com/legomushroom/mojs), [bounce.js](https://github.com/tictail/bounce.js), [velocity](https://github.com/julianshapiro/velocity) and other animation libraries
- [x] 2 close options: click, button
- [x] API & Callbacks
- [x] Custom templating
- [x] Document visibility control (blur, focus)
### Documentation
Documentation and examples are here:
---
##### Basic Usage
```js
import Noty from "noty";
new Noty({
text: "Notification text"
}).show();
// or
const Noty = require("noty");
new Noty({
text: "Notification text"
}).show();
```
##### Development
```console
$ npm run dev
$ npm test
$ npm run build
$ npm run browserstack
$ npm run serve-docs
```
##### Development environment
- [x] Standard
- [x] Prettier
- [x] ES6 & Babel & Webpack
- [x] Sass
- [x] Autoprefixer
- [x] QUnit
- [x] BrowserStack
- [x] Pre-commit tests
- [x] Travis CI
[](https://github.com/feross/standard)
================================================
FILE: bower.json
================================================
{
"name": "noty",
"description": "Noty - Notification library",
"license": "MIT",
"homepage": "http://ned.im/noty",
"main": "lib/noty.js",
"keywords": [
"noty",
"notification",
"alert",
"confirmation"
],
"ignore": [
"node_modules",
"tests"
],
"authors": [
"Nedim Arabacı "
]
}
================================================
FILE: browserstack-builds.json
================================================
[{"automation_build":{"name":"Local run 2017 07 27T17:31:03.314Z","duration":null,"status":"done","hashed_id":"7d2483377687d162b9bc20fcaf3cb1bfb8f5bec0"}},{"automation_build":{"name":"Local run 2017 07 27T16:47:55.918Z","duration":null,"status":"done","hashed_id":"31f78fc1bfbe5c32506ca9c3acd06182f45314ed"}},{"automation_build":{"name":"Local run 2017 07 27T16:41:51.361Z","duration":null,"status":"done","hashed_id":"7bba6ab979ebd503c9cdccaf58d385f2b878fbce"}},{"automation_build":{"name":"Local run 2017 07 27T16:38:09.816Z","duration":null,"status":"done","hashed_id":"3a9b655e94c3a6a9e755036df49e9896c14b6f9c"}},{"automation_build":{"name":"Local run 2017 07 27T16:37:04.214Z","duration":null,"status":"done","hashed_id":"c66c5b2a11cc1ee6644d1fa2e9f6eff7a6a0cbec"}},{"automation_build":{"name":"Local run 2017 07 27T15:24:14.586Z","duration":null,"status":"done","hashed_id":"715319d73cd4103da0a40c2a06b7a66b1bfc6d6d"}}]
================================================
FILE: browserstack-session.json
================================================
[
{
"automation_session": {
"name": null,
"duration": 48,
"os": "Windows",
"os_version": "10",
"browser_version": "46.0",
"browser": "opera",
"device": null,
"status": "done",
"hashed_id": "c259644238854e4628696d8cfea9482b96a78a07",
"reason": null,
"build_name": "Local run 2017 07 27T17:31:03.314Z",
"project_name": "noty",
"logs": "https://www.browserstack.com/automate/builds/7d2483377687d162b9bc20fcaf3cb1bfb8f5bec0/sessions/c259644238854e4628696d8cfea9482b96a78a07/logs",
"browser_url": "https://www.browserstack.com/automate/builds/7d2483377687d162b9bc20fcaf3cb1bfb8f5bec0/sessions/c259644238854e4628696d8cfea9482b96a78a07",
"public_url": "https://www.browserstack.com/automate/builds/7d2483377687d162b9bc20fcaf3cb1bfb8f5bec0/sessions/c259644238854e4628696d8cfea9482b96a78a07?auth_token=f87c9cb1ab62bb7b85af973cc2a1b03bd9d35fbc6a9e38b716fe38b01c4c3480",
"video_url": "https://www.browserstack.com/s3-upload/bs-video-logs-euw/s3-eu-west-1/c259644238854e4628696d8cfea9482b96a78a07/video-c259644238854e4628696d8cfea9482b96a78a07.mp4?AWSAccessKeyId=AKIAIN2TCEEW2SVRV5JA\u0026Expires=1509231864\u0026Signature=L9qIjHCc4zQU%2BuRTWn3EFgmyHhQ%3D\u0026response-content-type=video%2Fmp4",
"browser_console_logs_url": "https://www.browserstack.com/s3-upload/bs-selenium-logs-euw/s3-eu-west-1/c259644238854e4628696d8cfea9482b96a78a07/c259644238854e4628696d8cfea9482b96a78a07-console-logs.txt?AWSAccessKeyId=AKIAIN2TCEEW2SVRV5JA\u0026Expires=1509231864\u0026Signature=IkOSopxHZ4nSX6QGOtkxYa%2FSp5Y%3D\u0026response-content-type=text%2Fplain",
"har_logs_url": "https://www.browserstack.com/s3-upload/bs-video-logs-euw/s3-eu-west-1/c259644238854e4628696d8cfea9482b96a78a07/c259644238854e4628696d8cfea9482b96a78a07-har-logs.txt?AWSAccessKeyId=AKIAIN2TCEEW2SVRV5JA\u0026Expires=1509231864\u0026Signature=AW4U9XEaaZxPLERvua8%2FLQlnvY0%3D"
}
},
{
"automation_session": {
"name": null,
"duration": 54,
"os": "Windows",
"os_version": "10",
"browser_version": "59.0",
"browser": "chrome",
"device": null,
"status": "done",
"hashed_id": "dc87007925cb5729ac8aa2a6136aab1fb6808cc1",
"reason": null,
"build_name": "Local run 2017 07 27T17:31:03.314Z",
"project_name": "noty",
"logs": "https://www.browserstack.com/automate/builds/7d2483377687d162b9bc20fcaf3cb1bfb8f5bec0/sessions/dc87007925cb5729ac8aa2a6136aab1fb6808cc1/logs",
"browser_url": "https://www.browserstack.com/automate/builds/7d2483377687d162b9bc20fcaf3cb1bfb8f5bec0/sessions/dc87007925cb5729ac8aa2a6136aab1fb6808cc1",
"public_url": "https://www.browserstack.com/automate/builds/7d2483377687d162b9bc20fcaf3cb1bfb8f5bec0/sessions/dc87007925cb5729ac8aa2a6136aab1fb6808cc1?auth_token=04d2d0b39bcdbb76153ee28e3acf67099ecbd9a093c6176df9ad892c083663c6",
"video_url": "https://www.browserstack.com/s3-upload/bs-video-logs-euw/s3-eu-west-1/dc87007925cb5729ac8aa2a6136aab1fb6808cc1/video-dc87007925cb5729ac8aa2a6136aab1fb6808cc1.mp4?AWSAccessKeyId=AKIAIN2TCEEW2SVRV5JA\u0026Expires=1509231864\u0026Signature=A6DNc457B5vqFNxOvP6B%2F0tCYZk%3D\u0026response-content-type=video%2Fmp4",
"browser_console_logs_url": "https://www.browserstack.com/s3-upload/bs-selenium-logs-euw/s3-eu-west-1/dc87007925cb5729ac8aa2a6136aab1fb6808cc1/dc87007925cb5729ac8aa2a6136aab1fb6808cc1-console-logs.txt?AWSAccessKeyId=AKIAIN2TCEEW2SVRV5JA\u0026Expires=1509231864\u0026Signature=yz1BugMpwOrl2h9i84A6BQtr7Cs%3D\u0026response-content-type=text%2Fplain",
"har_logs_url": "https://www.browserstack.com/s3-upload/bs-video-logs-euw/s3-eu-west-1/dc87007925cb5729ac8aa2a6136aab1fb6808cc1/dc87007925cb5729ac8aa2a6136aab1fb6808cc1-har-logs.txt?AWSAccessKeyId=AKIAIN2TCEEW2SVRV5JA\u0026Expires=1509231864\u0026Signature=kaUFdYGXBcjY5ZxokYZ7cYjhGpk%3D"
}
},
{
"automation_session": {
"name": null,
"duration": 45,
"os": "OS X",
"os_version": "El Capitan",
"browser_version": "9.1",
"browser": "safari",
"device": null,
"status": "done",
"hashed_id": "0c60211cab5840456ac824443e3be99b195597b5",
"reason": null,
"build_name": "Local run 2017 07 27T17:31:03.314Z",
"project_name": "noty",
"logs": "https://www.browserstack.com/automate/builds/7d2483377687d162b9bc20fcaf3cb1bfb8f5bec0/sessions/0c60211cab5840456ac824443e3be99b195597b5/logs",
"browser_url": "https://www.browserstack.com/automate/builds/7d2483377687d162b9bc20fcaf3cb1bfb8f5bec0/sessions/0c60211cab5840456ac824443e3be99b195597b5",
"public_url": "https://www.browserstack.com/automate/builds/7d2483377687d162b9bc20fcaf3cb1bfb8f5bec0/sessions/0c60211cab5840456ac824443e3be99b195597b5?auth_token=9daf8b81531fe858108d9d76317b171c7dca69dee3ac3a25e065810fd353b837",
"video_url": "https://www.browserstack.com/s3-upload/bs-video-logs-euw/s3-eu-west-1/0c60211cab5840456ac824443e3be99b195597b5/video-0c60211cab5840456ac824443e3be99b195597b5.mp4?AWSAccessKeyId=AKIAIN2TCEEW2SVRV5JA\u0026Expires=1509231864\u0026Signature=p32SrCXGkJ15m79Gvxq86P1tzXU%3D\u0026response-content-type=video%2Fmp4",
"browser_console_logs_url": "https://www.browserstack.com/s3-upload/bs-selenium-logs-euw/s3-eu-west-1/0c60211cab5840456ac824443e3be99b195597b5/0c60211cab5840456ac824443e3be99b195597b5-console-logs.txt?AWSAccessKeyId=AKIAIN2TCEEW2SVRV5JA\u0026Expires=1509231864\u0026Signature=E6AhIFzy%2FHX5QD6%2BUd1T8WPWhXY%3D\u0026response-content-type=text%2Fplain",
"har_logs_url": "https://www.browserstack.com/s3-upload/bs-video-logs-euw/s3-eu-west-1/0c60211cab5840456ac824443e3be99b195597b5/0c60211cab5840456ac824443e3be99b195597b5-har-logs.txt?AWSAccessKeyId=AKIAIN2TCEEW2SVRV5JA\u0026Expires=1509231864\u0026Signature=CIaBXl9nhoeip5EEktV5Rqrg7vI%3D"
}
},
{
"automation_session": {
"name": null,
"duration": 50,
"os": "Windows",
"os_version": "10",
"browser_version": "54.0",
"browser": "firefox",
"device": null,
"status": "done",
"hashed_id": "336cf3a8db5363d7683f01392d4d328fce18838a",
"reason": null,
"build_name": "Local run 2017 07 27T17:31:03.314Z",
"project_name": "noty",
"logs": "https://www.browserstack.com/automate/builds/7d2483377687d162b9bc20fcaf3cb1bfb8f5bec0/sessions/336cf3a8db5363d7683f01392d4d328fce18838a/logs",
"browser_url": "https://www.browserstack.com/automate/builds/7d2483377687d162b9bc20fcaf3cb1bfb8f5bec0/sessions/336cf3a8db5363d7683f01392d4d328fce18838a",
"public_url": "https://www.browserstack.com/automate/builds/7d2483377687d162b9bc20fcaf3cb1bfb8f5bec0/sessions/336cf3a8db5363d7683f01392d4d328fce18838a?auth_token=e93ad65f77003c53f0e7392f2bbd38d56811d1d6ce4e1f9f098494caa240ef21",
"video_url": "https://www.browserstack.com/s3-upload/bs-video-logs-euw/s3-eu-west-1/336cf3a8db5363d7683f01392d4d328fce18838a/video-336cf3a8db5363d7683f01392d4d328fce18838a.mp4?AWSAccessKeyId=AKIAIN2TCEEW2SVRV5JA\u0026Expires=1509231864\u0026Signature=rJTPrYODLubpcgwCqZsW2mXo0JY%3D\u0026response-content-type=video%2Fmp4",
"browser_console_logs_url": "https://www.browserstack.com/s3-upload/bs-selenium-logs-euw/s3-eu-west-1/336cf3a8db5363d7683f01392d4d328fce18838a/336cf3a8db5363d7683f01392d4d328fce18838a-console-logs.txt?AWSAccessKeyId=AKIAIN2TCEEW2SVRV5JA\u0026Expires=1509231864\u0026Signature=FQCd3lZU3tixlx9j0EiqqjAUnYY%3D\u0026response-content-type=text%2Fplain",
"har_logs_url": "https://www.browserstack.com/s3-upload/bs-video-logs-euw/s3-eu-west-1/336cf3a8db5363d7683f01392d4d328fce18838a/336cf3a8db5363d7683f01392d4d328fce18838a-har-logs.txt?AWSAccessKeyId=AKIAIN2TCEEW2SVRV5JA\u0026Expires=1509231864\u0026Signature=44zYIcazKHQzvD2F%2BEmhUFjwmHg%3D"
}
},
{
"automation_session": {
"name": null,
"duration": 47,
"os": "Windows",
"os_version": "10",
"browser_version": "15.0",
"browser": "edge",
"device": null,
"status": "done",
"hashed_id": "a2bb1f252f478c5b5cd4fdc06158830305120ea2",
"reason": null,
"build_name": "Local run 2017 07 27T17:31:03.314Z",
"project_name": "noty",
"logs": "https://www.browserstack.com/automate/builds/7d2483377687d162b9bc20fcaf3cb1bfb8f5bec0/sessions/a2bb1f252f478c5b5cd4fdc06158830305120ea2/logs",
"browser_url": "https://www.browserstack.com/automate/builds/7d2483377687d162b9bc20fcaf3cb1bfb8f5bec0/sessions/a2bb1f252f478c5b5cd4fdc06158830305120ea2",
"public_url": "https://www.browserstack.com/automate/builds/7d2483377687d162b9bc20fcaf3cb1bfb8f5bec0/sessions/a2bb1f252f478c5b5cd4fdc06158830305120ea2?auth_token=c75ad2904602c489145eaf2ce18b8f5723a843cb6c8dcc62a60982dc6109ef27",
"video_url": "https://www.browserstack.com/s3-upload/bs-video-logs-euw/s3-eu-west-1/a2bb1f252f478c5b5cd4fdc06158830305120ea2/video-a2bb1f252f478c5b5cd4fdc06158830305120ea2.mp4?AWSAccessKeyId=AKIAIN2TCEEW2SVRV5JA\u0026Expires=1509231864\u0026Signature=7Jf1rpd9%2FUvHyI3wSIwdYBsD1JE%3D\u0026response-content-type=video%2Fmp4",
"browser_console_logs_url": "https://www.browserstack.com/s3-upload/bs-selenium-logs-euw/s3-eu-west-1/a2bb1f252f478c5b5cd4fdc06158830305120ea2/a2bb1f252f478c5b5cd4fdc06158830305120ea2-console-logs.txt?AWSAccessKeyId=AKIAIN2TCEEW2SVRV5JA\u0026Expires=1509231864\u0026Signature=4soYSJ2wA1By7Oohu8047VYYE30%3D\u0026response-content-type=text%2Fplain",
"har_logs_url": "https://www.browserstack.com/s3-upload/bs-video-logs-euw/s3-eu-west-1/a2bb1f252f478c5b5cd4fdc06158830305120ea2/a2bb1f252f478c5b5cd4fdc06158830305120ea2-har-logs.txt?AWSAccessKeyId=AKIAIN2TCEEW2SVRV5JA\u0026Expires=1509231864\u0026Signature=a%2BVdRuZNZPDx%2BqOg90n3WzIP8lU%3D"
}
},
{
"automation_session": {
"name": null,
"duration": 30,
"os": "Windows",
"os_version": "8",
"browser_version": "10.0",
"browser": "ie",
"device": null,
"status": "done",
"hashed_id": "d85b895f81c51f9cd5c72c225c9f155b331902c6",
"reason": null,
"build_name": "Local run 2017 07 27T17:31:03.314Z",
"project_name": "noty",
"logs": "https://www.browserstack.com/automate/builds/7d2483377687d162b9bc20fcaf3cb1bfb8f5bec0/sessions/d85b895f81c51f9cd5c72c225c9f155b331902c6/logs",
"browser_url": "https://www.browserstack.com/automate/builds/7d2483377687d162b9bc20fcaf3cb1bfb8f5bec0/sessions/d85b895f81c51f9cd5c72c225c9f155b331902c6",
"public_url": "https://www.browserstack.com/automate/builds/7d2483377687d162b9bc20fcaf3cb1bfb8f5bec0/sessions/d85b895f81c51f9cd5c72c225c9f155b331902c6?auth_token=bd85550ce628686d6485062a32cc869abf2dcb7a2b9862b3884ebc7d4283d344",
"video_url": "https://www.browserstack.com/s3-upload/bs-video-logs-euw/s3-eu-west-1/d85b895f81c51f9cd5c72c225c9f155b331902c6/video-d85b895f81c51f9cd5c72c225c9f155b331902c6.mp4?AWSAccessKeyId=AKIAIN2TCEEW2SVRV5JA\u0026Expires=1509231864\u0026Signature=TZYrsY8GWzdcXP0IrAvQ2LisTQQ%3D\u0026response-content-type=video%2Fmp4",
"browser_console_logs_url": "https://www.browserstack.com/s3-upload/bs-selenium-logs-euw/s3-eu-west-1/d85b895f81c51f9cd5c72c225c9f155b331902c6/d85b895f81c51f9cd5c72c225c9f155b331902c6-console-logs.txt?AWSAccessKeyId=AKIAIN2TCEEW2SVRV5JA\u0026Expires=1509231864\u0026Signature=yQkCo8qp1BkJU5tXN%2FgEZaGjTzU%3D\u0026response-content-type=text%2Fplain",
"har_logs_url": "https://www.browserstack.com/s3-upload/bs-video-logs-euw/s3-eu-west-1/d85b895f81c51f9cd5c72c225c9f155b331902c6/d85b895f81c51f9cd5c72c225c9f155b331902c6-har-logs.txt?AWSAccessKeyId=AKIAIN2TCEEW2SVRV5JA\u0026Expires=1509231864\u0026Signature=LIp46ukF%2FZunjjONYzweREZP73s%3D"
}
}
]
================================================
FILE: browserstack.json
================================================
{
"test_framework": "qunit",
"test_path": "test/index.html",
"browsers": [
{
"browser": "ie",
"browser_version": "10",
"os": "Windows",
"os_version": "8"
},
{
"browser": "edge",
"browser_version": "latest",
"os": "Windows",
"os_version": "10"
},
{
"browser": "firefox",
"browser_version": "latest",
"os": "Windows",
"os_version": "10"
},
{
"browser": "chrome",
"browser_version": "latest",
"os": "Windows",
"os_version": "10"
},
{
"browser": "opera",
"browser_version": "latest",
"os": "Windows",
"os_version": "10"
},
{
"browser": "safari",
"browser_version": "latest",
"os": "OS X",
"os_version": "El Capitan"
}
]
}
================================================
FILE: composer.json
================================================
{
"name": "needim/noty",
"description": "Noty is a library that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog.",
"type": "library",
"license": "MIT",
"homepage": "http://ned.im/noty",
"keywords": [
"noty",
"notification"
],
"authors": [
{
"name": "Nedim Arabaci",
"homepage": "http://ned.im",
"role": "Developer"
}
],
"minimum-stability": "dev"
}
================================================
FILE: demo/animate.css
================================================
@charset "UTF-8";
/*!
* animate.css -http://daneden.me/animate
* Version - 3.5.1
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2016 Daniel Eden
*/
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
@-webkit-keyframes bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0,-4px,0);
transform: translate3d(0,-4px,0);
}
}
@keyframes bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0,-4px,0);
transform: translate3d(0,-4px,0);
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
@-webkit-keyframes flash {
from, 50%, to {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
@keyframes flash {
from, 50%, to {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.flash {
-webkit-animation-name: flash;
animation-name: flash;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}
@-webkit-keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(.95, 1.05, 1);
transform: scale3d(.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(.95, 1.05, 1);
transform: scale3d(.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
@-webkit-keyframes shake {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
@keyframes shake {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
@-webkit-keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.headShake {
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-name: headShake;
animation-name: headShake;
}
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
@keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
.swing {
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
}
@-webkit-keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%, 20% {
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%, 20% {
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.tada {
-webkit-animation-name: tada;
animation-name: tada;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
from {
-webkit-transform: none;
transform: none;
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
-webkit-transform: none;
transform: none;
}
}
@keyframes wobble {
from {
-webkit-transform: none;
transform: none;
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
-webkit-transform: none;
transform: none;
}
}
.wobble {
-webkit-animation-name: wobble;
animation-name: wobble;
}
@-webkit-keyframes jello {
from, 11.1%, to {
-webkit-transform: none;
transform: none;
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
@keyframes jello {
from, 11.1%, to {
-webkit-transform: none;
transform: none;
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
.jello {
-webkit-animation-name: jello;
animation-name: jello;
-webkit-transform-origin: center;
transform-origin: center;
}
@-webkit-keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
@keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
@keyframes bounceInLeft {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
@keyframes bounceInRight {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInUp {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
@-webkit-keyframes bounceOut {
20% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
}
@keyframes bounceOut {
20% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
}
.bounceOut {
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
@keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
.bounceOutDown {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
@keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
@keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
.bounceOutRight {
-webkit-animation-name: bounceOutRight;
animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
@keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
@keyframes fadeOutDownBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
@keyframes fadeOutLeftBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes fadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
@keyframes fadeOutRightBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
@keyframes fadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig;
}
@-webkit-keyframes flip {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
transform: perspective(400px) scale3d(.95, .95, .95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@keyframes flip {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
transform: perspective(400px) scale3d(.95, .95, .95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
.animated.flip {
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip;
}
@-webkit-keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
@-webkit-keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
.flipInY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInY;
animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
@keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
.flipOutX {
-webkit-animation-name: flipOutX;
animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
@keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
.flipOutY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
animation-name: flipOutY;
}
@-webkit-keyframes lightSpeedIn {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1;
}
to {
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes lightSpeedIn {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1;
}
to {
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOut {
from {
opacity: 1;
}
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
@keyframes lightSpeedOut {
from {
opacity: 1;
}
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
.lightSpeedOut {
-webkit-animation-name: lightSpeedOut;
animation-name: lightSpeedOut;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
@-webkit-keyframes rotateIn {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes rotateIn {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
.rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn;
}
@-webkit-keyframes rotateInDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes rotateInDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft;
}
@-webkit-keyframes rotateInDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes rotateInDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight;
}
@-webkit-keyframes rotateInUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes rotateInUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft;
}
@-webkit-keyframes rotateInUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes rotateInUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight;
}
@-webkit-keyframes rotateOut {
from {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}
@keyframes rotateOut {
from {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}
.rotateOut {
-webkit-animation-name: rotateOut;
animation-name: rotateOut;
}
@-webkit-keyframes rotateOutDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
@keyframes rotateOutDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
@keyframes rotateOutDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight;
}
@-webkit-keyframes rotateOutUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
@keyframes rotateOutUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft;
}
@-webkit-keyframes rotateOutUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}
@keyframes rotateOutUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight;
}
@-webkit-keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%, 60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40%, 80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
@keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%, 60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40%, 80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
.hinge {
-webkit-animation-name: hinge;
animation-name: hinge;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes rollIn {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
@keyframes rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
.rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut;
}
@-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
@keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomInDown {
-webkit-animation-name: zoomInDown;
animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
@keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomInLeft {
-webkit-animation-name: zoomInLeft;
animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
@keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomInRight {
-webkit-animation-name: zoomInRight;
animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
@keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomInUp {
-webkit-animation-name: zoomInUp;
animation-name: zoomInUp;
}
@-webkit-keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
@keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
.zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
to {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
@keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
to {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomOutDown {
-webkit-animation-name: zoomOutDown;
animation-name: zoomOutDown;
}
@-webkit-keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
transform: scale(.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
}
}
@keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
transform: scale(.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
}
}
.zoomOutLeft {
-webkit-animation-name: zoomOutLeft;
animation-name: zoomOutLeft;
}
@-webkit-keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(.1) translate3d(2000px, 0, 0);
transform: scale(.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center;
}
}
@keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(.1) translate3d(2000px, 0, 0);
transform: scale(.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center;
}
}
.zoomOutRight {
-webkit-animation-name: zoomOutRight;
animation-name: zoomOutRight;
}
@-webkit-keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
to {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
@keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
to {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomOutUp {
-webkit-animation-name: zoomOutUp;
animation-name: zoomOutUp;
}
@-webkit-keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
}
@-webkit-keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
.slideOutDown {
-webkit-animation-name: slideOutDown;
animation-name: slideOutDown;
}
@-webkit-keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
.slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
}
================================================
FILE: demo/bouncejs/bounce.js
================================================
/**
* Bounce.js 0.8.2
* MIT license
*/
!function(e){if("object"==typeof exports)module.exports=e();else if("function"==typeof define&&define.amd)define(e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.Bounce=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o= 1) {
return 1;
}
t = ratio * this.limit;
return 1 - this.exponent(t) * this.oscillation(t);
};
BounceEasing.prototype.calculateOmega = function(bounces, limit) {
return (this.bounces + 0.5) * Math.PI / this.limit;
};
BounceEasing.prototype.exponent = function(t) {
return Math.pow(Math.E, -this.alpha * t);
};
BounceEasing.prototype.oscillation = function(t) {
return Math.cos(this.omega * t);
};
BounceEasing.prototype.serialize = function() {
return {
stiffness: this.stiffness,
bounces: this.bounces
};
};
return BounceEasing;
})(Easing);
module.exports = BounceEasing;
},{"./index":9}],7:[function(_dereq_,module,exports){
var BounceEasing, HardBounceEasing,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
BounceEasing = _dereq_("./bounce");
HardBounceEasing = (function(_super) {
__extends(HardBounceEasing, _super);
function HardBounceEasing() {
return HardBounceEasing.__super__.constructor.apply(this, arguments);
}
HardBounceEasing.prototype.oscillation = function(t) {
return Math.abs(Math.cos(this.omega * t));
};
return HardBounceEasing;
})(BounceEasing);
module.exports = HardBounceEasing;
},{"./bounce":6}],8:[function(_dereq_,module,exports){
var HardSwayEasing, SwayEasing,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
SwayEasing = _dereq_("./sway");
HardSwayEasing = (function(_super) {
__extends(HardSwayEasing, _super);
function HardSwayEasing() {
return HardSwayEasing.__super__.constructor.apply(this, arguments);
}
HardSwayEasing.prototype.oscillation = function(t) {
return Math.abs(Math.sin(this.omega * t));
};
return HardSwayEasing;
})(SwayEasing);
module.exports = HardSwayEasing;
},{"./sway":10}],9:[function(_dereq_,module,exports){
var Easing, MathHelpers;
MathHelpers = _dereq_("../math/helpers");
Easing = (function() {
function Easing() {}
Easing.prototype.calculate = function(ratio) {
return ratio;
};
Easing.prototype.serialize = function() {
return {};
};
Easing.prototype.findOptimalKeyPoints = function(threshold, resolution) {
var area, halfway, i, keyPoint, keyPoints, loops, result, values;
if (threshold == null) {
threshold = 1.0;
}
if (resolution == null) {
resolution = 1000;
}
keyPoints = [0];
values = (function() {
var _i, _results;
_results = [];
for (i = _i = 0; 0 <= resolution ? _i < resolution : _i > resolution; i = 0 <= resolution ? ++_i : --_i) {
_results.push(this.calculate(i / resolution));
}
return _results;
}).call(this);
keyPoints = keyPoints.concat(MathHelpers.findTurningPoints(values));
keyPoints.push(resolution - 1);
i = 0;
loops = 1000;
while (loops--) {
if (i === keyPoints.length - 1) {
break;
}
area = MathHelpers.areaBetweenLineAndCurve(values, keyPoints[i], keyPoints[i + 1]);
if (area <= threshold) {
i++;
} else {
halfway = Math.round(keyPoints[i] + (keyPoints[i + 1] - keyPoints[i]) / 2);
keyPoints.splice(i + 1, 0, halfway);
}
}
if (loops === 0) {
return [];
}
return result = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = keyPoints.length; _i < _len; _i++) {
keyPoint = keyPoints[_i];
_results.push(keyPoint / (resolution - 1));
}
return _results;
})();
};
return Easing;
})();
module.exports = Easing;
},{"../math/helpers":12}],10:[function(_dereq_,module,exports){
var BounceEasing, SwayEasing,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
BounceEasing = _dereq_("./bounce");
SwayEasing = (function(_super) {
__extends(SwayEasing, _super);
function SwayEasing() {
return SwayEasing.__super__.constructor.apply(this, arguments);
}
SwayEasing.prototype.calculate = function(ratio) {
var t;
if (ratio >= 1) {
return 0;
}
t = ratio * this.limit;
return this.exponent(t) * this.oscillation(t);
};
SwayEasing.prototype.calculateOmega = function(bounces, limit) {
return this.bounces * Math.PI / this.limit;
};
SwayEasing.prototype.oscillation = function(t) {
return Math.sin(this.omega * t);
};
return SwayEasing;
})(BounceEasing);
module.exports = SwayEasing;
},{"./bounce":6}],11:[function(_dereq_,module,exports){
var Bounce, ComponentClasses, Matrix4D;
Matrix4D = _dereq_("./math/matrix4d");
ComponentClasses = {
scale: _dereq_("./components/scale"),
rotate: _dereq_("./components/rotate"),
translate: _dereq_("./components/translate"),
skew: _dereq_("./components/skew")
};
Bounce = (function() {
Bounce.FPS = 30;
Bounce.counter = 1;
Bounce.prototype.components = null;
Bounce.prototype.duration = 0;
function Bounce() {
this.components = [];
}
Bounce.prototype.scale = function(options) {
return this.addComponent(new ComponentClasses["scale"](options));
};
Bounce.prototype.rotate = function(options) {
return this.addComponent(new ComponentClasses["rotate"](options));
};
Bounce.prototype.translate = function(options) {
return this.addComponent(new ComponentClasses["translate"](options));
};
Bounce.prototype.skew = function(options) {
return this.addComponent(new ComponentClasses["skew"](options));
};
Bounce.prototype.addComponent = function(component) {
this.components.push(component);
this.updateDuration();
return this;
};
Bounce.prototype.serialize = function() {
var component, serialized, _i, _len, _ref;
serialized = [];
_ref = this.components;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
component = _ref[_i];
serialized.push(component.serialize());
}
return serialized;
};
Bounce.prototype.deserialize = function(serialized) {
var options, _i, _len;
for (_i = 0, _len = serialized.length; _i < _len; _i++) {
options = serialized[_i];
this.addComponent(new ComponentClasses[options.type](options));
}
return this;
};
Bounce.prototype.updateDuration = function() {
return this.duration = this.components.map(function(component) {
return component.duration + component.delay;
}).reduce(function(a, b) {
return Math.max(a, b);
});
};
Bounce.prototype.define = function(name) {
this.name = name || Bounce.generateName();
this.styleElement = document.createElement("style");
this.styleElement.innerHTML = this.getKeyframeCSS({
name: this.name,
prefix: true
});
document.body.appendChild(this.styleElement);
return this;
};
Bounce.prototype.applyTo = function(elements, options) {
var css, deferred, element, prefix, prefixes, _i, _j, _len, _len1, _ref;
if (options == null) {
options = {};
}
this.define();
if (!elements.length) {
elements = [elements];
}
prefixes = this.getPrefixes();
deferred = null;
if (window.jQuery && window.jQuery.Deferred) {
deferred = new window.jQuery.Deferred();
}
for (_i = 0, _len = elements.length; _i < _len; _i++) {
element = elements[_i];
_ref = prefixes.animation;
for (_j = 0, _len1 = _ref.length; _j < _len1; _j++) {
prefix = _ref[_j];
css = [this.name, "" + this.duration + "ms", "linear", "both"];
if (options.loop) {
css.push("infinite");
}
element.style["" + prefix + "animation"] = css.join(" ");
}
}
if (!options.loop) {
setTimeout(((function(_this) {
return function() {
if (options.remove) {
_this.remove();
}
if (typeof options.onComplete === "function") {
options.onComplete();
}
if (deferred) {
return deferred.resolve();
}
};
})(this)), this.duration);
}
return deferred;
};
Bounce.prototype.remove = function() {
var _ref;
if (!this.styleElement) {
return;
}
if (this.styleElement.remove) {
return this.styleElement.remove();
} else {
return (_ref = this.styleElement.parentNode) != null ? _ref.removeChild(this.styleElement) : void 0;
}
};
Bounce.prototype.getPrefixes = function(force) {
var prefixes, style;
prefixes = {
transform: [""],
animation: [""]
};
style = document.createElement("dummy").style;
if (force || (!("transform" in style) && "webkitTransform" in style)) {
prefixes.transform = ["-webkit-", ""];
}
if (force || (!("animation" in style) && "webkitAnimation" in style)) {
prefixes.animation = ["-webkit-", ""];
}
return prefixes;
};
Bounce.prototype.getKeyframeCSS = function(options) {
var animations, key, keyframeList, keyframes, matrix, prefix, prefixes, transformString, transforms, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2;
if (options == null) {
options = {};
}
this.name = options.name || Bounce.generateName();
prefixes = {
transform: [""],
animation: [""]
};
if (options.prefix || options.forcePrefix) {
prefixes = this.getPrefixes(options.forcePrefix);
}
keyframeList = [];
keyframes = this.getKeyframes(options);
_ref = this.keys;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
key = _ref[_i];
matrix = keyframes[key];
transformString = "matrix3d" + matrix;
transforms = [];
_ref1 = prefixes.transform;
for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
prefix = _ref1[_j];
transforms.push("" + prefix + "transform: " + transformString + ";");
}
keyframeList.push("" + (Math.round(key * 100 * 100) / 100) + "% { " + (transforms.join(" ")) + " }");
}
animations = [];
_ref2 = prefixes.animation;
for (_k = 0, _len2 = _ref2.length; _k < _len2; _k++) {
prefix = _ref2[_k];
animations.push("@" + prefix + "keyframes " + this.name + " { \n " + (keyframeList.join("\n ")) + " \n}");
}
return animations.join("\n\n");
};
Bounce.prototype.getKeyframes = function(options) {
var component, componentKeys, currentTime, frames, i, key, keyframes, keys, matrix, ratio, _i, _j, _k, _l, _len, _len1, _len2, _ref, _ref1;
if (options == null) {
options = {};
}
keys = [0, 1];
if (options.optimized) {
_ref = this.components;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
component = _ref[_i];
componentKeys = component.easingObject.findOptimalKeyPoints().map((function(_this) {
return function(key) {
return (key * component.duration / _this.duration) + (component.delay / _this.duration);
};
})(this));
if (component.delay) {
componentKeys.push((component.delay / this.duration) - 0.001);
}
keys = keys.concat(componentKeys);
}
} else {
frames = Math.round((this.duration / 1000) * Bounce.FPS);
for (i = _j = 0; 0 <= frames ? _j <= frames : _j >= frames; i = 0 <= frames ? ++_j : --_j) {
keys.push(i / frames);
}
}
keys = keys.sort(function(a, b) {
return a - b;
});
this.keys = [];
keyframes = {};
for (_k = 0, _len1 = keys.length; _k < _len1; _k++) {
key = keys[_k];
if (keyframes[key]) {
continue;
}
matrix = new Matrix4D().identity();
_ref1 = this.components;
for (_l = 0, _len2 = _ref1.length; _l < _len2; _l++) {
component = _ref1[_l];
currentTime = key * this.duration;
if ((component.delay - currentTime) > 1e-8) {
continue;
}
ratio = (key - component.delay / this.duration) / (component.duration / this.duration);
matrix.multiply(component.getEasedMatrix(ratio));
}
this.keys.push(key);
keyframes[key] = matrix.transpose().toFixed(3);
}
return keyframes;
};
Bounce.generateName = function() {
return "animation-" + (Bounce.counter++);
};
Bounce.isSupported = function() {
var property, propertyIsSupported, propertyList, propertyLists, style, _i, _j, _len, _len1;
style = document.createElement("dummy").style;
propertyLists = [["transform", "webkitTransform"], ["animation", "webkitAnimation"]];
for (_i = 0, _len = propertyLists.length; _i < _len; _i++) {
propertyList = propertyLists[_i];
propertyIsSupported = false;
for (_j = 0, _len1 = propertyList.length; _j < _len1; _j++) {
property = propertyList[_j];
propertyIsSupported || (propertyIsSupported = property in style);
}
if (!propertyIsSupported) {
return false;
}
}
return true;
};
return Bounce;
})();
module.exports = Bounce;
},{"./components/rotate":2,"./components/scale":3,"./components/skew":4,"./components/translate":5,"./math/matrix4d":13}],12:[function(_dereq_,module,exports){
var MathHelpers;
MathHelpers = (function() {
function MathHelpers() {}
MathHelpers.prototype.sign = function(value) {
if (value < 0) {
return -1;
}
return 1;
};
MathHelpers.prototype.findTurningPoints = function(values) {
var i, signA, signB, turningPoints, _i, _ref;
turningPoints = [];
for (i = _i = 1, _ref = values.length - 1; 1 <= _ref ? _i < _ref : _i > _ref; i = 1 <= _ref ? ++_i : --_i) {
signA = this.sign(values[i] - values[i - 1]);
signB = this.sign(values[i + 1] - values[i]);
if (signA !== signB) {
turningPoints.push(i);
}
}
return turningPoints;
};
MathHelpers.prototype.areaBetweenLineAndCurve = function(values, start, end) {
var area, curveValue, i, length, lineValue, yEnd, yStart, _i;
length = end - start;
yStart = values[start];
yEnd = values[end];
area = 0;
for (i = _i = 0; 0 <= length ? _i <= length : _i >= length; i = 0 <= length ? ++_i : --_i) {
curveValue = values[start + i];
lineValue = yStart + (i / length) * (yEnd - yStart);
area += Math.abs(lineValue - curveValue);
}
return area;
};
return MathHelpers;
})();
module.exports = new MathHelpers;
},{}],13:[function(_dereq_,module,exports){
var Matrix4D;
Matrix4D = (function() {
Matrix4D.prototype._array = null;
function Matrix4D(array) {
this._array = (array != null ? array.slice(0) : void 0) || [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
}
Matrix4D.prototype.equals = function(matrix) {
return this.toString() === matrix.toString();
};
Matrix4D.prototype.identity = function() {
this.setArray([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
return this;
};
Matrix4D.prototype.multiply = function(matrix) {
var i, j, k, res, value, _i, _j, _k;
res = new Matrix4D;
for (i = _i = 0; _i < 4; i = ++_i) {
for (j = _j = 0; _j < 4; j = ++_j) {
for (k = _k = 0; _k < 4; k = ++_k) {
value = res.get(i, j) + this.get(i, k) * matrix.get(k, j);
res.set(i, j, value);
}
}
}
return this.copy(res);
};
Matrix4D.prototype.transpose = function() {
var a;
a = this.getArray();
this.setArray([a[0], a[4], a[8], a[12], a[1], a[5], a[9], a[13], a[2], a[6], a[10], a[14], a[3], a[7], a[11], a[15]]);
return this;
};
Matrix4D.prototype.get = function(row, column) {
return this.getArray()[row * 4 + column];
};
Matrix4D.prototype.set = function(row, column, value) {
return this._array[row * 4 + column] = value;
};
Matrix4D.prototype.copy = function(matrix) {
this._array = matrix.getArray();
return this;
};
Matrix4D.prototype.clone = function() {
return new Matrix4D(this.getArray());
};
Matrix4D.prototype.getArray = function() {
return this._array.slice(0);
};
Matrix4D.prototype.setArray = function(array) {
this._array = array;
return this;
};
Matrix4D.prototype.toString = function() {
return "(" + (this.getArray().join(", ")) + ")";
};
Matrix4D.prototype.toFixed = function(n) {
var value;
this._array = (function() {
var _i, _len, _ref, _results;
_ref = this._array;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
value = _ref[_i];
_results.push(parseFloat(value.toFixed(n)));
}
return _results;
}).call(this);
return this;
};
return Matrix4D;
})();
module.exports = Matrix4D;
},{}],14:[function(_dereq_,module,exports){
var Vector2D;
Vector2D = (function() {
Vector2D.prototype.x = 0;
Vector2D.prototype.y = 0;
function Vector2D(x, y) {
this.x = x != null ? x : 0;
this.y = y != null ? y : 0;
}
Vector2D.prototype.add = function(vector) {
if (!Vector2D.isVector2D(vector)) {
return this._addScalar(vector);
}
this.x += vector.x;
this.y += vector.y;
return this;
};
Vector2D.prototype._addScalar = function(n) {
this.x += n;
this.y += n;
return this;
};
Vector2D.prototype.subtract = function(vector) {
if (!Vector2D.isVector2D(vector)) {
return this._subtractScalar(vector);
}
this.x -= vector.x;
this.y -= vector.y;
return this;
};
Vector2D.prototype._subtractScalar = function(n) {
return this._addScalar(-n);
};
Vector2D.prototype.multiply = function(vector) {
if (!Vector2D.isVector2D(vector)) {
return this._multiplyScalar(vector);
}
this.x *= vector.x;
this.y *= vector.y;
return this;
};
Vector2D.prototype._multiplyScalar = function(n) {
this.x *= n;
this.y *= n;
return this;
};
Vector2D.prototype.divide = function(vector) {
if (!Vector2D.isVector2D(vector)) {
return this._divideScalar(vector);
}
this.x /= vector.x;
this.y /= vector.y;
return this;
};
Vector2D.prototype._divideScalar = function(n) {
return this._multiplyScalar(1 / n);
};
Vector2D.prototype.clone = function() {
return new Vector2D(this.x, this.y);
};
Vector2D.prototype.copy = function(vector) {
this.x = vector.x;
this.y = vector.y;
return this;
};
Vector2D.prototype.equals = function(vector) {
return vector.x === this.x && vector.y === this.y;
};
Vector2D.prototype.toString = function() {
return "(" + this.x + ", " + this.y + ")";
};
Vector2D.prototype.toFixed = function(n) {
this.x = parseFloat(this.x.toFixed(n));
this.y = parseFloat(this.y.toFixed(n));
return this;
};
Vector2D.prototype.toArray = function() {
return [this.x, this.y];
};
Vector2D.isVector2D = function(item) {
return item instanceof Vector2D;
};
return Vector2D;
})();
module.exports = Vector2D;
},{}]},{},[11])
(11)
});
================================================
FILE: demo/demo.css
================================================
body {
font-family: 'GothamRoundedLight', sans-serif;
font-weight: 300;
background-color: rgb(255, 253, 250);
background-image: url('bg-dot.png');
background-size: 41px 40px;
background-position: 0 0;
background-repeat: repeat;
}
a, strong {
color: inherit;
font-family: 'GothamRoundedMedium', sans-serif;
}
a:hover {
text-decoration: none;
}
.activity-item i {
float: left;
margin-top: 3px;
font-size: 16px;
}
div.activity {
margin-left: 28px;
line-height: 1.4em;
}
div.activity-item {
padding: 7px 12px;
}
div.activity > span {
display: block;
font-size: .8em;
}
#custom_container {
border: 2px solid #ccc;
width: 500px;
max-width: 100%;
margin: 40px auto;
min-height: 100px;
border-radius: 5px;
background: rgba(255, 255, 255, .5);
overflow: hidden;
}
.logo {
text-align: center;
background: rgb(255, 253, 250);
padding: 0 20px;
width: 200px;
margin: 0 auto;
}
select:focus {
outline: none;
}
select {
/* General styling */
height: 30px;
width: 137px;
padding-left: 10px;
color: #222;
border-radius: 3px;
border: 0 solid #222;
margin: 0 3px;
/* Removes the default