├── static ├── .gitkeep ├── aee.png ├── aef.png ├── aei.png ├── seq.png ├── list.png ├── logo.png ├── next.png ├── pause.png ├── play.png ├── prev.png ├── banner1.jpg ├── banner2.jpg ├── banner3.jpg ├── banner4.jpg ├── stick_bg.png ├── cd_wrapper.png ├── list_hover.png ├── next_hover.png ├── pause_hover.png ├── play_hover.png ├── player-bar.png ├── prev_hover.png ├── seq_hover.png ├── default_cover.png ├── rage_loading.png ├── user-default.png ├── banner-item-load.png ├── playbar_btn_next.png ├── playbar_btn_play.png ├── playbar_btn_pause.png ├── playbar_btn_playlist.png ├── placeholder_disk_play_song.png └── placeholder_disk_play_program.png ├── .eslintignore ├── config ├── prod.env.js ├── test.env.js ├── dev.env.js └── index.js ├── screenshots ├── 1.png ├── 2.png ├── 3.gif ├── 4.gif └── 4444.png ├── src ├── assets │ ├── logo.png │ ├── theme.less │ └── animate.css ├── views │ ├── hotSinger.vue │ ├── leaderBoard.vue │ ├── index.vue │ ├── songList.vue │ ├── rage.vue │ ├── playListDetail.vue │ └── playerDetail.vue ├── utils │ └── diyaxios.js ├── App.vue ├── main.js ├── router │ └── router.js ├── api │ └── index.js ├── components │ ├── list.vue │ └── playerBar.vue └── store │ └── index.js ├── test ├── unit │ ├── .eslintrc │ ├── specs │ │ └── Hello.spec.js │ ├── index.js │ └── karma.conf.js └── e2e │ ├── specs │ └── test.js │ ├── custom-assertions │ └── elementCount.js │ ├── runner.js │ └── nightwatch.conf.js ├── .gitignore ├── .editorconfig ├── .babelrc ├── .eslintrc.js ├── LICENSE ├── README.md ├── index.html └── package.json /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /static/aee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/aee.png -------------------------------------------------------------------------------- /static/aef.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/aef.png -------------------------------------------------------------------------------- /static/aei.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/aei.png -------------------------------------------------------------------------------- /static/seq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/seq.png -------------------------------------------------------------------------------- /screenshots/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/screenshots/1.png -------------------------------------------------------------------------------- /screenshots/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/screenshots/2.png -------------------------------------------------------------------------------- /screenshots/3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/screenshots/3.gif -------------------------------------------------------------------------------- /screenshots/4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/screenshots/4.gif -------------------------------------------------------------------------------- /static/list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/list.png -------------------------------------------------------------------------------- /static/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/logo.png -------------------------------------------------------------------------------- /static/next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/next.png -------------------------------------------------------------------------------- /static/pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/pause.png -------------------------------------------------------------------------------- /static/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/play.png -------------------------------------------------------------------------------- /static/prev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/prev.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /static/banner1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/banner1.jpg -------------------------------------------------------------------------------- /static/banner2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/banner2.jpg -------------------------------------------------------------------------------- /static/banner3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/banner3.jpg -------------------------------------------------------------------------------- /static/banner4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/banner4.jpg -------------------------------------------------------------------------------- /static/stick_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/stick_bg.png -------------------------------------------------------------------------------- /screenshots/4444.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/screenshots/4444.png -------------------------------------------------------------------------------- /static/cd_wrapper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/cd_wrapper.png -------------------------------------------------------------------------------- /static/list_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/list_hover.png -------------------------------------------------------------------------------- /static/next_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/next_hover.png -------------------------------------------------------------------------------- /static/pause_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/pause_hover.png -------------------------------------------------------------------------------- /static/play_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/play_hover.png -------------------------------------------------------------------------------- /static/player-bar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/player-bar.png -------------------------------------------------------------------------------- /static/prev_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/prev_hover.png -------------------------------------------------------------------------------- /static/seq_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/seq_hover.png -------------------------------------------------------------------------------- /static/default_cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/default_cover.png -------------------------------------------------------------------------------- /static/rage_loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/rage_loading.png -------------------------------------------------------------------------------- /static/user-default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/user-default.png -------------------------------------------------------------------------------- /static/banner-item-load.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/banner-item-load.png -------------------------------------------------------------------------------- /static/playbar_btn_next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/playbar_btn_next.png -------------------------------------------------------------------------------- /static/playbar_btn_play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/playbar_btn_play.png -------------------------------------------------------------------------------- /static/playbar_btn_pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/playbar_btn_pause.png -------------------------------------------------------------------------------- /static/playbar_btn_playlist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/playbar_btn_playlist.png -------------------------------------------------------------------------------- /static/placeholder_disk_play_song.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/placeholder_disk_play_song.png -------------------------------------------------------------------------------- /static/placeholder_disk_play_program.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javaswing/NeteaseCloudWebApp/HEAD/static/placeholder_disk_play_program.png -------------------------------------------------------------------------------- /test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | }, 5 | "globals": { 6 | "expect": true, 7 | "sinon": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var devEnv = require('./dev.env') 3 | 4 | module.exports = merge(devEnv, { 5 | NODE_ENV: '"testing"' 6 | }) 7 | -------------------------------------------------------------------------------- /src/views/hotSinger.vue: -------------------------------------------------------------------------------- 1 | 6 | 8 | 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | .vscode/ 5 | .idea/ 6 | npm-debug.log 7 | test/unit/coverage 8 | test/e2e/reports 9 | selenium-debug.log 10 | *.psd 11 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /src/views/leaderBoard.vue: -------------------------------------------------------------------------------- 1 | 6 | 8 | 10 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false, 5 | "env": { 6 | "test": { 7 | "plugins": [ "istanbul" ] 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /test/unit/specs/Hello.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Hello from 'src/components/Hello' 3 | 4 | describe('Hello.vue', () => { 5 | it('should render correct contents', () => { 6 | const vm = new Vue({ 7 | el: document.createElement('div'), 8 | render: (h) => h(Hello) 9 | }) 10 | expect(vm.$el.querySelector('.hello h1').textContent) 11 | .to.equal('Welcome to Your Vue.js App') 12 | }) 13 | }) 14 | -------------------------------------------------------------------------------- /src/utils/diyaxios.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | axios.defaults.timeout = 8000 3 | // 添加请求头 4 | axios.defaults.withCredentials = true 5 | // code状态码200判断 6 | axios.interceptors.response.use((res) => { 7 | if (res.status === 654) { // 百度云请求超时检测 8 | window.alert('请求超时！') 9 | } 10 | if (res.data.code !== 200) { 11 | window.alert('数据返回有误') 12 | return Promise.reject(res) 13 | } 14 | return res.data 15 | }, (error) => { 16 | console.log('promise error:' + error) 17 | return Promise.reject(error) 18 | }) 19 | export default axios 20 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 28 | -------------------------------------------------------------------------------- /test/unit/index.js: -------------------------------------------------------------------------------- 1 | // Polyfill fn.bind() for PhantomJS 2 | /* eslint-disable no-extend-native */ 3 | Function.prototype.bind = require('function-bind') 4 | 5 | // require all test files (files that ends with .spec.js) 6 | const testsContext = require.context('./specs', true, /\.spec$/) 7 | testsContext.keys().forEach(testsContext) 8 | 9 | // require all src files except main.js for coverage. 10 | // you can also change this to match only the subset of files that 11 | // you want coverage for. 12 | const srcContext = require.context('src', true, /^\.\/(?!main(\.js)?$)/) 13 | srcContext.keys().forEach(srcContext) 14 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | parserOptions: { 5 | sourceType: 'module' 6 | }, 7 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 8 | extends: 'standard', 9 | // required to lint *.vue files 10 | plugins: [ 11 | 'html' 12 | ], 13 | // add your custom rules here 14 | 'rules': { 15 | // allow paren-less arrow functions 16 | 'arrow-parens': 0, 17 | // allow async-await 18 | 'generator-star-spacing': 0, 19 | // allow debugger during development 20 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /test/e2e/specs/test.js: -------------------------------------------------------------------------------- 1 | // For authoring Nightwatch tests, see 2 | // http://nightwatchjs.org/guide#usage 3 | 4 | module.exports = { 5 | 'default e2e tests': function (browser) { 6 | // automatically uses dev Server port from /config.index.js 7 | // default: http://localhost:8080 8 | // see nightwatch.conf.js 9 | const devServer = browser.globals.devServerURL 10 | 11 | browser 12 | .url(devServer) 13 | .waitForElementVisible('#app', 5000) 14 | .assert.elementPresent('.hello') 15 | .assert.containsText('h1', 'Welcome to Your Vue.js App') 16 | .assert.elementCount('img', 1) 17 | .end() 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | import Axios from './utils/diyaxios' 4 | import router from './router/router' 5 | import store from './store' 6 | import MuseUI from 'muse-ui' 7 | import Toast from 'vue-easy-toast' 8 | import 'muse-ui/dist/muse-ui.css' 9 | import 'assets/theme.less' 10 | import FastClick from 'fastclick' // 解决移动端300毫秒延迟 11 | if ('addEventListener' in document) { 12 | document.addEventListener('DOMContentLoaded', function () { 13 | FastClick.attach(document.body) 14 | }, false) 15 | } 16 | 17 | Vue.use(MuseUI) 18 | Vue.use(Toast) 19 | Vue.prototype.$http = Axios // 类似于vue-resource的调用方法，之后可以在实例里直接用this.$http.get()等 20 | /* eslint-disable no-new */ 21 | new Vue({ 22 | el: '#app', 23 | router, 24 | store, 25 | template: '', 26 | components: { App } 27 | }) 28 | -------------------------------------------------------------------------------- /test/e2e/custom-assertions/elementCount.js: -------------------------------------------------------------------------------- 1 | // A custom Nightwatch assertion. 2 | // the name of the method is the filename. 3 | // can be used in tests like this: 4 | // 5 | // browser.assert.elementCount(selector, count) 6 | // 7 | // for how to write custom assertions see 8 | // http://nightwatchjs.org/guide#writing-custom-assertions 9 | exports.assertion = function (selector, count) { 10 | this.message = 'Testing if element <' + selector + '> has count: ' + count 11 | this.expected = count 12 | this.pass = function (val) { 13 | return val === this.expected 14 | } 15 | this.value = function (res) { 16 | return res.value 17 | } 18 | this.command = function (cb) { 19 | var self = this 20 | return this.api.execute(function (selector) { 21 | return document.querySelectorAll(selector).length 22 | }, [selector], function (res) { 23 | cb.call(self, res) 24 | }) 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/router/router.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 整个app的路由设置 3 | */ 4 | import Vue from 'vue' 5 | import VueRouter from 'vue-router' 6 | Vue.use(VueRouter) 7 | 8 | const router = new VueRouter({ 9 | routes: [{ 10 | path: '/index', 11 | component: require('../views/index'), 12 | children: [ 13 | { 14 | path: 'rage', 15 | component: require('../views/rage') 16 | }, 17 | { 18 | path: 'songList', 19 | component: require('../views/songList') 20 | }, 21 | { 22 | path: 'leaderBoard', 23 | component: require('../views/leaderBoard') 24 | }, 25 | { 26 | path: 'hotSinger', 27 | component: require('../views/hotSinger') 28 | } 29 | ] 30 | }, { 31 | name: 'playerDetail', 32 | path: '/playerDetail/:id', 33 | component: require('../views/playerDetail') 34 | }, { 35 | path: '/playListDetail/:id', 36 | name: 'playListDetail', 37 | component: require('../views/playListDetail') 38 | }, { 39 | path: '*', redirect: '/index/rage' 40 | }] 41 | }) 42 | 43 | export default router 44 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 javaSwing 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /test/e2e/runner.js: -------------------------------------------------------------------------------- 1 | // 1. start the dev server using production config 2 | process.env.NODE_ENV = 'testing' 3 | var server = require('../../build/dev-server.js') 4 | 5 | // 2. run the nightwatch test suite against it 6 | // to run in additional browsers: 7 | // 1. add an entry in test/e2e/nightwatch.conf.json under "test_settings" 8 | // 2. add it to the --env flag below 9 | // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox` 10 | // For more information on Nightwatch's config file, see 11 | // http://nightwatchjs.org/guide#settings-file 12 | var opts = process.argv.slice(2) 13 | if (opts.indexOf('--config') === -1) { 14 | opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js']) 15 | } 16 | if (opts.indexOf('--env') === -1) { 17 | opts = opts.concat(['--env', 'chrome']) 18 | } 19 | 20 | var spawn = require('cross-spawn') 21 | var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' }) 22 | 23 | runner.on('exit', function (code) { 24 | server.close() 25 | process.exit(code) 26 | }) 27 | 28 | runner.on('error', function (err) { 29 | server.close() 30 | throw err 31 | }) 32 | -------------------------------------------------------------------------------- /src/assets/theme.less: -------------------------------------------------------------------------------- 1 | @import "../../node_modules/muse-ui/less/vars.less"; // 默认基础的变量 2 | 3 | @fontFamily: Roboto, Lato, sans-serif; // 字体 4 | // 主色和强调色 5 | @primaryColor: #ce3d3e; // 主色 6 | @darkerPrimaryColor: #ce3d3e; // 更深的主色 7 | @lighterPrimaryColor: @grey400; // 浅一点的主色 8 | @accentColor: #ce3d3e; // 强调色 9 | @darkerAccentColor: @grey100; // 更深的强调色 10 | @lighterAccentColor: @grey500; // 浅一点的强调色 11 | 12 | // 文本颜色 13 | @textColor: @darkBlack; 14 | @secondaryTextColor: fade(@fullBlack, 54%); 15 | @alternateTextColor: @white; 16 | @borderColor: fade(@fullBlack, 12%); 17 | @disabledColor: fade(@fullBlack, 38%); 18 | 19 | // background 20 | @backgroundColor: @white; // 背景色 21 | @statusBarBackgroundColor: @grey300; // web项目没有状态栏，所以也没有使用 22 | @appbarBackgroundColor: @grey100; // 并未在appbar组件中应用 23 | @dialogBackgroundColor: @white; // dialogs、 cards、 paper 组件背景 24 | 25 | // icon color 26 | @activeIconColor: fade(@fullBlack, 54%); 27 | @inActiveIconColor: fade(@fullBlack, 38%); 28 | 29 | @import "../../node_modules/muse-ui/less/theme-vars.less"; // 默认组件变量 30 | @import "../../node_modules/muse-ui/less/theme.less"; // 主题相关的样式 31 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'] 18 | }, 19 | dev: { 20 | env: require('./dev.env'), 21 | port: 8080, 22 | assetsSubDirectory: 'static', 23 | assetsPublicPath: '/', 24 | proxyTable: {}, 25 | // CSS Sourcemaps off by default because relative paths are "buggy" 26 | // with this option, according to the CSS-Loader README 27 | // (https://github.com/webpack/css-loader#sourcemaps) 28 | // In our experience, they generally work as expected, 29 | // just be aware of this issue when enabling this option. 30 | cssSourceMap: false 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /test/e2e/nightwatch.conf.js: -------------------------------------------------------------------------------- 1 | require('babel-register') 2 | var config = require('../../config') 3 | 4 | // http://nightwatchjs.org/guide#settings-file 5 | module.exports = { 6 | src_folders: ['test/e2e/specs'], 7 | output_folder: 'test/e2e/reports', 8 | custom_assertions_path: ['test/e2e/custom-assertions'], 9 | 10 | selenium: { 11 | start_process: true, 12 | server_path: 'node_modules/selenium-server/lib/runner/selenium-server-standalone-2.53.1.jar', 13 | host: '127.0.0.1', 14 | port: 4444, 15 | cli_args: { 16 | 'webdriver.chrome.driver': require('chromedriver').path 17 | } 18 | }, 19 | 20 | test_settings: { 21 | default: { 22 | selenium_port: 4444, 23 | selenium_host: 'localhost', 24 | silent: true, 25 | globals: { 26 | devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port) 27 | } 28 | }, 29 | 30 | chrome: { 31 | desiredCapabilities: { 32 | browserName: 'chrome', 33 | javascriptEnabled: true, 34 | acceptSslCerts: true 35 | } 36 | }, 37 | 38 | firefox: { 39 | desiredCapabilities: { 40 | browserName: 'firefox', 41 | javascriptEnabled: true, 42 | acceptSslCerts: true 43 | } 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/api/index.js: -------------------------------------------------------------------------------- 1 | const _baseUrl = 'http://api.javaswing.cn' 2 | const _baseUrl2 = 'https://api.imjad.cn/cloudmusic/' 3 | export default { 4 | /** 5 | * 获取首页Banner图片数据 6 | */ 7 | getBannerList () { 8 | return `${_baseUrl}/banner` 9 | }, 10 | /** 11 | * 获取推荐歌单 12 | */ 13 | getPersonalized () { 14 | return `${_baseUrl}/personalized` 15 | }, 16 | /** 17 | * 获取推荐 mv 18 | */ 19 | getPersonalizedMV () { 20 | return `${_baseUrl}/personalized/mv` 21 | }, 22 | /** 23 | * 24 | * @param {*} cat 25 | * @param {*} order 26 | * @param {*} offset 27 | * @param {*} total 28 | * @param {*} limit 29 | */ 30 | getPlayListByWhere (offset, limit) { 31 | return `${_baseUrl}/top/playlist?limit=${limit}&order=all&offset=${offset}` 32 | }, 33 | /** 34 | * 获取歌词API 35 | * @param {Number} id 36 | */ 37 | getLrc (id) { 38 | return `${_baseUrl}/lyric?id=${id}` 39 | }, 40 | /** 41 | * 获取歌曲 播放URL 42 | * @param {Number} id 43 | */ 44 | getSong (id) { 45 | return `${_baseUrl}/song/url?id=${id}` 46 | }, 47 | /** 48 | * 获取歌单详情 49 | * @param {Number} id 50 | */ 51 | getPlayListDetail (id) { 52 | return `${_baseUrl}/playlist/detail?id=${id}` 53 | }, 54 | getMv (id) { 55 | return _baseUrl2 + '?type=mv&id=' + id 56 | }, 57 | search (words) { 58 | return _baseUrl2 + '?type=search&s=' + words 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # netease-clound-webapps 2 | 3 | > 这是一个用VUEJS写高仿网易云音乐的webapp，只实现了APP的核心功能，这个项目会长期进行更新。 4 | 5 | [在线地址](http://music.javaswing.cn/) 6 | 7 | ### 技术栈 8 | - 传说中的VUE全家桶(vue vue-router vuex) 9 | - axios 10 | - Muse-UI(一个基于Vue2.x的material design 风格UI框架) 11 | 12 | ## 运行截图 13 | ![首页](https://github.com/javaSwing/NeteaseCloudWebApp/raw/master/screenshots/1.png) 14 | ![详情](https://github.com/javaSwing/NeteaseCloudWebApp/raw/master/screenshots/2.png) 15 | ![动图](https://github.com/javaSwing/NeteaseCloudWebApp/raw/master/screenshots/3.gif) 16 | ![动图](https://github.com/javaSwing/NeteaseCloudWebApp/raw/master/screenshots/4.gif) 17 | 18 | ## 安装运行（Build Setup） 19 | 20 | ``` bash 21 | # install dependencies 22 | npm install 23 | 24 | # serve with hot reload at localhost:8080 25 | npm run dev 26 | 27 | # build for production with minification 28 | npm run build 29 | 30 | # run unit tests 31 | npm run unit 32 | 33 | # run e2e tests 34 | npm run e2e 35 | 36 | # run all tests 37 | npm test 38 | ``` 39 | 40 | ## TODO 41 | 42 | - [ ] 实现音乐播放器的播放模式调整 43 | - [ ] 搜索模块 44 | 45 | ## 鸣谢 46 | 47 | 此网站提供的API: [https://api.imjad.cn/cloudmusic/](https://api.imjad.cn/cloudmusic/) ,此接口的说明请到这里[查看](https://api.imjad.cn/cloudmusic/index.html) 48 | 49 | 歌单列表部分为自己提供，在别一个项目中[MusicApi](https://github.com/javaSwing/MusicAPI) 50 | 51 | [NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi) NodeJS 项目 52 | 53 | 54 | ## License 55 | 56 | [MIT](https://github.com/javaSwing/NeteaseCloudWebApp/blob/master/LICENSE) 57 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Netease-Cloud 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 37 | 38 | 39 |
40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /test/unit/karma.conf.js: -------------------------------------------------------------------------------- 1 | // This is a karma config file. For more details see 2 | // http://karma-runner.github.io/0.13/config/configuration-file.html 3 | // we are also using it with karma-webpack 4 | // https://github.com/webpack/karma-webpack 5 | 6 | var path = require('path') 7 | var merge = require('webpack-merge') 8 | var baseConfig = require('../../build/webpack.base.conf') 9 | var utils = require('../../build/utils') 10 | var webpack = require('webpack') 11 | var projectRoot = path.resolve(__dirname, '../../') 12 | 13 | var webpackConfig = merge(baseConfig, { 14 | // use inline sourcemap for karma-sourcemap-loader 15 | module: { 16 | loaders: utils.styleLoaders() 17 | }, 18 | devtool: '#inline-source-map', 19 | vue: { 20 | loaders: { 21 | js: 'babel-loader' 22 | } 23 | }, 24 | plugins: [ 25 | new webpack.DefinePlugin({ 26 | 'process.env': require('../../config/test.env') 27 | }) 28 | ] 29 | }) 30 | 31 | // no need for app entry during tests 32 | delete webpackConfig.entry 33 | 34 | // Use babel for test files too 35 | webpackConfig.module.loaders.some(function (loader, i) { 36 | if (/^babel(-loader)?$/.test(loader.loader)) { 37 | loader.include.push(path.resolve(projectRoot, 'test/unit')) 38 | return true 39 | } 40 | }) 41 | 42 | module.exports = function (config) { 43 | config.set({ 44 | // to run in additional browsers: 45 | // 1. install corresponding karma launcher 46 | // http://karma-runner.github.io/0.13/config/browsers.html 47 | // 2. add it to the `browsers` array below. 48 | browsers: ['PhantomJS'], 49 | frameworks: ['mocha', 'sinon-chai'], 50 | reporters: ['spec', 'coverage'], 51 | files: ['./index.js'], 52 | preprocessors: { 53 | './index.js': ['webpack', 'sourcemap'] 54 | }, 55 | webpack: webpackConfig, 56 | webpackMiddleware: { 57 | noInfo: true 58 | }, 59 | coverageReporter: { 60 | dir: './coverage', 61 | reporters: [ 62 | { type: 'lcov', subdir: '.' }, 63 | { type: 'text-summary' } 64 | ] 65 | } 66 | }) 67 | } 68 | -------------------------------------------------------------------------------- /src/views/index.vue: -------------------------------------------------------------------------------- 1 | 22 | 60 | 93 | -------------------------------------------------------------------------------- /src/components/list.vue: -------------------------------------------------------------------------------- 1 | 20 | 58 | 118 | 119 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "netease-clound-webapps", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "javaSwing ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "build": "node build/build.js", 10 | "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", 11 | "e2e": "node test/e2e/runner.js", 12 | "test": "npm run unit && npm run e2e", 13 | "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" 14 | }, 15 | "dependencies": { 16 | "axios": "^0.21.2", 17 | "fastclick": "^1.0.6", 18 | "muse-ui": "^2.0.2", 19 | "vue": "^2.2.2", 20 | "vue-awesome-swiper": "^2.3.0", 21 | "vue-easy-toast": "^1.0.1", 22 | "vue-router": "^2.2.0", 23 | "vuex": "^2.1.1" 24 | }, 25 | "devDependencies": { 26 | "autoprefixer": "^6.4.0", 27 | "babel-core": "^6.0.0", 28 | "babel-eslint": "^7.0.0", 29 | "babel-loader": "^6.0.0", 30 | "babel-plugin-istanbul": "^3.0.0", 31 | "babel-plugin-transform-runtime": "^6.0.0", 32 | "babel-preset-es2015": "^6.0.0", 33 | "babel-preset-stage-2": "^6.0.0", 34 | "babel-register": "^6.0.0", 35 | "chai": "^3.5.0", 36 | "chalk": "^1.1.3", 37 | "chromedriver": "^2.45.0", 38 | "connect-history-api-fallback": "^1.1.0", 39 | "cross-env": "^3.1.3", 40 | "cross-spawn": "^4.0.2", 41 | "css-loader": "^0.25.0", 42 | "eslint": "^3.7.1", 43 | "eslint-config-standard": "^6.1.0", 44 | "eslint-friendly-formatter": "^2.0.5", 45 | "eslint-loader": "^1.5.0", 46 | "eslint-plugin-html": "^1.3.0", 47 | "eslint-plugin-promise": "^3.4.0", 48 | "eslint-plugin-standard": "^2.0.1", 49 | "eventsource-polyfill": "^0.9.6", 50 | "express": "^4.13.3", 51 | "extract-text-webpack-plugin": "^1.0.1", 52 | "file-loader": "^0.9.0", 53 | "friendly-errors-webpack-plugin": "^1.1.2", 54 | "function-bind": "^1.0.2", 55 | "html-webpack-plugin": "^2.8.1", 56 | "http-proxy-middleware": "^0.17.2", 57 | "inject-loader": "^2.0.1", 58 | "json-loader": "^0.5.4", 59 | "karma": "^6.3.16", 60 | "karma-coverage": "^1.1.1", 61 | "karma-mocha": "^1.2.0", 62 | "karma-phantomjs-launcher": "^1.0.0", 63 | "karma-sinon-chai": "^1.2.0", 64 | "karma-sourcemap-loader": "^0.3.7", 65 | "karma-spec-reporter": "0.0.26", 66 | "karma-webpack": "^1.7.0", 67 | "keycode": "^2.1.8", 68 | "less": "^2.7.2", 69 | "less-loader": "^2.2.3", 70 | "lolex": "^1.4.0", 71 | "mocha": "^3.1.0", 72 | "nightwatch": "^0.9.8", 73 | "opn": "^4.0.2", 74 | "ora": "^0.3.0", 75 | "phantomjs-prebuilt": "^2.1.3", 76 | "selenium-server": "2.53.1", 77 | "semver": "^5.3.0", 78 | "shelljs": "^0.8.5", 79 | "sinon": "^2.1.0", 80 | "sinon-chai": "^2.8.0", 81 | "url-loader": "^0.5.7", 82 | "vue-lazyload": "^1.0.0-rc9", 83 | "vue-loader": "^11.1.4", 84 | "vue-style-loader": "^2.0.0", 85 | "vue-template-compiler": "^2.2.4", 86 | "webpack": "^1.13.2", 87 | "webpack-dev-middleware": "^1.8.3", 88 | "webpack-hot-middleware": "^2.12.2", 89 | "webpack-merge": "^0.14.1" 90 | }, 91 | "engines": { 92 | "node": ">= 4.0.0", 93 | "npm": ">= 3.0.0" 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /src/views/songList.vue: -------------------------------------------------------------------------------- 1 | 18 | 64 | 118 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import Axios from 'axios' 4 | import api from '../api' 5 | Vue.use(Vuex) 6 | 7 | const store = new Vuex.Store({ 8 | state: { 9 | audio: { 10 | 'id': 0, 11 | 'name': '歌曲名称', 12 | 'singer': '演唱者', 13 | 'albumPic': '/static/placeholder_disk_play_program.png', 14 | 'location': '', 15 | 'album': '' 16 | }, 17 | lyric: '', 18 | currentIndex: 0, // 当前播放的歌曲位置 19 | playing: false, // 是否正在播放 20 | loading: false, // 是否正在加载中 21 | showDetail: false, 22 | songList: [], // 播放列表 23 | currentTime: 0, 24 | tmpCurrentTime: 0, 25 | durationTime: 0, 26 | bufferedTime: 0, 27 | change: false // 判断是更改的时间还是播放的时间 28 | }, 29 | getters: { 30 | audio: state => state.audio, 31 | playing: state => state.playing, 32 | loading: state => state.loading, 33 | showDetail: state => state.showDetail, 34 | durationTime: state => state.durationTime, 35 | currentIndex: state => state.currentIndex, 36 | bufferedTime: state => state.bufferedTime, 37 | tmpCurrentTime: state => state.tmpCurrentTime, 38 | songList: state => state.songList, 39 | change: state => state.change, 40 | currentTime: state => state.currentTime, 41 | prCurrentTime: state => { 42 | return state.currentTime / state.durationTime * 100 43 | }, 44 | prBufferedTime: state => { 45 | return state.bufferedTime / state.durationTime * 100 46 | } 47 | }, 48 | mutations: { 49 | play (state) { 50 | state.playing = true 51 | }, 52 | pause (state) { 53 | state.playing = false 54 | }, 55 | toggleDetail (state) { 56 | state.showDetail = !state.showDetail 57 | }, 58 | setAudio (state) { 59 | state.audio = state.songList[state.currentIndex - 1] 60 | }, 61 | setAudioIndex (state, index) { 62 | state.audio = state.songList[index] 63 | state.currentIndex = index + 1 64 | }, 65 | removeAudio (state, index) { 66 | state.songList.splice(index, 1) 67 | if (index === state.songList.length) { 68 | index-- 69 | } 70 | state.audio = state.songList[index] 71 | state.currentIndex = index + 1 72 | if (state.songList.length === 0) { 73 | state.audio = { 74 | 'id': 0, 75 | 'name': '歌曲名称', 76 | 'singer': '演唱者', 77 | 'albumPic': '/static/player-bar.png', 78 | 'location': '', 79 | 'album': '' 80 | } 81 | state.playing = false 82 | } 83 | }, 84 | setChange (state, flag) { 85 | state.change = flag 86 | }, 87 | setLocation (state, location) { 88 | state.audio.location = location 89 | }, 90 | updateCurrentTime (state, time) { 91 | state.currentTime = time 92 | }, 93 | updateDurationTime (state, time) { 94 | state.durationTime = time 95 | }, 96 | updateBufferedTime (state, time) { 97 | state.bufferedTime = time 98 | }, 99 | changeTime (state, time) { 100 | state.tmpCurrentTime = time 101 | }, 102 | openLoading (state) { 103 | state.loading = true 104 | }, 105 | closeLoading (state) { 106 | state.loading = false 107 | }, 108 | resetAudio (state) { 109 | state.currentTime = 0 110 | }, 111 | playNext (state) { // 播放下一曲 112 | state.currentIndex++ 113 | if (state.currentIndex > state.songList.length) { 114 | state.currentIndex = 1 115 | } 116 | state.audio = state.songList[state.currentIndex - 1] 117 | }, 118 | playPrev (state) { // 播放上一曲 119 | state.currentIndex-- 120 | if (state.currentIndex < 1) { 121 | state.currentIndex = state.songList.length 122 | } 123 | state.audio = state.songList[state.currentIndex - 1] 124 | }, 125 | addToList (state, songs) { 126 | var items = Array.prototype.concat.call(songs) 127 | items.forEach(item => { 128 | var flag = false 129 | state.songList.forEach(function (element, index) { // 检测歌曲重复 130 | if (element.id === item.id) { 131 | flag = true 132 | state.currentIndex = index + 1 133 | } 134 | }) 135 | if (!flag) { 136 | state.songList.push(item) 137 | state.currentIndex = state.songList.length 138 | } 139 | }) 140 | }, 141 | setLrc (state, lrc) { 142 | state.lyric = lrc 143 | } 144 | }, 145 | // 异步的数据操作 146 | actions: { 147 | getSong ({commit, state}, id) { 148 | // 使用 CancelToken 退出一个Axios事件 149 | var CancelToken = Axios.CancelToken 150 | var source = CancelToken.source() 151 | if (state.loading && state.songList.length > 0) { 152 | console.log('cancel') 153 | source.cancel() 154 | } 155 | commit('openLoading') 156 | Axios.get(api.getSong(id)).then(data => { 157 | // 统一数据模型，方便后台接口的改变 158 | var url = data.data[0].url 159 | commit('setAudio') 160 | commit('setLocation', url) 161 | }) 162 | .catch((error) => { // 错误处理 163 | console.log(error) 164 | window.alert('获取歌曲信息出错！') 165 | }) 166 | } 167 | } 168 | }) 169 | export default store 170 | -------------------------------------------------------------------------------- /src/views/rage.vue: -------------------------------------------------------------------------------- 1 | 37 | 167 | 219 | -------------------------------------------------------------------------------- /src/components/playerBar.vue: -------------------------------------------------------------------------------- 1 | 27 | 120 | 251 | -------------------------------------------------------------------------------- /src/views/playListDetail.vue: -------------------------------------------------------------------------------- 1 | 47 | 161 | 162 | 310 | -------------------------------------------------------------------------------- /src/views/playerDetail.vue: -------------------------------------------------------------------------------- 1 | 60 | 212 | 507 | -------------------------------------------------------------------------------- /src/assets/animate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*! 4 | * animate.css -http://daneden.me/animate 5 | * Version - 3.5.1 6 | * Licensed under the MIT license - http://opensource.org/licenses/MIT 7 | * 8 | * Copyright (c) 2016 Daniel Eden 9 | */ 10 | 11 | .animated { 12 | -webkit-animation-duration: 0.3s; 13 | animation-duration: 0.3s; 14 | -webkit-animation-fill-mode: both; 15 | animation-fill-mode: both; 16 | /*animation: 0.25s linear;*/ 17 | } 18 | 19 | .animated.infinite { 20 | -webkit-animation-iteration-count: infinite; 21 | animation-iteration-count: infinite; 22 | } 23 | 24 | .animated.hinge { 25 | -webkit-animation-duration: 2s; 26 | animation-duration: 2s; 27 | } 28 | 29 | .animated.flipOutX, 30 | .animated.flipOutY, 31 | .animated.bounceIn, 32 | .animated.bounceOut { 33 | -webkit-animation-duration: .75s; 34 | animation-duration: .75s; 35 | } 36 | 37 | @-webkit-keyframes bounce { 38 | from, 39 | 20%, 40 | 53%, 41 | 80%, 42 | to { 43 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 44 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 45 | -webkit-transform: translate3d(0, 0, 0); 46 | transform: translate3d(0, 0, 0); 47 | } 48 | 40%, 49 | 43% { 50 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 51 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 52 | -webkit-transform: translate3d(0, -30px, 0); 53 | transform: translate3d(0, -30px, 0); 54 | } 55 | 70% { 56 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 57 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 58 | -webkit-transform: translate3d(0, -15px, 0); 59 | transform: translate3d(0, -15px, 0); 60 | } 61 | 90% { 62 | -webkit-transform: translate3d(0, -4px, 0); 63 | transform: translate3d(0, -4px, 0); 64 | } 65 | } 66 | 67 | @keyframes bounce { 68 | from, 69 | 20%, 70 | 53%, 71 | 80%, 72 | to { 73 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 74 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 75 | -webkit-transform: translate3d(0, 0, 0); 76 | transform: translate3d(0, 0, 0); 77 | } 78 | 40%, 79 | 43% { 80 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 81 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 82 | -webkit-transform: translate3d(0, -30px, 0); 83 | transform: translate3d(0, -30px, 0); 84 | } 85 | 70% { 86 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 87 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 88 | -webkit-transform: translate3d(0, -15px, 0); 89 | transform: translate3d(0, -15px, 0); 90 | } 91 | 90% { 92 | -webkit-transform: translate3d(0, -4px, 0); 93 | transform: translate3d(0, -4px, 0); 94 | } 95 | } 96 | 97 | .bounce { 98 | -webkit-animation-name: bounce; 99 | animation-name: bounce; 100 | -webkit-transform-origin: center bottom; 101 | transform-origin: center bottom; 102 | } 103 | 104 | @-webkit-keyframes flash { 105 | from, 106 | 50%, 107 | to { 108 | opacity: 1; 109 | } 110 | 25%, 111 | 75% { 112 | opacity: 0; 113 | } 114 | } 115 | 116 | @keyframes flash { 117 | from, 118 | 50%, 119 | to { 120 | opacity: 1; 121 | } 122 | 25%, 123 | 75% { 124 | opacity: 0; 125 | } 126 | } 127 | 128 | .flash { 129 | -webkit-animation-name: flash; 130 | animation-name: flash; 131 | } 132 | 133 | 134 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 135 | 136 | @-webkit-keyframes pulse { 137 | from { 138 | -webkit-transform: scale3d(1, 1, 1); 139 | transform: scale3d(1, 1, 1); 140 | } 141 | 50% { 142 | -webkit-transform: scale3d(1.05, 1.05, 1.05); 143 | transform: scale3d(1.05, 1.05, 1.05); 144 | } 145 | to { 146 | -webkit-transform: scale3d(1, 1, 1); 147 | transform: scale3d(1, 1, 1); 148 | } 149 | } 150 | 151 | @keyframes pulse { 152 | from { 153 | -webkit-transform: scale3d(1, 1, 1); 154 | transform: scale3d(1, 1, 1); 155 | } 156 | 50% { 157 | -webkit-transform: scale3d(1.05, 1.05, 1.05); 158 | transform: scale3d(1.05, 1.05, 1.05); 159 | } 160 | to { 161 | -webkit-transform: scale3d(1, 1, 1); 162 | transform: scale3d(1, 1, 1); 163 | } 164 | } 165 | 166 | .pulse { 167 | -webkit-animation-name: pulse; 168 | animation-name: pulse; 169 | } 170 | 171 | @-webkit-keyframes rubberBand { 172 | from { 173 | -webkit-transform: scale3d(1, 1, 1); 174 | transform: scale3d(1, 1, 1); 175 | } 176 | 30% { 177 | -webkit-transform: scale3d(1.25, 0.75, 1); 178 | transform: scale3d(1.25, 0.75, 1); 179 | } 180 | 40% { 181 | -webkit-transform: scale3d(0.75, 1.25, 1); 182 | transform: scale3d(0.75, 1.25, 1); 183 | } 184 | 50% { 185 | -webkit-transform: scale3d(1.15, 0.85, 1); 186 | transform: scale3d(1.15, 0.85, 1); 187 | } 188 | 65% { 189 | -webkit-transform: scale3d(.95, 1.05, 1); 190 | transform: scale3d(.95, 1.05, 1); 191 | } 192 | 75% { 193 | -webkit-transform: scale3d(1.05, .95, 1); 194 | transform: scale3d(1.05, .95, 1); 195 | } 196 | to { 197 | -webkit-transform: scale3d(1, 1, 1); 198 | transform: scale3d(1, 1, 1); 199 | } 200 | } 201 | 202 | @keyframes rubberBand { 203 | from { 204 | -webkit-transform: scale3d(1, 1, 1); 205 | transform: scale3d(1, 1, 1); 206 | } 207 | 30% { 208 | -webkit-transform: scale3d(1.25, 0.75, 1); 209 | transform: scale3d(1.25, 0.75, 1); 210 | } 211 | 40% { 212 | -webkit-transform: scale3d(0.75, 1.25, 1); 213 | transform: scale3d(0.75, 1.25, 1); 214 | } 215 | 50% { 216 | -webkit-transform: scale3d(1.15, 0.85, 1); 217 | transform: scale3d(1.15, 0.85, 1); 218 | } 219 | 65% { 220 | -webkit-transform: scale3d(.95, 1.05, 1); 221 | transform: scale3d(.95, 1.05, 1); 222 | } 223 | 75% { 224 | -webkit-transform: scale3d(1.05, .95, 1); 225 | transform: scale3d(1.05, .95, 1); 226 | } 227 | to { 228 | -webkit-transform: scale3d(1, 1, 1); 229 | transform: scale3d(1, 1, 1); 230 | } 231 | } 232 | 233 | .rubberBand { 234 | -webkit-animation-name: rubberBand; 235 | animation-name: rubberBand; 236 | } 237 | 238 | @-webkit-keyframes shake { 239 | from, 240 | to { 241 | -webkit-transform: translate3d(0, 0, 0); 242 | transform: translate3d(0, 0, 0); 243 | } 244 | 10%, 245 | 30%, 246 | 50%, 247 | 70%, 248 | 90% { 249 | -webkit-transform: translate3d(-10px, 0, 0); 250 | transform: translate3d(-10px, 0, 0); 251 | } 252 | 20%, 253 | 40%, 254 | 60%, 255 | 80% { 256 | -webkit-transform: translate3d(10px, 0, 0); 257 | transform: translate3d(10px, 0, 0); 258 | } 259 | } 260 | 261 | @keyframes shake { 262 | from, 263 | to { 264 | -webkit-transform: translate3d(0, 0, 0); 265 | transform: translate3d(0, 0, 0); 266 | } 267 | 10%, 268 | 30%, 269 | 50%, 270 | 70%, 271 | 90% { 272 | -webkit-transform: translate3d(-10px, 0, 0); 273 | transform: translate3d(-10px, 0, 0); 274 | } 275 | 20%, 276 | 40%, 277 | 60%, 278 | 80% { 279 | -webkit-transform: translate3d(10px, 0, 0); 280 | transform: translate3d(10px, 0, 0); 281 | } 282 | } 283 | 284 | .shake { 285 | -webkit-animation-name: shake; 286 | animation-name: shake; 287 | } 288 | 289 | @-webkit-keyframes headShake { 290 | 0% { 291 | -webkit-transform: translateX(0); 292 | transform: translateX(0); 293 | } 294 | 6.5% { 295 | -webkit-transform: translateX(-6px) rotateY(-9deg); 296 | transform: translateX(-6px) rotateY(-9deg); 297 | } 298 | 18.5% { 299 | -webkit-transform: translateX(5px) rotateY(7deg); 300 | transform: translateX(5px) rotateY(7deg); 301 | } 302 | 31.5% { 303 | -webkit-transform: translateX(-3px) rotateY(-5deg); 304 | transform: translateX(-3px) rotateY(-5deg); 305 | } 306 | 43.5% { 307 | -webkit-transform: translateX(2px) rotateY(3deg); 308 | transform: translateX(2px) rotateY(3deg); 309 | } 310 | 50% { 311 | -webkit-transform: translateX(0); 312 | transform: translateX(0); 313 | } 314 | } 315 | 316 | @keyframes headShake { 317 | 0% { 318 | -webkit-transform: translateX(0); 319 | transform: translateX(0); 320 | } 321 | 6.5% { 322 | -webkit-transform: translateX(-6px) rotateY(-9deg); 323 | transform: translateX(-6px) rotateY(-9deg); 324 | } 325 | 18.5% { 326 | -webkit-transform: translateX(5px) rotateY(7deg); 327 | transform: translateX(5px) rotateY(7deg); 328 | } 329 | 31.5% { 330 | -webkit-transform: translateX(-3px) rotateY(-5deg); 331 | transform: translateX(-3px) rotateY(-5deg); 332 | } 333 | 43.5% { 334 | -webkit-transform: translateX(2px) rotateY(3deg); 335 | transform: translateX(2px) rotateY(3deg); 336 | } 337 | 50% { 338 | -webkit-transform: translateX(0); 339 | transform: translateX(0); 340 | } 341 | } 342 | 343 | .headShake { 344 | -webkit-animation-timing-function: ease-in-out; 345 | animation-timing-function: ease-in-out; 346 | -webkit-animation-name: headShake; 347 | animation-name: headShake; 348 | } 349 | 350 | @-webkit-keyframes swing { 351 | 20% { 352 | -webkit-transform: rotate3d(0, 0, 1, 15deg); 353 | transform: rotate3d(0, 0, 1, 15deg); 354 | } 355 | 40% { 356 | -webkit-transform: rotate3d(0, 0, 1, -10deg); 357 | transform: rotate3d(0, 0, 1, -10deg); 358 | } 359 | 60% { 360 | -webkit-transform: rotate3d(0, 0, 1, 5deg); 361 | transform: rotate3d(0, 0, 1, 5deg); 362 | } 363 | 80% { 364 | -webkit-transform: rotate3d(0, 0, 1, -5deg); 365 | transform: rotate3d(0, 0, 1, -5deg); 366 | } 367 | to { 368 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 369 | transform: rotate3d(0, 0, 1, 0deg); 370 | } 371 | } 372 | 373 | @keyframes swing { 374 | 20% { 375 | -webkit-transform: rotate3d(0, 0, 1, 15deg); 376 | transform: rotate3d(0, 0, 1, 15deg); 377 | } 378 | 40% { 379 | -webkit-transform: rotate3d(0, 0, 1, -10deg); 380 | transform: rotate3d(0, 0, 1, -10deg); 381 | } 382 | 60% { 383 | -webkit-transform: rotate3d(0, 0, 1, 5deg); 384 | transform: rotate3d(0, 0, 1, 5deg); 385 | } 386 | 80% { 387 | -webkit-transform: rotate3d(0, 0, 1, -5deg); 388 | transform: rotate3d(0, 0, 1, -5deg); 389 | } 390 | to { 391 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 392 | transform: rotate3d(0, 0, 1, 0deg); 393 | } 394 | } 395 | 396 | .swing { 397 | -webkit-transform-origin: top center; 398 | transform-origin: top center; 399 | -webkit-animation-name: swing; 400 | animation-name: swing; 401 | } 402 | 403 | @-webkit-keyframes tada { 404 | from { 405 | -webkit-transform: scale3d(1, 1, 1); 406 | transform: scale3d(1, 1, 1); 407 | } 408 | 10%, 409 | 20% { 410 | -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 411 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 412 | } 413 | 30%, 414 | 50%, 415 | 70%, 416 | 90% { 417 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 418 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 419 | } 420 | 40%, 421 | 60%, 422 | 80% { 423 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 424 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 425 | } 426 | to { 427 | -webkit-transform: scale3d(1, 1, 1); 428 | transform: scale3d(1, 1, 1); 429 | } 430 | } 431 | 432 | @keyframes tada { 433 | from { 434 | -webkit-transform: scale3d(1, 1, 1); 435 | transform: scale3d(1, 1, 1); 436 | } 437 | 10%, 438 | 20% { 439 | -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 440 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 441 | } 442 | 30%, 443 | 50%, 444 | 70%, 445 | 90% { 446 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 447 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 448 | } 449 | 40%, 450 | 60%, 451 | 80% { 452 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 453 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 454 | } 455 | to { 456 | -webkit-transform: scale3d(1, 1, 1); 457 | transform: scale3d(1, 1, 1); 458 | } 459 | } 460 | 461 | .tada { 462 | -webkit-animation-name: tada; 463 | animation-name: tada; 464 | } 465 | 466 | 467 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 468 | 469 | @-webkit-keyframes wobble { 470 | from { 471 | -webkit-transform: none; 472 | transform: none; 473 | } 474 | 15% { 475 | -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 476 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 477 | } 478 | 30% { 479 | -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 480 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 481 | } 482 | 45% { 483 | -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 484 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 485 | } 486 | 60% { 487 | -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 488 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 489 | } 490 | 75% { 491 | -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 492 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 493 | } 494 | to { 495 | -webkit-transform: none; 496 | transform: none; 497 | } 498 | } 499 | 500 | @keyframes wobble { 501 | from { 502 | -webkit-transform: none; 503 | transform: none; 504 | } 505 | 15% { 506 | -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 507 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 508 | } 509 | 30% { 510 | -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 511 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 512 | } 513 | 45% { 514 | -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 515 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 516 | } 517 | 60% { 518 | -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 519 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 520 | } 521 | 75% { 522 | -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 523 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 524 | } 525 | to { 526 | -webkit-transform: none; 527 | transform: none; 528 | } 529 | } 530 | 531 | .wobble { 532 | -webkit-animation-name: wobble; 533 | animation-name: wobble; 534 | } 535 | 536 | @-webkit-keyframes jello { 537 | from, 538 | 11.1%, 539 | to { 540 | -webkit-transform: none; 541 | transform: none; 542 | } 543 | 22.2% { 544 | -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); 545 | transform: skewX(-12.5deg) skewY(-12.5deg); 546 | } 547 | 33.3% { 548 | -webkit-transform: skewX(6.25deg) skewY(6.25deg); 549 | transform: skewX(6.25deg) skewY(6.25deg); 550 | } 551 | 44.4% { 552 | -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); 553 | transform: skewX(-3.125deg) skewY(-3.125deg); 554 | } 555 | 55.5% { 556 | -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); 557 | transform: skewX(1.5625deg) skewY(1.5625deg); 558 | } 559 | 66.6% { 560 | -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); 561 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 562 | } 563 | 77.7% { 564 | -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); 565 | transform: skewX(0.390625deg) skewY(0.390625deg); 566 | } 567 | 88.8% { 568 | -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 569 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 570 | } 571 | } 572 | 573 | @keyframes jello { 574 | from, 575 | 11.1%, 576 | to { 577 | -webkit-transform: none; 578 | transform: none; 579 | } 580 | 22.2% { 581 | -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); 582 | transform: skewX(-12.5deg) skewY(-12.5deg); 583 | } 584 | 33.3% { 585 | -webkit-transform: skewX(6.25deg) skewY(6.25deg); 586 | transform: skewX(6.25deg) skewY(6.25deg); 587 | } 588 | 44.4% { 589 | -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); 590 | transform: skewX(-3.125deg) skewY(-3.125deg); 591 | } 592 | 55.5% { 593 | -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); 594 | transform: skewX(1.5625deg) skewY(1.5625deg); 595 | } 596 | 66.6% { 597 | -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); 598 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 599 | } 600 | 77.7% { 601 | -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); 602 | transform: skewX(0.390625deg) skewY(0.390625deg); 603 | } 604 | 88.8% { 605 | -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 606 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 607 | } 608 | } 609 | 610 | .jello { 611 | -webkit-animation-name: jello; 612 | animation-name: jello; 613 | -webkit-transform-origin: center; 614 | transform-origin: center; 615 | } 616 | 617 | @-webkit-keyframes bounceIn { 618 | from, 619 | 20%, 620 | 40%, 621 | 60%, 622 | 80%, 623 | to { 624 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 625 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 626 | } 627 | 0% { 628 | opacity: 0; 629 | -webkit-transform: scale3d(.3, .3, .3); 630 | transform: scale3d(.3, .3, .3); 631 | } 632 | 20% { 633 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 634 | transform: scale3d(1.1, 1.1, 1.1); 635 | } 636 | 40% { 637 | -webkit-transform: scale3d(.9, .9, .9); 638 | transform: scale3d(.9, .9, .9); 639 | } 640 | 60% { 641 | opacity: 1; 642 | -webkit-transform: scale3d(1.03, 1.03, 1.03); 643 | transform: scale3d(1.03, 1.03, 1.03); 644 | } 645 | 80% { 646 | -webkit-transform: scale3d(.97, .97, .97); 647 | transform: scale3d(.97, .97, .97); 648 | } 649 | to { 650 | opacity: 1; 651 | -webkit-transform: scale3d(1, 1, 1); 652 | transform: scale3d(1, 1, 1); 653 | } 654 | } 655 | 656 | @keyframes bounceIn { 657 | from, 658 | 20%, 659 | 40%, 660 | 60%, 661 | 80%, 662 | to { 663 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 664 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 665 | } 666 | 0% { 667 | opacity: 0; 668 | -webkit-transform: scale3d(.3, .3, .3); 669 | transform: scale3d(.3, .3, .3); 670 | } 671 | 20% { 672 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 673 | transform: scale3d(1.1, 1.1, 1.1); 674 | } 675 | 40% { 676 | -webkit-transform: scale3d(.9, .9, .9); 677 | transform: scale3d(.9, .9, .9); 678 | } 679 | 60% { 680 | opacity: 1; 681 | -webkit-transform: scale3d(1.03, 1.03, 1.03); 682 | transform: scale3d(1.03, 1.03, 1.03); 683 | } 684 | 80% { 685 | -webkit-transform: scale3d(.97, .97, .97); 686 | transform: scale3d(.97, .97, .97); 687 | } 688 | to { 689 | opacity: 1; 690 | -webkit-transform: scale3d(1, 1, 1); 691 | transform: scale3d(1, 1, 1); 692 | } 693 | } 694 | 695 | .bounceIn { 696 | -webkit-animation-name: bounceIn; 697 | animation-name: bounceIn; 698 | } 699 | 700 | @-webkit-keyframes bounceInDown { 701 | from, 702 | 60%, 703 | 75%, 704 | 90%, 705 | to { 706 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 707 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 708 | } 709 | 0% { 710 | opacity: 0; 711 | -webkit-transform: translate3d(0, -3000px, 0); 712 | transform: translate3d(0, -3000px, 0); 713 | } 714 | 60% { 715 | opacity: 1; 716 | -webkit-transform: translate3d(0, 25px, 0); 717 | transform: translate3d(0, 25px, 0); 718 | } 719 | 75% { 720 | -webkit-transform: translate3d(0, -10px, 0); 721 | transform: translate3d(0, -10px, 0); 722 | } 723 | 90% { 724 | -webkit-transform: translate3d(0, 5px, 0); 725 | transform: translate3d(0, 5px, 0); 726 | } 727 | to { 728 | -webkit-transform: none; 729 | transform: none; 730 | } 731 | } 732 | 733 | @keyframes bounceInDown { 734 | from, 735 | 60%, 736 | 75%, 737 | 90%, 738 | to { 739 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 740 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 741 | } 742 | 0% { 743 | opacity: 0; 744 | -webkit-transform: translate3d(0, -3000px, 0); 745 | transform: translate3d(0, -3000px, 0); 746 | } 747 | 60% { 748 | opacity: 1; 749 | -webkit-transform: translate3d(0, 25px, 0); 750 | transform: translate3d(0, 25px, 0); 751 | } 752 | 75% { 753 | -webkit-transform: translate3d(0, -10px, 0); 754 | transform: translate3d(0, -10px, 0); 755 | } 756 | 90% { 757 | -webkit-transform: translate3d(0, 5px, 0); 758 | transform: translate3d(0, 5px, 0); 759 | } 760 | to { 761 | -webkit-transform: none; 762 | transform: none; 763 | } 764 | } 765 | 766 | .bounceInDown { 767 | -webkit-animation-name: bounceInDown; 768 | animation-name: bounceInDown; 769 | } 770 | 771 | @-webkit-keyframes bounceInLeft { 772 | from, 773 | 60%, 774 | 75%, 775 | 90%, 776 | to { 777 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 778 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 779 | } 780 | 0% { 781 | opacity: 0; 782 | -webkit-transform: translate3d(-3000px, 0, 0); 783 | transform: translate3d(-3000px, 0, 0); 784 | } 785 | 60% { 786 | opacity: 1; 787 | -webkit-transform: translate3d(25px, 0, 0); 788 | transform: translate3d(25px, 0, 0); 789 | } 790 | 75% { 791 | -webkit-transform: translate3d(-10px, 0, 0); 792 | transform: translate3d(-10px, 0, 0); 793 | } 794 | 90% { 795 | -webkit-transform: translate3d(5px, 0, 0); 796 | transform: translate3d(5px, 0, 0); 797 | } 798 | to { 799 | -webkit-transform: none; 800 | transform: none; 801 | } 802 | } 803 | 804 | @keyframes bounceInLeft { 805 | from, 806 | 60%, 807 | 75%, 808 | 90%, 809 | to { 810 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 811 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 812 | } 813 | 0% { 814 | opacity: 0; 815 | -webkit-transform: translate3d(-3000px, 0, 0); 816 | transform: translate3d(-3000px, 0, 0); 817 | } 818 | 60% { 819 | opacity: 1; 820 | -webkit-transform: translate3d(25px, 0, 0); 821 | transform: translate3d(25px, 0, 0); 822 | } 823 | 75% { 824 | -webkit-transform: translate3d(-10px, 0, 0); 825 | transform: translate3d(-10px, 0, 0); 826 | } 827 | 90% { 828 | -webkit-transform: translate3d(5px, 0, 0); 829 | transform: translate3d(5px, 0, 0); 830 | } 831 | to { 832 | -webkit-transform: none; 833 | transform: none; 834 | } 835 | } 836 | 837 | .bounceInLeft { 838 | -webkit-animation-name: bounceInLeft; 839 | animation-name: bounceInLeft; 840 | } 841 | 842 | @-webkit-keyframes bounceInRight { 843 | from, 844 | 60%, 845 | 75%, 846 | 90%, 847 | to { 848 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 849 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 850 | } 851 | from { 852 | opacity: 0; 853 | -webkit-transform: translate3d(3000px, 0, 0); 854 | transform: translate3d(3000px, 0, 0); 855 | } 856 | 60% { 857 | opacity: 1; 858 | -webkit-transform: translate3d(-25px, 0, 0); 859 | transform: translate3d(-25px, 0, 0); 860 | } 861 | 75% { 862 | -webkit-transform: translate3d(10px, 0, 0); 863 | transform: translate3d(10px, 0, 0); 864 | } 865 | 90% { 866 | -webkit-transform: translate3d(-5px, 0, 0); 867 | transform: translate3d(-5px, 0, 0); 868 | } 869 | to { 870 | -webkit-transform: none; 871 | transform: none; 872 | } 873 | } 874 | 875 | @keyframes bounceInRight { 876 | from, 877 | 60%, 878 | 75%, 879 | 90%, 880 | to { 881 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 882 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 883 | } 884 | from { 885 | opacity: 0; 886 | -webkit-transform: translate3d(3000px, 0, 0); 887 | transform: translate3d(3000px, 0, 0); 888 | } 889 | 60% { 890 | opacity: 1; 891 | -webkit-transform: translate3d(-25px, 0, 0); 892 | transform: translate3d(-25px, 0, 0); 893 | } 894 | 75% { 895 | -webkit-transform: translate3d(10px, 0, 0); 896 | transform: translate3d(10px, 0, 0); 897 | } 898 | 90% { 899 | -webkit-transform: translate3d(-5px, 0, 0); 900 | transform: translate3d(-5px, 0, 0); 901 | } 902 | to { 903 | -webkit-transform: none; 904 | transform: none; 905 | } 906 | } 907 | 908 | .bounceInRight { 909 | -webkit-animation-name: bounceInRight; 910 | animation-name: bounceInRight; 911 | } 912 | 913 | @-webkit-keyframes bounceInUp { 914 | from, 915 | 60%, 916 | 75%, 917 | 90%, 918 | to { 919 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 920 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 921 | } 922 | from { 923 | opacity: 0; 924 | -webkit-transform: translate3d(0, 3000px, 0); 925 | transform: translate3d(0, 3000px, 0); 926 | } 927 | 60% { 928 | opacity: 1; 929 | -webkit-transform: translate3d(0, -20px, 0); 930 | transform: translate3d(0, -20px, 0); 931 | } 932 | 75% { 933 | -webkit-transform: translate3d(0, 10px, 0); 934 | transform: translate3d(0, 10px, 0); 935 | } 936 | 90% { 937 | -webkit-transform: translate3d(0, -5px, 0); 938 | transform: translate3d(0, -5px, 0); 939 | } 940 | to { 941 | -webkit-transform: translate3d(0, 0, 0); 942 | transform: translate3d(0, 0, 0); 943 | } 944 | } 945 | 946 | @keyframes bounceInUp { 947 | from, 948 | 60%, 949 | 75%, 950 | 90%, 951 | to { 952 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 953 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 954 | } 955 | from { 956 | opacity: 0; 957 | -webkit-transform: translate3d(0, 3000px, 0); 958 | transform: translate3d(0, 3000px, 0); 959 | } 960 | 60% { 961 | opacity: 1; 962 | -webkit-transform: translate3d(0, -20px, 0); 963 | transform: translate3d(0, -20px, 0); 964 | } 965 | 75% { 966 | -webkit-transform: translate3d(0, 10px, 0); 967 | transform: translate3d(0, 10px, 0); 968 | } 969 | 90% { 970 | -webkit-transform: translate3d(0, -5px, 0); 971 | transform: translate3d(0, -5px, 0); 972 | } 973 | to { 974 | -webkit-transform: translate3d(0, 0, 0); 975 | transform: translate3d(0, 0, 0); 976 | } 977 | } 978 | 979 | .bounceInUp { 980 | -webkit-animation-name: bounceInUp; 981 | animation-name: bounceInUp; 982 | } 983 | 984 | @-webkit-keyframes bounceOut { 985 | 20% { 986 | -webkit-transform: scale3d(.9, .9, .9); 987 | transform: scale3d(.9, .9, .9); 988 | } 989 | 50%, 990 | 55% { 991 | opacity: 1; 992 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 993 | transform: scale3d(1.1, 1.1, 1.1); 994 | } 995 | to { 996 | opacity: 0; 997 | -webkit-transform: scale3d(.3, .3, .3); 998 | transform: scale3d(.3, .3, .3); 999 | } 1000 | } 1001 | 1002 | @keyframes bounceOut { 1003 | 20% { 1004 | -webkit-transform: scale3d(.9, .9, .9); 1005 | transform: scale3d(.9, .9, .9); 1006 | } 1007 | 50%, 1008 | 55% { 1009 | opacity: 1; 1010 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 1011 | transform: scale3d(1.1, 1.1, 1.1); 1012 | } 1013 | to { 1014 | opacity: 0; 1015 | -webkit-transform: scale3d(.3, .3, .3); 1016 | transform: scale3d(.3, .3, .3); 1017 | } 1018 | } 1019 | 1020 | .bounceOut { 1021 | -webkit-animation-name: bounceOut; 1022 | animation-name: bounceOut; 1023 | } 1024 | 1025 | @-webkit-keyframes bounceOutDown { 1026 | 20% { 1027 | -webkit-transform: translate3d(0, 10px, 0); 1028 | transform: translate3d(0, 10px, 0); 1029 | } 1030 | 40%, 1031 | 45% { 1032 | opacity: 1; 1033 | -webkit-transform: translate3d(0, -20px, 0); 1034 | transform: translate3d(0, -20px, 0); 1035 | } 1036 | to { 1037 | opacity: 0; 1038 | -webkit-transform: translate3d(0, 2000px, 0); 1039 | transform: translate3d(0, 2000px, 0); 1040 | } 1041 | } 1042 | 1043 | @keyframes bounceOutDown { 1044 | 20% { 1045 | -webkit-transform: translate3d(0, 10px, 0); 1046 | transform: translate3d(0, 10px, 0); 1047 | } 1048 | 40%, 1049 | 45% { 1050 | opacity: 1; 1051 | -webkit-transform: translate3d(0, -20px, 0); 1052 | transform: translate3d(0, -20px, 0); 1053 | } 1054 | to { 1055 | opacity: 0; 1056 | -webkit-transform: translate3d(0, 2000px, 0); 1057 | transform: translate3d(0, 2000px, 0); 1058 | } 1059 | } 1060 | 1061 | .bounceOutDown { 1062 | -webkit-animation-name: bounceOutDown; 1063 | animation-name: bounceOutDown; 1064 | } 1065 | 1066 | @-webkit-keyframes bounceOutLeft { 1067 | 20% { 1068 | opacity: 1; 1069 | -webkit-transform: translate3d(20px, 0, 0); 1070 | transform: translate3d(20px, 0, 0); 1071 | } 1072 | to { 1073 | opacity: 0; 1074 | -webkit-transform: translate3d(-2000px, 0, 0); 1075 | transform: translate3d(-2000px, 0, 0); 1076 | } 1077 | } 1078 | 1079 | @keyframes bounceOutLeft { 1080 | 20% { 1081 | opacity: 1; 1082 | -webkit-transform: translate3d(20px, 0, 0); 1083 | transform: translate3d(20px, 0, 0); 1084 | } 1085 | to { 1086 | opacity: 0; 1087 | -webkit-transform: translate3d(-2000px, 0, 0); 1088 | transform: translate3d(-2000px, 0, 0); 1089 | } 1090 | } 1091 | 1092 | .bounceOutLeft { 1093 | -webkit-animation-name: bounceOutLeft; 1094 | animation-name: bounceOutLeft; 1095 | } 1096 | 1097 | @-webkit-keyframes bounceOutRight { 1098 | 20% { 1099 | opacity: 1; 1100 | -webkit-transform: translate3d(-20px, 0, 0); 1101 | transform: translate3d(-20px, 0, 0); 1102 | } 1103 | to { 1104 | opacity: 0; 1105 | -webkit-transform: translate3d(2000px, 0, 0); 1106 | transform: translate3d(2000px, 0, 0); 1107 | } 1108 | } 1109 | 1110 | @keyframes bounceOutRight { 1111 | 20% { 1112 | opacity: 1; 1113 | -webkit-transform: translate3d(-20px, 0, 0); 1114 | transform: translate3d(-20px, 0, 0); 1115 | } 1116 | to { 1117 | opacity: 0; 1118 | -webkit-transform: translate3d(2000px, 0, 0); 1119 | transform: translate3d(2000px, 0, 0); 1120 | } 1121 | } 1122 | 1123 | .bounceOutRight { 1124 | -webkit-animation-name: bounceOutRight; 1125 | animation-name: bounceOutRight; 1126 | } 1127 | 1128 | @-webkit-keyframes bounceOutUp { 1129 | 20% { 1130 | -webkit-transform: translate3d(0, -10px, 0); 1131 | transform: translate3d(0, -10px, 0); 1132 | } 1133 | 40%, 1134 | 45% { 1135 | opacity: 1; 1136 | -webkit-transform: translate3d(0, 20px, 0); 1137 | transform: translate3d(0, 20px, 0); 1138 | } 1139 | to { 1140 | opacity: 0; 1141 | -webkit-transform: translate3d(0, -2000px, 0); 1142 | transform: translate3d(0, -2000px, 0); 1143 | } 1144 | } 1145 | 1146 | @keyframes bounceOutUp { 1147 | 20% { 1148 | -webkit-transform: translate3d(0, -10px, 0); 1149 | transform: translate3d(0, -10px, 0); 1150 | } 1151 | 40%, 1152 | 45% { 1153 | opacity: 1; 1154 | -webkit-transform: translate3d(0, 20px, 0); 1155 | transform: translate3d(0, 20px, 0); 1156 | } 1157 | to { 1158 | opacity: 0; 1159 | -webkit-transform: translate3d(0, -2000px, 0); 1160 | transform: translate3d(0, -2000px, 0); 1161 | } 1162 | } 1163 | 1164 | .bounceOutUp { 1165 | -webkit-animation-name: bounceOutUp; 1166 | animation-name: bounceOutUp; 1167 | } 1168 | 1169 | @-webkit-keyframes fadeIn { 1170 | from { 1171 | opacity: 0; 1172 | } 1173 | to { 1174 | opacity: 1; 1175 | } 1176 | } 1177 | 1178 | @keyframes fadeIn { 1179 | from { 1180 | opacity: 0; 1181 | } 1182 | to { 1183 | opacity: 1; 1184 | } 1185 | } 1186 | 1187 | .fadeIn { 1188 | -webkit-animation-name: fadeIn; 1189 | animation-name: fadeIn; 1190 | } 1191 | 1192 | @-webkit-keyframes fadeInDown { 1193 | from { 1194 | opacity: 0; 1195 | -webkit-transform: translate3d(0, -100%, 0); 1196 | transform: translate3d(0, -100%, 0); 1197 | } 1198 | to { 1199 | opacity: 1; 1200 | -webkit-transform: none; 1201 | transform: none; 1202 | } 1203 | } 1204 | 1205 | @keyframes fadeInDown { 1206 | from { 1207 | opacity: 0; 1208 | -webkit-transform: translate3d(0, -100%, 0); 1209 | transform: translate3d(0, -100%, 0); 1210 | } 1211 | to { 1212 | opacity: 1; 1213 | -webkit-transform: none; 1214 | transform: none; 1215 | } 1216 | } 1217 | 1218 | .fadeInDown { 1219 | -webkit-animation-name: fadeInDown; 1220 | animation-name: fadeInDown; 1221 | } 1222 | 1223 | @-webkit-keyframes fadeInDownBig { 1224 | from { 1225 | opacity: 0; 1226 | -webkit-transform: translate3d(0, -2000px, 0); 1227 | transform: translate3d(0, -2000px, 0); 1228 | } 1229 | to { 1230 | opacity: 1; 1231 | -webkit-transform: none; 1232 | transform: none; 1233 | } 1234 | } 1235 | 1236 | @keyframes fadeInDownBig { 1237 | from { 1238 | opacity: 0; 1239 | -webkit-transform: translate3d(0, -2000px, 0); 1240 | transform: translate3d(0, -2000px, 0); 1241 | } 1242 | to { 1243 | opacity: 1; 1244 | -webkit-transform: none; 1245 | transform: none; 1246 | } 1247 | } 1248 | 1249 | .fadeInDownBig { 1250 | -webkit-animation-name: fadeInDownBig; 1251 | animation-name: fadeInDownBig; 1252 | } 1253 | 1254 | @-webkit-keyframes fadeInLeft { 1255 | from { 1256 | opacity: 1; 1257 | -webkit-transform: translate3d(-100%, 0, 0); 1258 | transform: translate3d(-100%, 0, 0); 1259 | } 1260 | to { 1261 | opacity: 1; 1262 | -webkit-transform: none; 1263 | transform: none; 1264 | } 1265 | } 1266 | 1267 | @keyframes fadeInLeft { 1268 | from { 1269 | opacity: 1; 1270 | -webkit-transform: translate3d(-100%, 0, 0); 1271 | transform: translate3d(-100%, 0, 0); 1272 | } 1273 | to { 1274 | opacity: 1; 1275 | -webkit-transform: none; 1276 | transform: none; 1277 | } 1278 | } 1279 | 1280 | .fadeInLeft { 1281 | -webkit-animation-name: fadeInLeft; 1282 | animation-name: fadeInLeft; 1283 | } 1284 | 1285 | @-webkit-keyframes fadeInLeftBig { 1286 | from { 1287 | opacity: 0; 1288 | -webkit-transform: translate3d(-2000px, 0, 0); 1289 | transform: translate3d(-2000px, 0, 0); 1290 | } 1291 | to { 1292 | opacity: 1; 1293 | -webkit-transform: none; 1294 | transform: none; 1295 | } 1296 | } 1297 | 1298 | @keyframes fadeInLeftBig { 1299 | from { 1300 | opacity: 0; 1301 | -webkit-transform: translate3d(-2000px, 0, 0); 1302 | transform: translate3d(-2000px, 0, 0); 1303 | } 1304 | to { 1305 | opacity: 1; 1306 | -webkit-transform: none; 1307 | transform: none; 1308 | } 1309 | } 1310 | 1311 | .fadeInLeftBig { 1312 | -webkit-animation-name: fadeInLeftBig; 1313 | animation-name: fadeInLeftBig; 1314 | } 1315 | 1316 | @-webkit-keyframes fadeInRight { 1317 | from { 1318 | opacity: 1; 1319 | -webkit-transform: translate3d(100%, 0, 0); 1320 | transform: translate3d(100%, 0, 0); 1321 | } 1322 | to { 1323 | opacity: 1; 1324 | -webkit-transform: none; 1325 | transform: none; 1326 | } 1327 | } 1328 | 1329 | @keyframes fadeInRight { 1330 | from { 1331 | opacity: 1; 1332 | -webkit-transform: translate3d(100%, 0, 0); 1333 | transform: translate3d(100%, 0, 0); 1334 | } 1335 | to { 1336 | opacity: 1; 1337 | -webkit-transform: none; 1338 | transform: none; 1339 | } 1340 | } 1341 | 1342 | .fadeInRight { 1343 | -webkit-animation-name: fadeInRight; 1344 | animation-name: fadeInRight; 1345 | } 1346 | 1347 | @-webkit-keyframes fadeInRightBig { 1348 | from { 1349 | opacity: 0; 1350 | -webkit-transform: translate3d(2000px, 0, 0); 1351 | transform: translate3d(2000px, 0, 0); 1352 | } 1353 | to { 1354 | opacity: 1; 1355 | -webkit-transform: none; 1356 | transform: none; 1357 | } 1358 | } 1359 | 1360 | @keyframes fadeInRightBig { 1361 | from { 1362 | opacity: 0; 1363 | -webkit-transform: translate3d(2000px, 0, 0); 1364 | transform: translate3d(2000px, 0, 0); 1365 | } 1366 | to { 1367 | opacity: 1; 1368 | -webkit-transform: none; 1369 | transform: none; 1370 | } 1371 | } 1372 | 1373 | .fadeInRightBig { 1374 | -webkit-animation-name: fadeInRightBig; 1375 | animation-name: fadeInRightBig; 1376 | } 1377 | 1378 | @-webkit-keyframes fadeInUp { 1379 | from { 1380 | opacity: 0; 1381 | -webkit-transform: translate3d(0, 100%, 0); 1382 | transform: translate3d(0, 100%, 0); 1383 | } 1384 | to { 1385 | opacity: 1; 1386 | -webkit-transform: none; 1387 | transform: none; 1388 | } 1389 | } 1390 | 1391 | @keyframes fadeInUp { 1392 | from { 1393 | opacity: 0; 1394 | -webkit-transform: translate3d(0, 100%, 0); 1395 | transform: translate3d(0, 100%, 0); 1396 | } 1397 | to { 1398 | opacity: 1; 1399 | -webkit-transform: none; 1400 | transform: none; 1401 | } 1402 | } 1403 | 1404 | .fadeInUp { 1405 | -webkit-animation-name: fadeInUp; 1406 | animation-name: fadeInUp; 1407 | } 1408 | 1409 | @-webkit-keyframes fadeInUpBig { 1410 | from { 1411 | opacity: 0; 1412 | -webkit-transform: translate3d(0, 2000px, 0); 1413 | transform: translate3d(0, 2000px, 0); 1414 | } 1415 | to { 1416 | opacity: 1; 1417 | -webkit-transform: none; 1418 | transform: none; 1419 | } 1420 | } 1421 | 1422 | @keyframes fadeInUpBig { 1423 | from { 1424 | opacity: 0; 1425 | -webkit-transform: translate3d(0, 2000px, 0); 1426 | transform: translate3d(0, 2000px, 0); 1427 | } 1428 | to { 1429 | opacity: 1; 1430 | -webkit-transform: none; 1431 | transform: none; 1432 | } 1433 | } 1434 | 1435 | .fadeInUpBig { 1436 | -webkit-animation-name: fadeInUpBig; 1437 | animation-name: fadeInUpBig; 1438 | } 1439 | 1440 | @-webkit-keyframes fadeOut { 1441 | from { 1442 | opacity: 1; 1443 | } 1444 | to { 1445 | opacity: 0; 1446 | } 1447 | } 1448 | 1449 | @keyframes fadeOut { 1450 | from { 1451 | opacity: 1; 1452 | } 1453 | to { 1454 | opacity: 0; 1455 | } 1456 | } 1457 | 1458 | .fadeOut { 1459 | -webkit-animation-name: fadeOut; 1460 | animation-name: fadeOut; 1461 | } 1462 | 1463 | @-webkit-keyframes fadeOutDown { 1464 | from { 1465 | opacity: 1; 1466 | } 1467 | to { 1468 | opacity: 0; 1469 | -webkit-transform: translate3d(0, 100%, 0); 1470 | transform: translate3d(0, 100%, 0); 1471 | } 1472 | } 1473 | 1474 | @keyframes fadeOutDown { 1475 | from { 1476 | opacity: 1; 1477 | } 1478 | to { 1479 | opacity: 0; 1480 | -webkit-transform: translate3d(0, 100%, 0); 1481 | transform: translate3d(0, 100%, 0); 1482 | } 1483 | } 1484 | 1485 | .fadeOutDown { 1486 | -webkit-animation-name: fadeOutDown; 1487 | animation-name: fadeOutDown; 1488 | } 1489 | 1490 | @-webkit-keyframes fadeOutDownBig { 1491 | from { 1492 | opacity: 1; 1493 | } 1494 | to { 1495 | opacity: 0; 1496 | -webkit-transform: translate3d(0, 2000px, 0); 1497 | transform: translate3d(0, 2000px, 0); 1498 | } 1499 | } 1500 | 1501 | @keyframes fadeOutDownBig { 1502 | from { 1503 | opacity: 1; 1504 | } 1505 | to { 1506 | opacity: 0; 1507 | -webkit-transform: translate3d(0, 2000px, 0); 1508 | transform: translate3d(0, 2000px, 0); 1509 | } 1510 | } 1511 | 1512 | .fadeOutDownBig { 1513 | -webkit-animation-name: fadeOutDownBig; 1514 | animation-name: fadeOutDownBig; 1515 | } 1516 | 1517 | @-webkit-keyframes fadeOutLeft { 1518 | from { 1519 | opacity: 1; 1520 | } 1521 | to { 1522 | opacity: 1; 1523 | -webkit-transform: translate3d(-100%, 0, 0); 1524 | transform: translate3d(-100%, 0, 0); 1525 | } 1526 | } 1527 | 1528 | @keyframes fadeOutLeft { 1529 | from { 1530 | opacity: 1; 1531 | } 1532 | to { 1533 | opacity: 1; 1534 | -webkit-transform: translate3d(-100%, 0, 0); 1535 | transform: translate3d(-100%, 0, 0); 1536 | } 1537 | } 1538 | 1539 | .fadeOutLeft { 1540 | -webkit-animation-name: fadeOutLeft; 1541 | animation-name: fadeOutLeft; 1542 | } 1543 | 1544 | @-webkit-keyframes fadeOutLeftBig { 1545 | from { 1546 | opacity: 1; 1547 | } 1548 | to { 1549 | opacity: 0; 1550 | -webkit-transform: translate3d(-2000px, 0, 0); 1551 | transform: translate3d(-2000px, 0, 0); 1552 | } 1553 | } 1554 | 1555 | @keyframes fadeOutLeftBig { 1556 | from { 1557 | opacity: 1; 1558 | } 1559 | to { 1560 | opacity: 0; 1561 | -webkit-transform: translate3d(-2000px, 0, 0); 1562 | transform: translate3d(-2000px, 0, 0); 1563 | } 1564 | } 1565 | 1566 | .fadeOutLeftBig { 1567 | -webkit-animation-name: fadeOutLeftBig; 1568 | animation-name: fadeOutLeftBig; 1569 | } 1570 | 1571 | @-webkit-keyframes fadeOutRight { 1572 | from { 1573 | opacity: 1; 1574 | } 1575 | to { 1576 | opacity: 0; 1577 | -webkit-transform: translate3d(100%, 0, 0); 1578 | transform: translate3d(100%, 0, 0); 1579 | } 1580 | } 1581 | 1582 | @keyframes fadeOutRight { 1583 | from { 1584 | opacity: 1; 1585 | } 1586 | to { 1587 | opacity: 0; 1588 | -webkit-transform: translate3d(100%, 0, 0); 1589 | transform: translate3d(100%, 0, 0); 1590 | } 1591 | } 1592 | 1593 | .fadeOutRight { 1594 | -webkit-animation-name: fadeOutRight; 1595 | animation-name: fadeOutRight; 1596 | } 1597 | 1598 | @-webkit-keyframes fadeOutRightBig { 1599 | from { 1600 | opacity: 1; 1601 | } 1602 | to { 1603 | opacity: 0; 1604 | -webkit-transform: translate3d(2000px, 0, 0); 1605 | transform: translate3d(2000px, 0, 0); 1606 | } 1607 | } 1608 | 1609 | @keyframes fadeOutRightBig { 1610 | from { 1611 | opacity: 1; 1612 | } 1613 | to { 1614 | opacity: 0; 1615 | -webkit-transform: translate3d(2000px, 0, 0); 1616 | transform: translate3d(2000px, 0, 0); 1617 | } 1618 | } 1619 | 1620 | .fadeOutRightBig { 1621 | -webkit-animation-name: fadeOutRightBig; 1622 | animation-name: fadeOutRightBig; 1623 | } 1624 | 1625 | @-webkit-keyframes fadeOutUp { 1626 | from { 1627 | opacity: 1; 1628 | } 1629 | to { 1630 | opacity: 0; 1631 | -webkit-transform: translate3d(0, -100%, 0); 1632 | transform: translate3d(0, -100%, 0); 1633 | } 1634 | } 1635 | 1636 | @keyframes fadeOutUp { 1637 | from { 1638 | opacity: 1; 1639 | } 1640 | to { 1641 | opacity: 0; 1642 | -webkit-transform: translate3d(0, -100%, 0); 1643 | transform: translate3d(0, -100%, 0); 1644 | } 1645 | } 1646 | 1647 | .fadeOutUp { 1648 | -webkit-animation-name: fadeOutUp; 1649 | animation-name: fadeOutUp; 1650 | } 1651 | 1652 | @-webkit-keyframes fadeOutUpBig { 1653 | from { 1654 | opacity: 1; 1655 | } 1656 | to { 1657 | opacity: 0; 1658 | -webkit-transform: translate3d(0, -2000px, 0); 1659 | transform: translate3d(0, -2000px, 0); 1660 | } 1661 | } 1662 | 1663 | @keyframes fadeOutUpBig { 1664 | from { 1665 | opacity: 1; 1666 | } 1667 | to { 1668 | opacity: 0; 1669 | -webkit-transform: translate3d(0, -2000px, 0); 1670 | transform: translate3d(0, -2000px, 0); 1671 | } 1672 | } 1673 | 1674 | .fadeOutUpBig { 1675 | -webkit-animation-name: fadeOutUpBig; 1676 | animation-name: fadeOutUpBig; 1677 | } 1678 | 1679 | @-webkit-keyframes flip { 1680 | from { 1681 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1682 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1683 | -webkit-animation-timing-function: ease-out; 1684 | animation-timing-function: ease-out; 1685 | } 1686 | 40% { 1687 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1688 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1689 | -webkit-animation-timing-function: ease-out; 1690 | animation-timing-function: ease-out; 1691 | } 1692 | 50% { 1693 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1694 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1695 | -webkit-animation-timing-function: ease-in; 1696 | animation-timing-function: ease-in; 1697 | } 1698 | 80% { 1699 | -webkit-transform: perspective(400px) scale3d(.95, .95, .95); 1700 | transform: perspective(400px) scale3d(.95, .95, .95); 1701 | -webkit-animation-timing-function: ease-in; 1702 | animation-timing-function: ease-in; 1703 | } 1704 | to { 1705 | -webkit-transform: perspective(400px); 1706 | transform: perspective(400px); 1707 | -webkit-animation-timing-function: ease-in; 1708 | animation-timing-function: ease-in; 1709 | } 1710 | } 1711 | 1712 | @keyframes flip { 1713 | from { 1714 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1715 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1716 | -webkit-animation-timing-function: ease-out; 1717 | animation-timing-function: ease-out; 1718 | } 1719 | 40% { 1720 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1721 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1722 | -webkit-animation-timing-function: ease-out; 1723 | animation-timing-function: ease-out; 1724 | } 1725 | 50% { 1726 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1727 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1728 | -webkit-animation-timing-function: ease-in; 1729 | animation-timing-function: ease-in; 1730 | } 1731 | 80% { 1732 | -webkit-transform: perspective(400px) scale3d(.95, .95, .95); 1733 | transform: perspective(400px) scale3d(.95, .95, .95); 1734 | -webkit-animation-timing-function: ease-in; 1735 | animation-timing-function: ease-in; 1736 | } 1737 | to { 1738 | -webkit-transform: perspective(400px); 1739 | transform: perspective(400px); 1740 | -webkit-animation-timing-function: ease-in; 1741 | animation-timing-function: ease-in; 1742 | } 1743 | } 1744 | 1745 | .animated.flip { 1746 | -webkit-backface-visibility: visible; 1747 | backface-visibility: visible; 1748 | -webkit-animation-name: flip; 1749 | animation-name: flip; 1750 | } 1751 | 1752 | @-webkit-keyframes flipInX { 1753 | from { 1754 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1755 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1756 | -webkit-animation-timing-function: ease-in; 1757 | animation-timing-function: ease-in; 1758 | opacity: 0; 1759 | } 1760 | 40% { 1761 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1762 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1763 | -webkit-animation-timing-function: ease-in; 1764 | animation-timing-function: ease-in; 1765 | } 1766 | 60% { 1767 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1768 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1769 | opacity: 1; 1770 | } 1771 | 80% { 1772 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1773 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1774 | } 1775 | to { 1776 | -webkit-transform: perspective(400px); 1777 | transform: perspective(400px); 1778 | } 1779 | } 1780 | 1781 | @keyframes flipInX { 1782 | from { 1783 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1784 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1785 | -webkit-animation-timing-function: ease-in; 1786 | animation-timing-function: ease-in; 1787 | opacity: 0; 1788 | } 1789 | 40% { 1790 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1791 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1792 | -webkit-animation-timing-function: ease-in; 1793 | animation-timing-function: ease-in; 1794 | } 1795 | 60% { 1796 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1797 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1798 | opacity: 1; 1799 | } 1800 | 80% { 1801 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1802 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1803 | } 1804 | to { 1805 | -webkit-transform: perspective(400px); 1806 | transform: perspective(400px); 1807 | } 1808 | } 1809 | 1810 | .flipInX { 1811 | -webkit-backface-visibility: visible !important; 1812 | backface-visibility: visible !important; 1813 | -webkit-animation-name: flipInX; 1814 | animation-name: flipInX; 1815 | } 1816 | 1817 | @-webkit-keyframes flipInY { 1818 | from { 1819 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1820 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1821 | -webkit-animation-timing-function: ease-in; 1822 | animation-timing-function: ease-in; 1823 | opacity: 0; 1824 | } 1825 | 40% { 1826 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1827 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1828 | -webkit-animation-timing-function: ease-in; 1829 | animation-timing-function: ease-in; 1830 | } 1831 | 60% { 1832 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1833 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1834 | opacity: 1; 1835 | } 1836 | 80% { 1837 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1838 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1839 | } 1840 | to { 1841 | -webkit-transform: perspective(400px); 1842 | transform: perspective(400px); 1843 | } 1844 | } 1845 | 1846 | @keyframes flipInY { 1847 | from { 1848 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1849 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1850 | -webkit-animation-timing-function: ease-in; 1851 | animation-timing-function: ease-in; 1852 | opacity: 0; 1853 | } 1854 | 40% { 1855 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1856 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1857 | -webkit-animation-timing-function: ease-in; 1858 | animation-timing-function: ease-in; 1859 | } 1860 | 60% { 1861 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1862 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1863 | opacity: 1; 1864 | } 1865 | 80% { 1866 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1867 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1868 | } 1869 | to { 1870 | -webkit-transform: perspective(400px); 1871 | transform: perspective(400px); 1872 | } 1873 | } 1874 | 1875 | .flipInY { 1876 | -webkit-backface-visibility: visible !important; 1877 | backface-visibility: visible !important; 1878 | -webkit-animation-name: flipInY; 1879 | animation-name: flipInY; 1880 | } 1881 | 1882 | @-webkit-keyframes flipOutX { 1883 | from { 1884 | -webkit-transform: perspective(400px); 1885 | transform: perspective(400px); 1886 | } 1887 | 30% { 1888 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1889 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1890 | opacity: 1; 1891 | } 1892 | to { 1893 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1894 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1895 | opacity: 0; 1896 | } 1897 | } 1898 | 1899 | @keyframes flipOutX { 1900 | from { 1901 | -webkit-transform: perspective(400px); 1902 | transform: perspective(400px); 1903 | } 1904 | 30% { 1905 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1906 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1907 | opacity: 1; 1908 | } 1909 | to { 1910 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1911 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1912 | opacity: 0; 1913 | } 1914 | } 1915 | 1916 | .flipOutX { 1917 | -webkit-animation-name: flipOutX; 1918 | animation-name: flipOutX; 1919 | -webkit-backface-visibility: visible !important; 1920 | backface-visibility: visible !important; 1921 | } 1922 | 1923 | @-webkit-keyframes flipOutY { 1924 | from { 1925 | -webkit-transform: perspective(400px); 1926 | transform: perspective(400px); 1927 | } 1928 | 30% { 1929 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 1930 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 1931 | opacity: 1; 1932 | } 1933 | to { 1934 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1935 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1936 | opacity: 0; 1937 | } 1938 | } 1939 | 1940 | @keyframes flipOutY { 1941 | from { 1942 | -webkit-transform: perspective(400px); 1943 | transform: perspective(400px); 1944 | } 1945 | 30% { 1946 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 1947 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 1948 | opacity: 1; 1949 | } 1950 | to { 1951 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1952 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1953 | opacity: 0; 1954 | } 1955 | } 1956 | 1957 | .flipOutY { 1958 | -webkit-backface-visibility: visible !important; 1959 | backface-visibility: visible !important; 1960 | -webkit-animation-name: flipOutY; 1961 | animation-name: flipOutY; 1962 | } 1963 | 1964 | @-webkit-keyframes lightSpeedIn { 1965 | from { 1966 | -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); 1967 | transform: translate3d(100%, 0, 0) skewX(-30deg); 1968 | opacity: 0; 1969 | } 1970 | 60% { 1971 | -webkit-transform: skewX(20deg); 1972 | transform: skewX(20deg); 1973 | opacity: 1; 1974 | } 1975 | 80% { 1976 | -webkit-transform: skewX(-5deg); 1977 | transform: skewX(-5deg); 1978 | opacity: 1; 1979 | } 1980 | to { 1981 | -webkit-transform: none; 1982 | transform: none; 1983 | opacity: 1; 1984 | } 1985 | } 1986 | 1987 | @keyframes lightSpeedIn { 1988 | from { 1989 | -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); 1990 | transform: translate3d(100%, 0, 0) skewX(-30deg); 1991 | opacity: 0; 1992 | } 1993 | 60% { 1994 | -webkit-transform: skewX(20deg); 1995 | transform: skewX(20deg); 1996 | opacity: 1; 1997 | } 1998 | 80% { 1999 | -webkit-transform: skewX(-5deg); 2000 | transform: skewX(-5deg); 2001 | opacity: 1; 2002 | } 2003 | to { 2004 | -webkit-transform: none; 2005 | transform: none; 2006 | opacity: 1; 2007 | } 2008 | } 2009 | 2010 | .lightSpeedIn { 2011 | -webkit-animation-name: lightSpeedIn; 2012 | animation-name: lightSpeedIn; 2013 | -webkit-animation-timing-function: ease-out; 2014 | animation-timing-function: ease-out; 2015 | } 2016 | 2017 | @-webkit-keyframes lightSpeedOut { 2018 | from { 2019 | opacity: 1; 2020 | } 2021 | to { 2022 | -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); 2023 | transform: translate3d(100%, 0, 0) skewX(30deg); 2024 | opacity: 0; 2025 | } 2026 | } 2027 | 2028 | @keyframes lightSpeedOut { 2029 | from { 2030 | opacity: 1; 2031 | } 2032 | to { 2033 | -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); 2034 | transform: translate3d(100%, 0, 0) skewX(30deg); 2035 | opacity: 0; 2036 | } 2037 | } 2038 | 2039 | .lightSpeedOut { 2040 | -webkit-animation-name: lightSpeedOut; 2041 | animation-name: lightSpeedOut; 2042 | -webkit-animation-timing-function: ease-in; 2043 | animation-timing-function: ease-in; 2044 | } 2045 | 2046 | @-webkit-keyframes rotateIn { 2047 | from { 2048 | -webkit-transform-origin: center; 2049 | transform-origin: center; 2050 | -webkit-transform: rotate3d(0, 0, 1, -200deg); 2051 | transform: rotate3d(0, 0, 1, -200deg); 2052 | opacity: 0; 2053 | } 2054 | to { 2055 | -webkit-transform-origin: center; 2056 | transform-origin: center; 2057 | -webkit-transform: none; 2058 | transform: none; 2059 | opacity: 1; 2060 | } 2061 | } 2062 | 2063 | @keyframes rotateIn { 2064 | from { 2065 | -webkit-transform-origin: center; 2066 | transform-origin: center; 2067 | -webkit-transform: rotate3d(0, 0, 1, -200deg); 2068 | transform: rotate3d(0, 0, 1, -200deg); 2069 | opacity: 0; 2070 | } 2071 | to { 2072 | -webkit-transform-origin: center; 2073 | transform-origin: center; 2074 | -webkit-transform: none; 2075 | transform: none; 2076 | opacity: 1; 2077 | } 2078 | } 2079 | 2080 | .rotateIn { 2081 | -webkit-animation-name: rotateIn; 2082 | animation-name: rotateIn; 2083 | } 2084 | 2085 | @-webkit-keyframes rotateInDownLeft { 2086 | from { 2087 | -webkit-transform-origin: left bottom; 2088 | transform-origin: left bottom; 2089 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2090 | transform: rotate3d(0, 0, 1, -45deg); 2091 | opacity: 0; 2092 | } 2093 | to { 2094 | -webkit-transform-origin: left bottom; 2095 | transform-origin: left bottom; 2096 | -webkit-transform: none; 2097 | transform: none; 2098 | opacity: 1; 2099 | } 2100 | } 2101 | 2102 | @keyframes rotateInDownLeft { 2103 | from { 2104 | -webkit-transform-origin: left bottom; 2105 | transform-origin: left bottom; 2106 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2107 | transform: rotate3d(0, 0, 1, -45deg); 2108 | opacity: 0; 2109 | } 2110 | to { 2111 | -webkit-transform-origin: left bottom; 2112 | transform-origin: left bottom; 2113 | -webkit-transform: none; 2114 | transform: none; 2115 | opacity: 1; 2116 | } 2117 | } 2118 | 2119 | .rotateInDownLeft { 2120 | -webkit-animation-name: rotateInDownLeft; 2121 | animation-name: rotateInDownLeft; 2122 | } 2123 | 2124 | @-webkit-keyframes rotateInDownRight { 2125 | from { 2126 | -webkit-transform-origin: right bottom; 2127 | transform-origin: right bottom; 2128 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2129 | transform: rotate3d(0, 0, 1, 45deg); 2130 | opacity: 0; 2131 | } 2132 | to { 2133 | -webkit-transform-origin: right bottom; 2134 | transform-origin: right bottom; 2135 | -webkit-transform: none; 2136 | transform: none; 2137 | opacity: 1; 2138 | } 2139 | } 2140 | 2141 | @keyframes rotateInDownRight { 2142 | from { 2143 | -webkit-transform-origin: right bottom; 2144 | transform-origin: right bottom; 2145 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2146 | transform: rotate3d(0, 0, 1, 45deg); 2147 | opacity: 0; 2148 | } 2149 | to { 2150 | -webkit-transform-origin: right bottom; 2151 | transform-origin: right bottom; 2152 | -webkit-transform: none; 2153 | transform: none; 2154 | opacity: 1; 2155 | } 2156 | } 2157 | 2158 | .rotateInDownRight { 2159 | -webkit-animation-name: rotateInDownRight; 2160 | animation-name: rotateInDownRight; 2161 | } 2162 | 2163 | @-webkit-keyframes rotateInUpLeft { 2164 | from { 2165 | -webkit-transform-origin: left bottom; 2166 | transform-origin: left bottom; 2167 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2168 | transform: rotate3d(0, 0, 1, 45deg); 2169 | opacity: 0; 2170 | } 2171 | to { 2172 | -webkit-transform-origin: left bottom; 2173 | transform-origin: left bottom; 2174 | -webkit-transform: none; 2175 | transform: none; 2176 | opacity: 1; 2177 | } 2178 | } 2179 | 2180 | @keyframes rotateInUpLeft { 2181 | from { 2182 | -webkit-transform-origin: left bottom; 2183 | transform-origin: left bottom; 2184 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2185 | transform: rotate3d(0, 0, 1, 45deg); 2186 | opacity: 0; 2187 | } 2188 | to { 2189 | -webkit-transform-origin: left bottom; 2190 | transform-origin: left bottom; 2191 | -webkit-transform: none; 2192 | transform: none; 2193 | opacity: 1; 2194 | } 2195 | } 2196 | 2197 | .rotateInUpLeft { 2198 | -webkit-animation-name: rotateInUpLeft; 2199 | animation-name: rotateInUpLeft; 2200 | } 2201 | 2202 | @-webkit-keyframes rotateInUpRight { 2203 | from { 2204 | -webkit-transform-origin: right bottom; 2205 | transform-origin: right bottom; 2206 | -webkit-transform: rotate3d(0, 0, 1, -90deg); 2207 | transform: rotate3d(0, 0, 1, -90deg); 2208 | opacity: 0; 2209 | } 2210 | to { 2211 | -webkit-transform-origin: right bottom; 2212 | transform-origin: right bottom; 2213 | -webkit-transform: none; 2214 | transform: none; 2215 | opacity: 1; 2216 | } 2217 | } 2218 | 2219 | @keyframes rotateInUpRight { 2220 | from { 2221 | -webkit-transform-origin: right bottom; 2222 | transform-origin: right bottom; 2223 | -webkit-transform: rotate3d(0, 0, 1, -90deg); 2224 | transform: rotate3d(0, 0, 1, -90deg); 2225 | opacity: 0; 2226 | } 2227 | to { 2228 | -webkit-transform-origin: right bottom; 2229 | transform-origin: right bottom; 2230 | -webkit-transform: none; 2231 | transform: none; 2232 | opacity: 1; 2233 | } 2234 | } 2235 | 2236 | .rotateInUpRight { 2237 | -webkit-animation-name: rotateInUpRight; 2238 | animation-name: rotateInUpRight; 2239 | } 2240 | 2241 | @-webkit-keyframes rotateOut { 2242 | from { 2243 | -webkit-transform-origin: center; 2244 | transform-origin: center; 2245 | opacity: 1; 2246 | } 2247 | to { 2248 | -webkit-transform-origin: center; 2249 | transform-origin: center; 2250 | -webkit-transform: rotate3d(0, 0, 1, 200deg); 2251 | transform: rotate3d(0, 0, 1, 200deg); 2252 | opacity: 0; 2253 | } 2254 | } 2255 | 2256 | @keyframes rotateOut { 2257 | from { 2258 | -webkit-transform-origin: center; 2259 | transform-origin: center; 2260 | opacity: 1; 2261 | } 2262 | to { 2263 | -webkit-transform-origin: center; 2264 | transform-origin: center; 2265 | -webkit-transform: rotate3d(0, 0, 1, 200deg); 2266 | transform: rotate3d(0, 0, 1, 200deg); 2267 | opacity: 0; 2268 | } 2269 | } 2270 | 2271 | .rotateOut { 2272 | -webkit-animation-name: rotateOut; 2273 | animation-name: rotateOut; 2274 | } 2275 | 2276 | @-webkit-keyframes rotateOutDownLeft { 2277 | from { 2278 | -webkit-transform-origin: left bottom; 2279 | transform-origin: left bottom; 2280 | opacity: 1; 2281 | } 2282 | to { 2283 | -webkit-transform-origin: left bottom; 2284 | transform-origin: left bottom; 2285 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2286 | transform: rotate3d(0, 0, 1, 45deg); 2287 | opacity: 0; 2288 | } 2289 | } 2290 | 2291 | @keyframes rotateOutDownLeft { 2292 | from { 2293 | -webkit-transform-origin: left bottom; 2294 | transform-origin: left bottom; 2295 | opacity: 1; 2296 | } 2297 | to { 2298 | -webkit-transform-origin: left bottom; 2299 | transform-origin: left bottom; 2300 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2301 | transform: rotate3d(0, 0, 1, 45deg); 2302 | opacity: 0; 2303 | } 2304 | } 2305 | 2306 | .rotateOutDownLeft { 2307 | -webkit-animation-name: rotateOutDownLeft; 2308 | animation-name: rotateOutDownLeft; 2309 | } 2310 | 2311 | @-webkit-keyframes rotateOutDownRight { 2312 | from { 2313 | -webkit-transform-origin: right bottom; 2314 | transform-origin: right bottom; 2315 | opacity: 1; 2316 | } 2317 | to { 2318 | -webkit-transform-origin: right bottom; 2319 | transform-origin: right bottom; 2320 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2321 | transform: rotate3d(0, 0, 1, -45deg); 2322 | opacity: 0; 2323 | } 2324 | } 2325 | 2326 | @keyframes rotateOutDownRight { 2327 | from { 2328 | -webkit-transform-origin: right bottom; 2329 | transform-origin: right bottom; 2330 | opacity: 1; 2331 | } 2332 | to { 2333 | -webkit-transform-origin: right bottom; 2334 | transform-origin: right bottom; 2335 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2336 | transform: rotate3d(0, 0, 1, -45deg); 2337 | opacity: 0; 2338 | } 2339 | } 2340 | 2341 | .rotateOutDownRight { 2342 | -webkit-animation-name: rotateOutDownRight; 2343 | animation-name: rotateOutDownRight; 2344 | } 2345 | 2346 | @-webkit-keyframes rotateOutUpLeft { 2347 | from { 2348 | -webkit-transform-origin: left bottom; 2349 | transform-origin: left bottom; 2350 | opacity: 1; 2351 | } 2352 | to { 2353 | -webkit-transform-origin: left bottom; 2354 | transform-origin: left bottom; 2355 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2356 | transform: rotate3d(0, 0, 1, -45deg); 2357 | opacity: 0; 2358 | } 2359 | } 2360 | 2361 | @keyframes rotateOutUpLeft { 2362 | from { 2363 | -webkit-transform-origin: left bottom; 2364 | transform-origin: left bottom; 2365 | opacity: 1; 2366 | } 2367 | to { 2368 | -webkit-transform-origin: left bottom; 2369 | transform-origin: left bottom; 2370 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2371 | transform: rotate3d(0, 0, 1, -45deg); 2372 | opacity: 0; 2373 | } 2374 | } 2375 | 2376 | .rotateOutUpLeft { 2377 | -webkit-animation-name: rotateOutUpLeft; 2378 | animation-name: rotateOutUpLeft; 2379 | } 2380 | 2381 | @-webkit-keyframes rotateOutUpRight { 2382 | from { 2383 | -webkit-transform-origin: right bottom; 2384 | transform-origin: right bottom; 2385 | opacity: 1; 2386 | } 2387 | to { 2388 | -webkit-transform-origin: right bottom; 2389 | transform-origin: right bottom; 2390 | -webkit-transform: rotate3d(0, 0, 1, 90deg); 2391 | transform: rotate3d(0, 0, 1, 90deg); 2392 | opacity: 0; 2393 | } 2394 | } 2395 | 2396 | @keyframes rotateOutUpRight { 2397 | from { 2398 | -webkit-transform-origin: right bottom; 2399 | transform-origin: right bottom; 2400 | opacity: 1; 2401 | } 2402 | to { 2403 | -webkit-transform-origin: right bottom; 2404 | transform-origin: right bottom; 2405 | -webkit-transform: rotate3d(0, 0, 1, 90deg); 2406 | transform: rotate3d(0, 0, 1, 90deg); 2407 | opacity: 0; 2408 | } 2409 | } 2410 | 2411 | .rotateOutUpRight { 2412 | -webkit-animation-name: rotateOutUpRight; 2413 | animation-name: rotateOutUpRight; 2414 | } 2415 | 2416 | @-webkit-keyframes hinge { 2417 | 0% { 2418 | -webkit-transform-origin: top left; 2419 | transform-origin: top left; 2420 | -webkit-animation-timing-function: ease-in-out; 2421 | animation-timing-function: ease-in-out; 2422 | } 2423 | 20%, 2424 | 60% { 2425 | -webkit-transform: rotate3d(0, 0, 1, 80deg); 2426 | transform: rotate3d(0, 0, 1, 80deg); 2427 | -webkit-transform-origin: top left; 2428 | transform-origin: top left; 2429 | -webkit-animation-timing-function: ease-in-out; 2430 | animation-timing-function: ease-in-out; 2431 | } 2432 | 40%, 2433 | 80% { 2434 | -webkit-transform: rotate3d(0, 0, 1, 60deg); 2435 | transform: rotate3d(0, 0, 1, 60deg); 2436 | -webkit-transform-origin: top left; 2437 | transform-origin: top left; 2438 | -webkit-animation-timing-function: ease-in-out; 2439 | animation-timing-function: ease-in-out; 2440 | opacity: 1; 2441 | } 2442 | to { 2443 | -webkit-transform: translate3d(0, 700px, 0); 2444 | transform: translate3d(0, 700px, 0); 2445 | opacity: 0; 2446 | } 2447 | } 2448 | 2449 | @keyframes hinge { 2450 | 0% { 2451 | -webkit-transform-origin: top left; 2452 | transform-origin: top left; 2453 | -webkit-animation-timing-function: ease-in-out; 2454 | animation-timing-function: ease-in-out; 2455 | } 2456 | 20%, 2457 | 60% { 2458 | -webkit-transform: rotate3d(0, 0, 1, 80deg); 2459 | transform: rotate3d(0, 0, 1, 80deg); 2460 | -webkit-transform-origin: top left; 2461 | transform-origin: top left; 2462 | -webkit-animation-timing-function: ease-in-out; 2463 | animation-timing-function: ease-in-out; 2464 | } 2465 | 40%, 2466 | 80% { 2467 | -webkit-transform: rotate3d(0, 0, 1, 60deg); 2468 | transform: rotate3d(0, 0, 1, 60deg); 2469 | -webkit-transform-origin: top left; 2470 | transform-origin: top left; 2471 | -webkit-animation-timing-function: ease-in-out; 2472 | animation-timing-function: ease-in-out; 2473 | opacity: 1; 2474 | } 2475 | to { 2476 | -webkit-transform: translate3d(0, 700px, 0); 2477 | transform: translate3d(0, 700px, 0); 2478 | opacity: 0; 2479 | } 2480 | } 2481 | 2482 | .hinge { 2483 | -webkit-animation-name: hinge; 2484 | animation-name: hinge; 2485 | } 2486 | 2487 | 2488 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2489 | 2490 | @-webkit-keyframes rollIn { 2491 | from { 2492 | opacity: 0; 2493 | -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2494 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2495 | } 2496 | to { 2497 | opacity: 1; 2498 | -webkit-transform: none; 2499 | transform: none; 2500 | } 2501 | } 2502 | 2503 | @keyframes rollIn { 2504 | from { 2505 | opacity: 0; 2506 | -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2507 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2508 | } 2509 | to { 2510 | opacity: 1; 2511 | -webkit-transform: none; 2512 | transform: none; 2513 | } 2514 | } 2515 | 2516 | .rollIn { 2517 | -webkit-animation-name: rollIn; 2518 | animation-name: rollIn; 2519 | } 2520 | 2521 | 2522 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2523 | 2524 | @-webkit-keyframes rollOut { 2525 | from { 2526 | opacity: 1; 2527 | } 2528 | to { 2529 | opacity: 0; 2530 | -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2531 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2532 | } 2533 | } 2534 | 2535 | @keyframes rollOut { 2536 | from { 2537 | opacity: 1; 2538 | } 2539 | to { 2540 | opacity: 0; 2541 | -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2542 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2543 | } 2544 | } 2545 | 2546 | .rollOut { 2547 | -webkit-animation-name: rollOut; 2548 | animation-name: rollOut; 2549 | } 2550 | 2551 | @-webkit-keyframes zoomIn { 2552 | from { 2553 | opacity: 0; 2554 | -webkit-transform: scale3d(.3, .3, .3); 2555 | transform: scale3d(.3, .3, .3); 2556 | } 2557 | 50% { 2558 | opacity: 1; 2559 | } 2560 | } 2561 | 2562 | @keyframes zoomIn { 2563 | from { 2564 | opacity: 0; 2565 | -webkit-transform: scale3d(.3, .3, .3); 2566 | transform: scale3d(.3, .3, .3); 2567 | } 2568 | 50% { 2569 | opacity: 1; 2570 | } 2571 | } 2572 | 2573 | .zoomIn { 2574 | -webkit-animation-name: zoomIn; 2575 | animation-name: zoomIn; 2576 | } 2577 | 2578 | @-webkit-keyframes zoomInDown { 2579 | from { 2580 | opacity: 0; 2581 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2582 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2583 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2584 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2585 | } 2586 | 60% { 2587 | opacity: 1; 2588 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2589 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2590 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2591 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2592 | } 2593 | } 2594 | 2595 | @keyframes zoomInDown { 2596 | from { 2597 | opacity: 0; 2598 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2599 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2600 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2601 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2602 | } 2603 | 60% { 2604 | opacity: 1; 2605 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2606 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2607 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2608 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2609 | } 2610 | } 2611 | 2612 | .zoomInDown { 2613 | -webkit-animation-name: zoomInDown; 2614 | animation-name: zoomInDown; 2615 | } 2616 | 2617 | @-webkit-keyframes zoomInLeft { 2618 | from { 2619 | opacity: 0; 2620 | -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2621 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2622 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2623 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2624 | } 2625 | 60% { 2626 | opacity: 1; 2627 | -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2628 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2629 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2630 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2631 | } 2632 | } 2633 | 2634 | @keyframes zoomInLeft { 2635 | from { 2636 | opacity: 0; 2637 | -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2638 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2639 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2640 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2641 | } 2642 | 60% { 2643 | opacity: 1; 2644 | -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2645 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2646 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2647 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2648 | } 2649 | } 2650 | 2651 | .zoomInLeft { 2652 | -webkit-animation-name: zoomInLeft; 2653 | animation-name: zoomInLeft; 2654 | } 2655 | 2656 | @-webkit-keyframes zoomInRight { 2657 | from { 2658 | opacity: 0; 2659 | -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2660 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2661 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2662 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2663 | } 2664 | 60% { 2665 | opacity: 1; 2666 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2667 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2668 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2669 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2670 | } 2671 | } 2672 | 2673 | @keyframes zoomInRight { 2674 | from { 2675 | opacity: 0; 2676 | -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2677 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2678 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2679 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2680 | } 2681 | 60% { 2682 | opacity: 1; 2683 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2684 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2685 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2686 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2687 | } 2688 | } 2689 | 2690 | .zoomInRight { 2691 | -webkit-animation-name: zoomInRight; 2692 | animation-name: zoomInRight; 2693 | } 2694 | 2695 | @-webkit-keyframes zoomInUp { 2696 | from { 2697 | opacity: 0; 2698 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2699 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2700 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2701 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2702 | } 2703 | 60% { 2704 | opacity: 1; 2705 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2706 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2707 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2708 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2709 | } 2710 | } 2711 | 2712 | @keyframes zoomInUp { 2713 | from { 2714 | opacity: 0; 2715 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2716 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2717 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2718 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2719 | } 2720 | 60% { 2721 | opacity: 1; 2722 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2723 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2724 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2725 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2726 | } 2727 | } 2728 | 2729 | .zoomInUp { 2730 | -webkit-animation-name: zoomInUp; 2731 | animation-name: zoomInUp; 2732 | } 2733 | 2734 | @-webkit-keyframes zoomOut { 2735 | from { 2736 | opacity: 1; 2737 | } 2738 | 50% { 2739 | opacity: 0; 2740 | -webkit-transform: scale3d(.3, .3, .3); 2741 | transform: scale3d(.3, .3, .3); 2742 | } 2743 | to { 2744 | opacity: 0; 2745 | } 2746 | } 2747 | 2748 | @keyframes zoomOut { 2749 | from { 2750 | opacity: 1; 2751 | } 2752 | 50% { 2753 | opacity: 0; 2754 | -webkit-transform: scale3d(.3, .3, .3); 2755 | transform: scale3d(.3, .3, .3); 2756 | } 2757 | to { 2758 | opacity: 0; 2759 | } 2760 | } 2761 | 2762 | .zoomOut { 2763 | -webkit-animation-name: zoomOut; 2764 | animation-name: zoomOut; 2765 | } 2766 | 2767 | @-webkit-keyframes zoomOutDown { 2768 | 40% { 2769 | opacity: 1; 2770 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2771 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2772 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2773 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2774 | } 2775 | to { 2776 | opacity: 0; 2777 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2778 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2779 | -webkit-transform-origin: center bottom; 2780 | transform-origin: center bottom; 2781 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2782 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2783 | } 2784 | } 2785 | 2786 | @keyframes zoomOutDown { 2787 | 40% { 2788 | opacity: 1; 2789 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2790 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2791 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2792 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2793 | } 2794 | to { 2795 | opacity: 0; 2796 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2797 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2798 | -webkit-transform-origin: center bottom; 2799 | transform-origin: center bottom; 2800 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2801 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2802 | } 2803 | } 2804 | 2805 | .zoomOutDown { 2806 | -webkit-animation-name: zoomOutDown; 2807 | animation-name: zoomOutDown; 2808 | } 2809 | 2810 | @-webkit-keyframes zoomOutLeft { 2811 | 40% { 2812 | opacity: 1; 2813 | -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2814 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2815 | } 2816 | to { 2817 | opacity: 0; 2818 | -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); 2819 | transform: scale(.1) translate3d(-2000px, 0, 0); 2820 | -webkit-transform-origin: left center; 2821 | transform-origin: left center; 2822 | } 2823 | } 2824 | 2825 | @keyframes zoomOutLeft { 2826 | 40% { 2827 | opacity: 1; 2828 | -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2829 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2830 | } 2831 | to { 2832 | opacity: 0; 2833 | -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); 2834 | transform: scale(.1) translate3d(-2000px, 0, 0); 2835 | -webkit-transform-origin: left center; 2836 | transform-origin: left center; 2837 | } 2838 | } 2839 | 2840 | .zoomOutLeft { 2841 | -webkit-animation-name: zoomOutLeft; 2842 | animation-name: zoomOutLeft; 2843 | } 2844 | 2845 | @-webkit-keyframes zoomOutRight { 2846 | 40% { 2847 | opacity: 1; 2848 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 2849 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 2850 | } 2851 | to { 2852 | opacity: 0; 2853 | -webkit-transform: scale(.1) translate3d(2000px, 0, 0); 2854 | transform: scale(.1) translate3d(2000px, 0, 0); 2855 | -webkit-transform-origin: right center; 2856 | transform-origin: right center; 2857 | } 2858 | } 2859 | 2860 | @keyframes zoomOutRight { 2861 | 40% { 2862 | opacity: 1; 2863 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 2864 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 2865 | } 2866 | to { 2867 | opacity: 0; 2868 | -webkit-transform: scale(.1) translate3d(2000px, 0, 0); 2869 | transform: scale(.1) translate3d(2000px, 0, 0); 2870 | -webkit-transform-origin: right center; 2871 | transform-origin: right center; 2872 | } 2873 | } 2874 | 2875 | .zoomOutRight { 2876 | -webkit-animation-name: zoomOutRight; 2877 | animation-name: zoomOutRight; 2878 | } 2879 | 2880 | @-webkit-keyframes zoomOutUp { 2881 | 40% { 2882 | opacity: 1; 2883 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2884 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2885 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2886 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2887 | } 2888 | to { 2889 | opacity: 0; 2890 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 2891 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 2892 | -webkit-transform-origin: center bottom; 2893 | transform-origin: center bottom; 2894 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2895 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2896 | } 2897 | } 2898 | 2899 | @keyframes zoomOutUp { 2900 | 40% { 2901 | opacity: 1; 2902 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2903 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2904 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2905 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2906 | } 2907 | to { 2908 | opacity: 0; 2909 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 2910 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 2911 | -webkit-transform-origin: center bottom; 2912 | transform-origin: center bottom; 2913 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2914 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2915 | } 2916 | } 2917 | 2918 | .zoomOutUp { 2919 | -webkit-animation-name: zoomOutUp; 2920 | animation-name: zoomOutUp; 2921 | } 2922 | 2923 | @-webkit-keyframes slideInDown { 2924 | from { 2925 | -webkit-transform: translate3d(0, -100%, 0); 2926 | transform: translate3d(0, -100%, 0); 2927 | visibility: visible; 2928 | } 2929 | to { 2930 | -webkit-transform: translate3d(0, 0, 0); 2931 | transform: translate3d(0, 0, 0); 2932 | } 2933 | } 2934 | 2935 | @keyframes slideInDown { 2936 | from { 2937 | -webkit-transform: translate3d(0, -100%, 0); 2938 | transform: translate3d(0, -100%, 0); 2939 | visibility: visible; 2940 | } 2941 | to { 2942 | -webkit-transform: translate3d(0, 0, 0); 2943 | transform: translate3d(0, 0, 0); 2944 | } 2945 | } 2946 | 2947 | .slideInDown { 2948 | -webkit-animation-name: slideInDown; 2949 | animation-name: slideInDown; 2950 | } 2951 | 2952 | @-webkit-keyframes slideInLeft { 2953 | from { 2954 | -webkit-transform: translate3d(-100%, 0, 0); 2955 | transform: translate3d(-100%, 0, 0); 2956 | visibility: visible; 2957 | } 2958 | to { 2959 | -webkit-transform: translate3d(0, 0, 0); 2960 | transform: translate3d(0, 0, 0); 2961 | } 2962 | } 2963 | 2964 | @keyframes slideInLeft { 2965 | from { 2966 | -webkit-transform: translate3d(-100%, 0, 0); 2967 | transform: translate3d(-100%, 0, 0); 2968 | visibility: visible; 2969 | } 2970 | to { 2971 | -webkit-transform: translate3d(0, 0, 0); 2972 | transform: translate3d(0, 0, 0); 2973 | } 2974 | } 2975 | 2976 | .slideInLeft { 2977 | -webkit-animation-name: slideInLeft; 2978 | animation-name: slideInLeft; 2979 | } 2980 | 2981 | @-webkit-keyframes slideInRight { 2982 | from { 2983 | -webkit-transform: translate3d(100%, 0, 0); 2984 | transform: translate3d(100%, 0, 0); 2985 | visibility: visible; 2986 | } 2987 | to { 2988 | -webkit-transform: translate3d(0, 0, 0); 2989 | transform: translate3d(0, 0, 0); 2990 | } 2991 | } 2992 | 2993 | @keyframes slideInRight { 2994 | from { 2995 | -webkit-transform: translate3d(100%, 0, 0); 2996 | transform: translate3d(100%, 0, 0); 2997 | visibility: visible; 2998 | } 2999 | to { 3000 | -webkit-transform: translate3d(0, 0, 0); 3001 | transform: translate3d(0, 0, 0); 3002 | } 3003 | } 3004 | 3005 | .slideInRight { 3006 | -webkit-animation-name: slideInRight; 3007 | animation-name: slideInRight; 3008 | } 3009 | 3010 | @-webkit-keyframes slideInUp { 3011 | from { 3012 | -webkit-transform: translate3d(0, 100%, 0); 3013 | transform: translate3d(0, 100%, 0); 3014 | visibility: visible; 3015 | } 3016 | to { 3017 | -webkit-transform: translate3d(0, 0, 0); 3018 | transform: translate3d(0, 0, 0); 3019 | } 3020 | } 3021 | 3022 | @keyframes slideInUp { 3023 | from { 3024 | -webkit-transform: translate3d(0, 100%, 0); 3025 | transform: translate3d(0, 100%, 0); 3026 | visibility: visible; 3027 | } 3028 | to { 3029 | -webkit-transform: translate3d(0, 0, 0); 3030 | transform: translate3d(0, 0, 0); 3031 | } 3032 | } 3033 | 3034 | .slideInUp { 3035 | -webkit-animation-name: slideInUp; 3036 | animation-name: slideInUp; 3037 | } 3038 | 3039 | @-webkit-keyframes slideOutDown { 3040 | from { 3041 | -webkit-transform: translate3d(0, 0, 0); 3042 | transform: translate3d(0, 0, 0); 3043 | } 3044 | to { 3045 | visibility: hidden; 3046 | -webkit-transform: translate3d(0, 100%, 0); 3047 | transform: translate3d(0, 100%, 0); 3048 | } 3049 | } 3050 | 3051 | @keyframes slideOutDown { 3052 | from { 3053 | -webkit-transform: translate3d(0, 0, 0); 3054 | transform: translate3d(0, 0, 0); 3055 | } 3056 | to { 3057 | visibility: hidden; 3058 | -webkit-transform: translate3d(0, 100%, 0); 3059 | transform: translate3d(0, 100%, 0); 3060 | } 3061 | } 3062 | 3063 | .slideOutDown { 3064 | -webkit-animation-name: slideOutDown; 3065 | animation-name: slideOutDown; 3066 | } 3067 | 3068 | @-webkit-keyframes slideOutLeft { 3069 | from { 3070 | -webkit-transform: translate3d(0, 0, 0); 3071 | transform: translate3d(0, 0, 0); 3072 | } 3073 | to { 3074 | visibility: hidden; 3075 | -webkit-transform: translate3d(-100%, 0, 0); 3076 | transform: translate3d(-100%, 0, 0); 3077 | } 3078 | } 3079 | 3080 | @keyframes slideOutLeft { 3081 | from { 3082 | -webkit-transform: translate3d(0, 0, 0); 3083 | transform: translate3d(0, 0, 0); 3084 | } 3085 | to { 3086 | visibility: hidden; 3087 | -webkit-transform: translate3d(-100%, 0, 0); 3088 | transform: translate3d(-100%, 0, 0); 3089 | } 3090 | } 3091 | 3092 | .slideOutLeft { 3093 | -webkit-animation-name: slideOutLeft; 3094 | animation-name: slideOutLeft; 3095 | } 3096 | 3097 | @-webkit-keyframes slideOutRight { 3098 | from { 3099 | -webkit-transform: translate3d(0, 0, 0); 3100 | transform: translate3d(0, 0, 0); 3101 | } 3102 | to { 3103 | visibility: hidden; 3104 | -webkit-transform: translate3d(100%, 0, 0); 3105 | transform: translate3d(100%, 0, 0); 3106 | } 3107 | } 3108 | 3109 | @keyframes slideOutRight { 3110 | from { 3111 | -webkit-transform: translate3d(0, 0, 0); 3112 | transform: translate3d(0, 0, 0); 3113 | } 3114 | to { 3115 | visibility: hidden; 3116 | -webkit-transform: translate3d(100%, 0, 0); 3117 | transform: translate3d(100%, 0, 0); 3118 | } 3119 | } 3120 | 3121 | .slideOutRight { 3122 | -webkit-animation-name: slideOutRight; 3123 | animation-name: slideOutRight; 3124 | } 3125 | 3126 | @-webkit-keyframes slideOutUp { 3127 | from { 3128 | -webkit-transform: translate3d(0, 0, 0); 3129 | transform: translate3d(0, 0, 0); 3130 | } 3131 | to { 3132 | visibility: hidden; 3133 | -webkit-transform: translate3d(0, -100%, 0); 3134 | transform: translate3d(0, -100%, 0); 3135 | } 3136 | } 3137 | 3138 | @keyframes slideOutUp { 3139 | from { 3140 | -webkit-transform: translate3d(0, 0, 0); 3141 | transform: translate3d(0, 0, 0); 3142 | } 3143 | to { 3144 | visibility: hidden; 3145 | -webkit-transform: translate3d(0, -100%, 0); 3146 | transform: translate3d(0, -100%, 0); 3147 | } 3148 | } 3149 | 3150 | .slideOutUp { 3151 | -webkit-animation-name: slideOutUp; 3152 | animation-name: slideOutUp; 3153 | } --------------------------------------------------------------------------------