├── src ├── containers │ ├── adminBoard │ │ ├── index.less │ │ ├── LoginList │ │ │ ├── DailyLogin │ │ │ │ ├── README.md │ │ │ │ ├── images │ │ │ │ │ └── photo_bg.jpg │ │ │ │ ├── index.tsx │ │ │ │ ├── index.less │ │ │ │ └── animate.css │ │ │ ├── AntAdminLogin │ │ │ │ ├── README.md │ │ │ │ ├── index.tsx │ │ │ │ ├── index.less │ │ │ │ └── index.css │ │ │ └── AnimateLogin │ │ │ │ ├── README.md │ │ │ │ ├── index.less │ │ │ │ ├── index.tsx │ │ │ │ ├── logo.svg │ │ │ │ └── animate.css │ │ └── index.tsx │ └── App │ │ ├── index.css │ │ ├── index.less │ │ └── index.tsx ├── constants │ └── index.ts ├── stories │ ├── index.jsx │ ├── adminBoard.jsx │ └── test.jsx ├── reducers │ ├── index.ts │ └── info.ts ├── typing.d.ts ├── actions │ └── index.ts ├── store │ └── index.ts ├── index.tsx ├── webpack.config.1.js ├── webpack.config.js ├── util │ └── validator.ts ├── logo.svg └── registerServiceWorker.ts ├── README.md ├── public ├── favicon.ico ├── manifest.json └── index.html ├── tsconfig.test.json ├── .storybook ├── addons.js ├── config.js └── webpack.config.js ├── .gitignore ├── tsconfig.json ├── package.json └── tslint.json /src/containers/adminBoard/index.less: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/constants/index.ts: -------------------------------------------------------------------------------- 1 | export const INFO_LIST = 'INFO_LIST' -------------------------------------------------------------------------------- /src/containers/adminBoard/LoginList/DailyLogin/README.md: -------------------------------------------------------------------------------- 1 | ## 2333 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # How to start 2 | 3 | `yarn install` 4 | 5 | `yarn run storybook` 6 | 7 | -------------------------------------------------------------------------------- /src/stories/index.jsx: -------------------------------------------------------------------------------- 1 | // export * from './test' 2 | import './test' 3 | import './adminBoard' -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linshuizhaoying/React-StoryBook-StartKit/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/containers/App/index.css: -------------------------------------------------------------------------------- 1 | @import '~antd/dist/antd.css'; 2 | .App .test { 3 | color: red; 4 | font-size: 24px; 5 | } 6 | -------------------------------------------------------------------------------- /tsconfig.test.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "module": "commonjs" 5 | } 6 | } -------------------------------------------------------------------------------- /src/reducers/index.ts: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | import info from './info' 3 | export default combineReducers({ 4 | info 5 | }) -------------------------------------------------------------------------------- /src/containers/adminBoard/LoginList/DailyLogin/images/photo_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linshuizhaoying/React-StoryBook-StartKit/HEAD/src/containers/adminBoard/LoginList/DailyLogin/images/photo_bg.jpg -------------------------------------------------------------------------------- /.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-actions/register'; 2 | import '@storybook/addon-links/register'; 3 | import '@storybook/addon-notes/register'; 4 | import '@storybook/addon-knobs/register'; 5 | import '@storybook/addon-options/register'; 6 | 7 | import 'storybook-readme/register'; -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure } from '@storybook/react'; 2 | import { setOptions } from '@storybook/addon-options'; 3 | 4 | function loadStories() { 5 | require('../src/stories'); 6 | } 7 | setOptions({ 8 | downPanelInRight: true, 9 | }) 10 | configure(loadStories, module); 11 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /src/typing.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.less' { 2 | const content: any; 3 | export default content; 4 | } 5 | declare var foo: number; 6 | declare module 'components' 7 | 8 | declare module 'actions' 9 | 10 | declare module 'util' 11 | 12 | declare module 'classnames' 13 | 14 | declare module 'react-redux' 15 | declare module 'redux-logger' 16 | declare module 'react-router' 17 | declare module 'history' -------------------------------------------------------------------------------- /src/actions/index.ts: -------------------------------------------------------------------------------- 1 | import { INFO_LIST } from '../constants/index' 2 | const saveList = (data: Object) => ({ 3 | type: INFO_LIST, 4 | data: data, 5 | }) 6 | 7 | export function infoListRemote () { 8 | const info = { 9 | data: { 10 | item: 'Hello LinShuiZhaoYing', 11 | cnItem: '你好, 临水照影' 12 | } 13 | } 14 | return (dispatch: any) => { 15 | dispatch(saveList(info)) 16 | return info 17 | } 18 | } -------------------------------------------------------------------------------- /src/reducers/info.ts: -------------------------------------------------------------------------------- 1 | import { INFO_LIST } from '../constants'; 2 | 3 | const initialState = { 4 | info:'' 5 | } 6 | 7 | const info = (state = initialState, action: any) => { 8 | // console.log(action) 9 | switch (action.type) { 10 | case INFO_LIST: 11 | return { 12 | ...state, 13 | info:action.data.data 14 | } 15 | default: 16 | return state 17 | } 18 | } 19 | 20 | export default info; -------------------------------------------------------------------------------- /src/store/index.ts: -------------------------------------------------------------------------------- 1 | import { createStore, applyMiddleware, compose } from 'redux' 2 | import reducers from '../reducers' 3 | import thunk from 'redux-thunk' 4 | import logger from 'redux-logger' 5 | 6 | export function configureStore (preloadState: any = {}) { 7 | const store = createStore( 8 | reducers, 9 | preloadState, 10 | compose( 11 | applyMiddleware(thunk, logger), 12 | (window as any).devToolsExtension && (window as any).devToolsExtension() 13 | ) 14 | ) 15 | 16 | return store; 17 | } 18 | export default configureStore -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { Provider } from 'react-redux'; 4 | import { Router, Route, Switch } from 'react-router'; 5 | import { createBrowserHistory } from 'history'; 6 | import { configureStore } from './store'; 7 | import App from './containers/App'; 8 | import registerServiceWorker from './registerServiceWorker'; 9 | 10 | const store = configureStore(); 11 | const history = createBrowserHistory(); 12 | 13 | ReactDOM.render( 14 | 15 | 16 | 17 | 18 | 19 | 20 | , 21 | document.getElementById('root') as HTMLElement 22 | ); 23 | registerServiceWorker(); 24 | -------------------------------------------------------------------------------- /src/containers/App/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/dist/antd.css'; 2 | html, body 3 | { 4 | height: 100%; 5 | } 6 | 7 | body 8 | { 9 | font: 12px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica; 10 | margin: 0; 11 | background-color: #d9dee2; 12 | background-image: -webkit-gradient(linear, left top, left bottom, from(#ebeef2), to(#d9dee2)); 13 | background-image: -webkit-linear-gradient(top, #ebeef2, #d9dee2); 14 | background-image: -moz-linear-gradient(top, #ebeef2, #d9dee2); 15 | background-image: -ms-linear-gradient(top, #ebeef2, #d9dee2); 16 | background-image: -o-linear-gradient(top, #ebeef2, #d9dee2); 17 | background-image: linear-gradient(top, #ebeef2, #d9dee2); 18 | } 19 | .App{ 20 | .test{ 21 | color:red; 22 | font-size:24px; 23 | } 24 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "build/dist", 4 | "module": "esnext", 5 | "target": "es5", 6 | "lib": ["es6", "dom"], 7 | "sourceMap": true, 8 | "allowJs": true, 9 | "jsx": "react", 10 | "moduleResolution": "node", 11 | "rootDir": "src", 12 | "forceConsistentCasingInFileNames": true, 13 | "noImplicitReturns": true, 14 | "noImplicitThis": true, 15 | "noImplicitAny": true, 16 | "strictNullChecks": true, 17 | "suppressImplicitAnyIndexErrors": true, 18 | "noUnusedLocals": true, 19 | "allowSyntheticDefaultImports": true 20 | }, 21 | "exclude": [ 22 | "node_modules", 23 | "build", 24 | "scripts", 25 | "acceptance-tests", 26 | "webpack", 27 | "jest", 28 | "src/setupTests.ts" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /src/containers/adminBoard/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { connect } from 'react-redux'; 3 | import './index.css'; 4 | 5 | class AdminBoard extends React.Component { 6 | constructor (props: any) { 7 | super(props) 8 | this.state = { 9 | } 10 | } 11 | 12 | componentWillMount() { 13 | 14 | } 15 | componentDidMount() { 16 | // console.log(this.props) 17 | } 18 | componentWillReceiveProps(nextProps: any) { 19 | // console.log(nextProps) 20 | } 21 | 22 | 23 | render() { 24 | return ( 25 |
26 |
27 | ); 28 | } 29 | } 30 | const mapStateToProps = (state: any) => ({ 31 | }) 32 | let AdminWrapper = AdminBoard 33 | AdminWrapper = connect(mapStateToProps)(AdminBoard); 34 | 35 | export default AdminWrapper; -------------------------------------------------------------------------------- /src/webpack.config.1.js: -------------------------------------------------------------------------------- 1 | // load the default config generator. 2 | const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js'); 3 | module.exports = (baseConfig, env) => { 4 | const config = genDefaultConfig(baseConfig, env); 5 | // Extend it as you need. 6 | // For example, add typescript loader: 7 | config.module.rules.push({ 8 | test: /\.(ts|tsx)$/, 9 | loader: require.resolve('awesome-typescript-loader') 10 | }); 11 | 12 | config.module.loaders.push({ 13 | test: /\.less$/, 14 | exclude: /node_modules/, 15 | loaders: [ "style-loader", "css-loader", "less-loader" ] 16 | }) 17 | 18 | 19 | config.resolve.extensions.push('.ts', '.tsx'); 20 | config.resolve.extensions.push(".css"); 21 | config.resolve.extensions.push(".less"); 22 | return config; 23 | }; -------------------------------------------------------------------------------- /src/webpack.config.js: -------------------------------------------------------------------------------- 1 | // load the default config generator. 2 | const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js'); 3 | module.exports = (baseConfig, env) => { 4 | const config = genDefaultConfig(baseConfig, env); 5 | // Extend it as you need. 6 | // For example, add typescript loader: 7 | config.module.rules.push({ 8 | test: /\.(ts|tsx)$/, 9 | loader: require.resolve('awesome-typescript-loader') 10 | }); 11 | 12 | config.module.loaders.push({ 13 | test: /\.less$/, 14 | exclude: /node_modules/, 15 | loaders: [ "style-loader", "css-loader", "less-loader" ] 16 | }) 17 | 18 | config.resolve.extensions.push('.ts', '.tsx'); 19 | 20 | config.resolve.extensions.push(".css"); 21 | config.resolve.extensions.push(".less"); 22 | return config; 23 | }; 24 | 25 | -------------------------------------------------------------------------------- /.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | // load the default config generator. 2 | const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js'); 3 | module.exports = (baseConfig, env) => { 4 | const config = genDefaultConfig(baseConfig, env); 5 | // Extend it as you need. 6 | // For example, add typescript loader: 7 | config.module.rules.push({ 8 | test: /\.(ts|tsx)$/, 9 | loader: require.resolve('awesome-typescript-loader') 10 | }); 11 | 12 | config.module.rules.push({ 13 | test: /\.less$/, 14 | exclude: /node_modules/, 15 | loaders: [ "style-loader", "css-loader", "less-loader" ] 16 | }) 17 | 18 | config.module.rules.push({ 19 | test: /\.md$/, 20 | loader: "raw-loader" 21 | }); 22 | 23 | 24 | config.resolve.extensions.push('.ts', '.tsx', '.css', '.less', '.md', '.png', '.jpg', '.svg'); 25 | return config; 26 | }; -------------------------------------------------------------------------------- /src/containers/adminBoard/LoginList/AntAdminLogin/README.md: -------------------------------------------------------------------------------- 1 | ## Ant Design 登录页面 2 | 3 | ### 说明 4 | 5 | Ant Desgin 的控件 6 | 7 | 验证是用`Form`配合简单的正则校验库。 8 | 9 | 未添加动态效果。 10 | 11 | ### 用法 12 | 13 | ```js 14 | import AntAdminLogin from './containers/adminBoard/LoginList/AntAdminLogin' 15 | 16 | ``` 17 | 18 | ### 属性 19 | 20 | * `无` 21 | 22 | ### 正则校验用法 23 | 24 | ```js 25 | 26 | checkUsername = (rule: any, value: any, callback: any) =>{ 27 | if(!Validator.userCheck(value)){ 28 | callback('用户名长度为4-12位,只允许字母数字组合'); 29 | }else{ 30 | callback(); 31 | } 32 | } 33 | 34 | ``` 35 | 36 | validator.js: 37 | 38 | ```js 39 | 40 | ... 41 | username: /^\w{4,12}$/, 42 | ... 43 | 44 | userCheck = (value: string) => { 45 | if (!RULES.required(value)) { 46 | return false 47 | }else { 48 | console.log('userCheck:' + new RegExp(RULES.username).test(value)) 49 | return new RegExp(RULES.username).test(value) 50 | } 51 | } 52 | 53 | ``` -------------------------------------------------------------------------------- /src/containers/adminBoard/LoginList/AnimateLogin/README.md: -------------------------------------------------------------------------------- 1 | ## Animated Design 登录页面 2 | 3 | ### 说明 4 | 5 | 继承Ant Desgin `Form` 的验证方式 6 | 7 | 验证是用配合简单的正则校验库。 8 | 9 | 动态效果通过`animated.css`完成。 10 | 11 | 设置`webpack`加载相对路径的`svg`文件 12 | 13 | ### 用法 14 | 15 | ```js 16 | import AnimateLogin from './containers/adminBoard/LoginList/AnimateLogin' 17 | 18 | ``` 19 | 20 | ### 属性 21 | 22 | * currentForm (`login` || `reg`) 23 | 24 | ### 正则校验用法 25 | 26 | ```js 27 | 28 | checkUsername = (rule: any, value: any, callback: any) =>{ 29 | if(!Validator.userCheck(value)){ 30 | callback('用户名长度为4-12位,只允许字母数字组合'); 31 | }else{ 32 | callback(); 33 | } 34 | } 35 | 36 | ``` 37 | 38 | validator.js: 39 | 40 | ```js 41 | 42 | ... 43 | username: /^\w{4,12}$/, 44 | ... 45 | 46 | userCheck = (value: string) => { 47 | if (!RULES.required(value)) { 48 | return false 49 | }else { 50 | console.log('userCheck:' + new RegExp(RULES.username).test(value)) 51 | return new RegExp(RULES.username).test(value) 52 | } 53 | } 54 | 55 | ``` -------------------------------------------------------------------------------- /src/containers/App/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Button, Icon } from 'antd'; 3 | import { connect } from 'react-redux'; 4 | import { infoListRemote } from '../../actions/index'; 5 | import './index.less'; 6 | 7 | class App extends React.Component { 8 | constructor (props: any) { 9 | super(props) 10 | this.state = { 11 | infoList: '', 12 | } 13 | } 14 | 15 | componentWillMount() { 16 | 17 | } 18 | componentDidMount() { 19 | // console.log(this.props) 20 | } 21 | componentWillReceiveProps(nextProps: any) { 22 | // console.log(nextProps) 23 | if (nextProps.info) { 24 | this.setState({ 25 | infoList: nextProps.info.item 26 | }) 27 | } 28 | } 29 | 30 | getInfo = () => { 31 | const { dispatch } = this.props; 32 | dispatch(infoListRemote()) 33 | } 34 | 35 | render() { 36 | return ( 37 |
38 |
{this.state.infoList}
39 |

{this.props.text}

40 | 41 | 42 |
43 | ); 44 | } 45 | } 46 | const mapStateToProps = (state: any) => ({ 47 | info: state.info.info, 48 | }) 49 | let AppWrapper = App 50 | AppWrapper = connect(mapStateToProps)(App); 51 | 52 | export default AppWrapper; -------------------------------------------------------------------------------- /src/stories/adminBoard.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { storiesOf } from '@storybook/react'; 4 | import { action } from '@storybook/addon-actions'; 5 | import { linkTo } from '@storybook/addon-links'; 6 | import { Provider } from 'react-redux'; 7 | import { withNotes } from '@storybook/addon-notes'; 8 | import { withInfo } from '@storybook/addon-info'; 9 | import { withKnobs, number, object, boolean, text, select, date, array, color } from '@storybook/addon-knobs'; 10 | import withReadme from 'storybook-readme/with-readme'; 11 | import AntAdminLogin from '../containers/adminBoard/LoginList/AntAdminLogin' 12 | 13 | import AnimateLogin from '../containers/adminBoard/LoginList/AnimateLogin' 14 | 15 | import DailyLogin from '../containers/adminBoard/LoginList/DailyLogin' 16 | 17 | import AntAdminLoginREADME from '../containers/adminBoard/LoginList/AntAdminLogin/README.md' 18 | 19 | import AnimateLoginREADME from '../containers/adminBoard/LoginList/AnimateLogin/README.md' 20 | 21 | import DailyLoginREADME from '../containers/adminBoard/LoginList/DailyLogin/README.md' 22 | 23 | 24 | storiesOf('管理员面板', module) 25 | .addDecorator(withReadme(AntAdminLoginREADME)) 26 | .add('Ant Desgin 登录页面', () => { 27 | return 28 | }) 29 | 30 | storiesOf('管理员面板', module) 31 | .addDecorator(withReadme(AnimateLoginREADME)) 32 | .add('Animated 登录页面', () => { 33 | return 34 | }) 35 | 36 | storiesOf('管理员面板', module) 37 | .addDecorator(withReadme(DailyLoginREADME)) 38 | .add('Daily 登录页面', () => { 39 | return 40 | }) -------------------------------------------------------------------------------- /src/util/validator.ts: -------------------------------------------------------------------------------- 1 | // 默认规则 2 | const RULES = { 3 | numeric: /^[0-9]*$/, 4 | letters: /^[a-z]+$/i, 5 | date: /^\d{4}-\d{2}-\d{2}$/, 6 | email: /^[\w\+\-]+(\.[\w\+\-]+)*@[a-z\d\-]+(\.[a-z\d\-]+)*\.([a-z]{2,4})$/i, 7 | url: /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/, 8 | qq: /^[1-9]\d{4,}$/, 9 | IDcard: /^\d{6}(19|2\d)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)?$/, 10 | phone: /^(1[0-9]{2})[0-9]{8}$/, 11 | zipcode: /^\d{6}$/, 12 | username: /^\w{4,12}$/, 13 | password: /^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]{6,12}$/, 14 | required: (value: any) => { return value !== undefined && value.length !== 0 } 15 | } 16 | export class Validator { 17 | userCheck = (value: string) => { 18 | // console.log(RULES.required(value)) 19 | if (!RULES.required(value)) { 20 | return false 21 | }else { 22 | console.log('userCheck:' + new RegExp(RULES.username).test(value)) 23 | return new RegExp(RULES.username).test(value) 24 | } 25 | } 26 | 27 | passCheck = (value: string) => { 28 | // console.log('passCheck:' + new RegExp(RULES.password).test(value)) 29 | return new RegExp(RULES.password).test(value) 30 | } 31 | 32 | emailCheck = (value: string) => { 33 | // console.log('emailCheck:' + new RegExp(RULES.email).test(value)) 34 | return new RegExp(RULES.email).test(value) 35 | } 36 | 37 | urlCheck = (value: string) => { 38 | // console.log('urlCheck:' + new RegExp(RULES.url).test(value)) 39 | return new RegExp(RULES.url).test(value) 40 | } 41 | } 42 | 43 | const instance = new Validator() 44 | export default instance -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "React-StoryBook-StartKit", 3 | "version": "0.1.0", 4 | "private": true, 5 | "author": "LinShuiZhaoYing", 6 | "dependencies": { 7 | "@storybook/addon-info": "^3.2.13", 8 | "@storybook/addon-knobs": "^3.2.13", 9 | "@storybook/addon-notes": "^3.2.13", 10 | "@storybook/addon-options": "^3.2.13", 11 | "@types/react-redux": "^5.0.10", 12 | "@types/redux-logger": "^3.0.5", 13 | "antd": "^2.13.7", 14 | "css-loader": "^0.28.7", 15 | "file-loader": "^1.1.5", 16 | "history": "^4.7.2", 17 | "less": "^2.7.3", 18 | "less-loader": "^4.0.5", 19 | "raw-loader": "^0.5.1", 20 | "react": "^16.0.0", 21 | "react-dom": "^16.0.0", 22 | "react-redux": "^5.0.6", 23 | "react-router": "^4.2.0", 24 | "react-scripts-ts": "2.7.0", 25 | "redux-logger": "^3.0.6", 26 | "redux-thunk": "^2.2.0", 27 | "style-loader": "^0.19.0", 28 | "url-loader": "^0.6.2" 29 | }, 30 | "scripts": { 31 | "start": "react-scripts-ts start", 32 | "build": "react-scripts-ts build", 33 | "test": "react-scripts-ts test --env=jsdom", 34 | "eject": "react-scripts-ts eject", 35 | "storybook": "start-storybook -p 6006", 36 | "build-storybook": "build-storybook" 37 | }, 38 | "devDependencies": { 39 | "@storybook/addon-actions": "^3.2.12", 40 | "@storybook/addon-links": "^3.2.12", 41 | "@storybook/react": "^3.2.12", 42 | "@types/jest": "^21.1.2", 43 | "@types/node": "^8.0.39", 44 | "@types/react": "^16.0.12", 45 | "@types/react-dom": "^16.0.1", 46 | "@types/storybook__react": "^3.0.5", 47 | "awesome-typescript-loader": "^3.2.3", 48 | "storybook-readme": "^3.0.6" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/stories/test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { storiesOf } from '@storybook/react'; 4 | import { action } from '@storybook/addon-actions'; 5 | import { linkTo } from '@storybook/addon-links'; 6 | import { Provider } from 'react-redux'; 7 | import { Button, Welcome } from '@storybook/react/demo'; 8 | import { createBrowserHistory } from 'history'; 9 | import configureStore from '../store'; 10 | 11 | import AppWrapper from '../containers/App' 12 | import { withNotes } from '@storybook/addon-notes'; 13 | import { withInfo } from '@storybook/addon-info'; 14 | import { withKnobs, number, object, boolean, text, select, date, array, color } from '@storybook/addon-knobs'; 15 | 16 | 17 | const store = configureStore(createBrowserHistory); 18 | 19 | 20 | storiesOf('代码示例', module) 21 | .addDecorator(story => {story()}) 22 | .add('empty App', withNotes('

A very simple component

')(() => )); 23 | 24 | storiesOf('代码示例', module) 25 | .addDecorator(story => {story()}) 26 | .add('info App', withInfo('

A very simple component

')(() => )); 27 | 28 | 29 | storiesOf('代码示例', module) 30 | .addDecorator(withKnobs) 31 | .addDecorator(story => {story()}) 32 | .add('knobs App', () =>) 33 | .add('with all knobs', () => { 34 | const name = text('Name', 'Tom Cary'); 35 | const dob = date('DOB', new Date('January 20 1887')); 36 | 37 | const bold = boolean('Bold', false); 38 | const selectedColor = color('Color', 'black'); 39 | const favoriteNumber = number('Favorite Number', 42); 40 | const comfortTemp = number('Comfort Temp', 72, { range: true, min: 60, max: 90, step: 1 }); 41 | 42 | const passions = array('Passions', ['Fishing', 'Skiing']); 43 | 44 | const customStyle = object('Style', { 45 | fontFamily: 'Arial', 46 | padding: 20, 47 | }); 48 | 49 | const style = { 50 | ...customStyle, 51 | fontWeight: bold ? 800 : 400, 52 | favoriteNumber, 53 | color: selectedColor, 54 | }; 55 | 56 | return ( 57 |
58 | I like:
    {passions.map((p, i) =>
  • {p}
    • )}
59 |

My favorite number is {favoriteNumber}.

60 |

My most comfortable room temperature is {comfortTemp} degrees Fahrenheit.

61 |
62 | ); 63 | }); 64 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/containers/adminBoard/LoginList/AntAdminLogin/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { 3 | Button, 4 | Form, 5 | Icon, 6 | Input 7 | } from 'antd'; 8 | import './index.less'; 9 | import Validator from '../../../../util/validator'; 10 | const FormItem = Form.Item 11 | class Login extends React.Component { 12 | 13 | constructor (props: any) { 14 | super(props) 15 | this.state = { 16 | username: '', 17 | password: '', 18 | } 19 | } 20 | 21 | componentDidMount() { 22 | } 23 | 24 | componentWillReceiveProps(nextProps: any) { 25 | } 26 | 27 | checkUsername = (rule: any, value: any, callback: any) =>{ 28 | if(!Validator.userCheck(value)){ 29 | callback('用户名长度为4-12位,只允许字母数字组合'); 30 | }else{ 31 | callback(); 32 | } 33 | } 34 | 35 | checkPassword = (rule: any, value: any, callback: any) =>{ 36 | if(!Validator.passCheck(value)){ 37 | callback('密码必须6位或以上,必须有字母和数字混合'); 38 | }else{ 39 | callback(); 40 | } 41 | } 42 | 43 | handleChange(e: any, value: any) { 44 | this.setState({ 45 | [value]: e.target.value 46 | }, () => { 47 | // console.log(this.state) 48 | }) 49 | } 50 | 51 | handleSubmit = (e: any) => { 52 | e.preventDefault(); 53 | this.props.form.validateFields((err: any, values: any) => { 54 | let {username, password} = values; 55 | 56 | if (!err && username.length > 0 && password.length > 0) { 57 | console.log({username, password}) 58 | } 59 | 60 | }); 61 | } 62 | render() { 63 | const { getFieldDecorator } = this.props.form; 64 | return ( 65 |
66 |

登录

67 |
68 | 69 | {getFieldDecorator('username', { 70 | rules: [{ required: true, message: '请输入你的账户' }, { 71 | validator: this.checkUsername, 72 | }], 73 | })( 74 | } placeholder="用户名" /> 75 | )} 76 | 77 | 78 | 79 | {getFieldDecorator('password', { 80 | rules: [{ required: true, message: '请输入密码!' }, { 81 | validator: this.checkPassword, 82 | }], 83 | })( 84 | } type="password" placeholder="密码" /> 85 | )} 86 | 87 | 88 | 89 | 92 | 93 | 去注册 94 | 95 | 96 |
97 |
98 | ) 99 | } 100 | } 101 | 102 | 103 | const AntAdminLogin = Form.create()(Login) 104 | export default AntAdminLogin; -------------------------------------------------------------------------------- /src/containers/adminBoard/LoginList/AnimateLogin/index.less: -------------------------------------------------------------------------------- 1 | @import './animate.css'; 2 | #AnimatedLogin{ 3 | .form { 4 | position: relative; 5 | z-index: 1; 6 | background: #FFFFFF; 7 | max-width: 300px; 8 | margin: 0 auto 100px; 9 | padding: 30px; 10 | border-top-left-radius: 3px; 11 | border-top-right-radius: 3px; 12 | border-bottom-left-radius: 3px; 13 | border-bottom-right-radius: 3px; 14 | text-align: center; 15 | } 16 | .form .thumbnail { 17 | background: #EF3B3A; 18 | width: 150px; 19 | height: 150px; 20 | margin: 0 auto 30px; 21 | padding: 50px 30px; 22 | border-top-left-radius: 100%; 23 | border-top-right-radius: 100%; 24 | border-bottom-left-radius: 100%; 25 | border-bottom-right-radius: 100%; 26 | box-sizing: border-box; 27 | } 28 | .form .thumbnail img { 29 | display: block; 30 | width: 100%; 31 | } 32 | .form input { 33 | outline: 0; 34 | background: #f2f2f2; 35 | font-size: 14px; 36 | } 37 | .form button { 38 | outline: 0; 39 | background: #EF3B3A; 40 | width: 100%; 41 | border: 0; 42 | padding: 15px; 43 | border-top-left-radius: 3px; 44 | border-top-right-radius: 3px; 45 | border-bottom-left-radius: 3px; 46 | border-bottom-right-radius: 3px; 47 | color: #FFFFFF; 48 | font-size: 14px; 49 | -webkit-transition: all 0.3 ease; 50 | transition: all 0.3 ease; 51 | cursor: pointer; 52 | } 53 | .form .message { 54 | margin: 15px 0 0; 55 | color: #b3b3b3; 56 | font-size: 12px; 57 | } 58 | .form .message a { 59 | color: #EF3B3A; 60 | text-decoration: none; 61 | } 62 | .form .hide { 63 | display: none; 64 | } 65 | .form .show { 66 | display: block; 67 | } 68 | 69 | .container { 70 | position: relative; 71 | z-index: 1; 72 | max-width: 300px; 73 | margin: 0 auto; 74 | } 75 | .container:before, .container:after { 76 | content: ""; 77 | display: block; 78 | clear: both; 79 | } 80 | .container .info { 81 | margin: 50px auto; 82 | text-align: center; 83 | } 84 | .container .info h1 { 85 | margin: 0 0 15px; 86 | padding: 0; 87 | font-size: 36px; 88 | font-weight: 300; 89 | color: #1a1a1a; 90 | } 91 | .container .info span { 92 | color: #4d4d4d; 93 | font-size: 12px; 94 | } 95 | .container .info span a { 96 | color: #000000; 97 | text-decoration: none; 98 | } 99 | .container .info span .fa { 100 | color: #EF3B3A; 101 | } 102 | 103 | /* END Form */ 104 | /* Demo Purposes */ 105 | body { 106 | background: #ccc; 107 | font-family: "Roboto", sans-serif; 108 | -webkit-font-smoothing: antialiased; 109 | -moz-osx-font-smoothing: grayscale; 110 | } 111 | body:before { 112 | content: ""; 113 | position: fixed; 114 | top: 0; 115 | left: 0; 116 | display: block; 117 | background: rgba(255, 255, 255, 0.8); 118 | width: 100%; 119 | height: 100%; 120 | } 121 | } 122 | 123 | 124 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["tslint-react"], 3 | "rules": { 4 | "align": [ 5 | true, 6 | "parameters", 7 | "arguments", 8 | "statements" 9 | ], 10 | "ban": false, 11 | "class-name": true, 12 | "comment-format": [ 13 | true, 14 | "check-space" 15 | ], 16 | "curly": true, 17 | "eofline": false, 18 | "forin": true, 19 | "indent": [ true, "spaces" ], 20 | "interface-name": [true, "never-prefix"], 21 | "jsdoc-format": true, 22 | "jsx-no-lambda": false, 23 | "jsx-no-multiline-js": false, 24 | "label-position": true, 25 | "max-line-length": [ true, 120 ], 26 | "member-ordering": [ 27 | true, 28 | "public-before-private", 29 | "static-before-instance", 30 | "variables-before-functions" 31 | ], 32 | "no-any": true, 33 | "no-arg": true, 34 | "no-bitwise": true, 35 | "no-console": [ 36 | true, 37 | "log", 38 | "error", 39 | "debug", 40 | "info", 41 | "time", 42 | "timeEnd", 43 | "trace" 44 | ], 45 | "no-consecutive-blank-lines": true, 46 | "no-construct": true, 47 | "no-debugger": true, 48 | "no-duplicate-variable": true, 49 | "no-empty": true, 50 | "no-eval": true, 51 | "no-shadowed-variable": true, 52 | "no-string-literal": true, 53 | "no-switch-case-fall-through": true, 54 | "no-trailing-whitespace": false, 55 | "no-unused-expression": true, 56 | "no-use-before-declare": true, 57 | "one-line": [ 58 | true, 59 | "check-catch", 60 | "check-else", 61 | "check-open-brace", 62 | "check-whitespace" 63 | ], 64 | "quotemark": [true, "single", "jsx-double"], 65 | "radix": true, 66 | "semicolon": [false, "always"], 67 | "switch-default": true, 68 | 69 | "trailing-comma": [false], 70 | 71 | "triple-equals": [ true, "allow-null-check" ], 72 | "typedef": [ 73 | true, 74 | "parameter", 75 | "property-declaration" 76 | ], 77 | "typedef-whitespace": [ 78 | true, 79 | { 80 | "call-signature": "nospace", 81 | "index-signature": "nospace", 82 | "parameter": "nospace", 83 | "property-declaration": "nospace", 84 | "variable-declaration": "nospace" 85 | } 86 | ], 87 | "variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore", "allow-pascal-case"], 88 | "whitespace": [ 89 | true, 90 | "check-branch", 91 | "check-decl", 92 | "check-module", 93 | "check-operator", 94 | "check-separator", 95 | "check-type", 96 | "check-typecast" 97 | ] 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /src/containers/adminBoard/LoginList/DailyLogin/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { 3 | Button, 4 | Form, 5 | Input, 6 | Icon 7 | } from 'antd'; 8 | import './index.less'; 9 | import Validator from '../../../../util/validator'; 10 | const FormItem = Form.Item 11 | class Login extends React.Component { 12 | 13 | constructor (props: any) { 14 | super(props) 15 | this.state = { 16 | username: '', 17 | password: '', 18 | currentForm: 'login' 19 | } 20 | } 21 | 22 | componentDidMount() { 23 | } 24 | 25 | componentWillReceiveProps(nextProps: any) { 26 | } 27 | 28 | checkUsername = (rule: any, value: any, callback: any) =>{ 29 | if(!Validator.userCheck(value)){ 30 | callback('用户名长度为4-12位,只允许字母数字组合'); 31 | }else{ 32 | callback(); 33 | } 34 | } 35 | 36 | checkPassword = (rule: any, value: any, callback: any) =>{ 37 | if(!Validator.passCheck(value)){ 38 | callback('密码必须6位或以上,必须有字母和数字混合'); 39 | }else{ 40 | callback(); 41 | } 42 | } 43 | 44 | handleChange(e: any, value: any) { 45 | this.setState({ 46 | [value]: e.target.value 47 | }, () => { 48 | // console.log(this.state) 49 | }) 50 | } 51 | 52 | handleSubmit = (e: any) => { 53 | e.preventDefault(); 54 | this.props.form.validateFields((err: any, values: any) => { 55 | let {username, password} = values; 56 | 57 | if (!err && username.length > 0 && password.length > 0) { 58 | console.log({username, password}) 59 | } 60 | 61 | }); 62 | } 63 | 64 | toggleAction = () =>{ 65 | console.log('action') 66 | if(this.state.currentForm == 'login'){ 67 | this.setState({ 68 | currentForm: 'reg' 69 | }) 70 | }else{ 71 | this.setState({ 72 | currentForm: 'login' 73 | }) 74 | } 75 | } 76 | render() { 77 | const { getFieldDecorator } = this.props.form; 78 | return ( 79 |
80 | 81 |
82 |
83 |

84 |
85 | 86 |
87 |
88 |

Log In

89 |
90 | 91 |
92 | 93 | {getFieldDecorator('username', { 94 | rules: [{ required: true, message: '请输入你的账户' }, { 95 | validator: this.checkUsername, 96 | }], 97 | })( 98 | } placeholder="用户名" /> 99 | )} 100 | 101 | 102 | 103 | {getFieldDecorator('password', { 104 | rules: [{ required: true, message: '请输入密码!' }, { 105 | validator: this.checkPassword, 106 | }], 107 | })( 108 | } type="password" placeholder="密码" /> 109 | )} 110 | 111 | 112 | 113 | 114 |
115 |

Forgot your password?

 116 | 117 |
118 |
119 |
120 |
121 | ) 122 | } 123 | } 124 | 125 | 126 | const DailyLogin = Form.create()(Login) 127 | export default DailyLogin; -------------------------------------------------------------------------------- /src/containers/adminBoard/LoginList/DailyLogin/index.less: -------------------------------------------------------------------------------- 1 | @import './animate.css'; 2 | #DailyLogin{ 3 | 4 | background: url('./images/photo_bg.jpg') no-repeat center center fixed; 5 | background-size: cover; 6 | font-size: 16px; 7 | font-family: 'Lato', sans-serif; 8 | font-weight: 300; 9 | margin: 0; 10 | color: #666; 11 | 12 | 13 | /* Typography */ 14 | h1#title { 15 | font-family: 'Roboto Slab', serif; 16 | font-weight: 300; 17 | font-size: 3.2em; 18 | color: white; 19 | text-shadow: 0 0 10px rgba(0,0,0,0.8); 20 | margin: 0 auto; 21 | padding-top: 180px; 22 | max-width: 300px; 23 | text-align: center; 24 | position: relative; 25 | top: 0px; 26 | } 27 | 28 | h1#title span span { 29 | font-weight: 400; 30 | } 31 | 32 | h2 { 33 | text-transform: uppercase; 34 | color: white; 35 | font-weight: 400; 36 | letter-spacing: 1px; 37 | font-size: 1.4em; 38 | line-height: 2.8em; 39 | } 40 | 41 | a { 42 | text-decoration: none; 43 | color: #666; 44 | } 45 | 46 | a:hover { 47 | color: #aeaeae; 48 | } 49 | 50 | p.small { 51 | font-size: 0.8em; 52 | margin: 20px 0 0; 53 | } 54 | 55 | 56 | /* Layout */ 57 | .container { 58 | margin: 0; 59 | } 60 | 61 | .top { 62 | margin: 0; 63 | padding: 0; 64 | width: 100%; 65 | background: -moz-linear-gradient(top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */ 66 | background: -webkit-linear-gradient(top, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */ 67 | background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 68 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */ 69 | } 70 | 71 | .login-box { 72 | background-color: white; 73 | max-width: 340px; 74 | margin: 0 auto; 75 | position: relative; 76 | top: 80px; 77 | padding-bottom: 30px; 78 | border-radius: 5px; 79 | box-shadow: 0 5px 50px rgba(0,0,0,0.4); 80 | text-align: center; 81 | } 82 | 83 | .login-box .box-header { 84 | background-color: #665851; 85 | margin-top: 0; 86 | border-radius: 5px 5px 0 0; 87 | } 88 | 89 | .login-box label { 90 | font-weight: 700; 91 | font-size: .8em; 92 | color: #888; 93 | letter-spacing: 1px; 94 | text-transform: uppercase; 95 | line-height: 2em; 96 | } 97 | 98 | .login-box input { 99 | margin-bottom: 20px; 100 | padding: 8px; 101 | border: 1px solid #ccc; 102 | border-radius: 2px; 103 | font-size: .9em; 104 | color: #888; 105 | } 106 | 107 | .login-box input:focus { 108 | outline: none; 109 | border-color: #665851; 110 | transition: 0.5s; 111 | color: #665851; 112 | } 113 | 114 | .login-box button { 115 | margin-top: 0px; 116 | border: 0; 117 | border-radius: 2px; 118 | color: white; 119 | padding: 10px; 120 | text-transform: uppercase; 121 | font-weight: 400; 122 | font-size: 0.7em; 123 | letter-spacing: 1px; 124 | background-color: #665851; 125 | cursor:pointer; 126 | outline: none; 127 | } 128 | 129 | .login-box button:hover { 130 | opacity: 0.7; 131 | transition: 0.5s; 132 | } 133 | 134 | .login-box button:hover { 135 | opacity: 0.7; 136 | transition: 0.5s; 137 | } 138 | 139 | .selected { 140 | color: #665851!important; 141 | transition: 0.5s; 142 | } 143 | 144 | /* Animation Delay */ 145 | #logo { 146 | -webkit-animation-duration: 1s; 147 | -webkit-animation-delay: 2s; 148 | } 149 | 150 | .login-box { 151 | -webkit-animation-duration: 1s; 152 | -webkit-animation-delay: 1s; 153 | } 154 | } -------------------------------------------------------------------------------- /src/containers/adminBoard/LoginList/AntAdminLogin/index.less: -------------------------------------------------------------------------------- 1 | 2 | 3 | /*--------------------*/ 4 | #AntAdminLogin 5 | { 6 | background-color: #fff; 7 | background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee)); 8 | background-image: -webkit-linear-gradient(top, #fff, #eee); 9 | background-image: -moz-linear-gradient(top, #fff, #eee); 10 | background-image: -ms-linear-gradient(top, #fff, #eee); 11 | background-image: -o-linear-gradient(top, #fff, #eee); 12 | background-image: linear-gradient(top, #fff, #eee); 13 | height: 240px; 14 | width: 400px; 15 | margin: -200px 0 0 -200px; 16 | padding: 30px; 17 | position: absolute; 18 | top: 50%; 19 | left: 50%; 20 | z-index: 0; 21 | -moz-border-radius: 3px; 22 | -webkit-border-radius: 3px; 23 | border-radius: 3px; 24 | -webkit-box-shadow: 25 | 0 0 2px rgba(0, 0, 0, 0.2), 26 | 0 1px 1px rgba(0, 0, 0, .2), 27 | 0 3px 0 #fff, 28 | 0 4px 0 rgba(0, 0, 0, .2), 29 | 0 6px 0 #fff, 30 | 0 7px 0 rgba(0, 0, 0, .2); 31 | -moz-box-shadow: 32 | 0 0 2px rgba(0, 0, 0, 0.2), 33 | 1px 1px 0 rgba(0, 0, 0, .1), 34 | 3px 3px 0 rgba(255, 255, 255, 1), 35 | 4px 4px 0 rgba(0, 0, 0, .1), 36 | 6px 6px 0 rgba(255, 255, 255, 1), 37 | 7px 7px 0 rgba(0, 0, 0, .1); 38 | box-shadow: 39 | 0 0 2px rgba(0, 0, 0, 0.2), 40 | 0 1px 1px rgba(0, 0, 0, .2), 41 | 0 3px 0 #fff, 42 | 0 4px 0 rgba(0, 0, 0, .2), 43 | 0 6px 0 #fff, 44 | 0 7px 0 rgba(0, 0, 0, .2); 45 | } 46 | 47 | #AntAdminLogin:before 48 | { 49 | content: ''; 50 | position: absolute; 51 | z-index: -1; 52 | border: 1px dashed #ccc; 53 | top: 5px; 54 | bottom: 5px; 55 | left: 5px; 56 | right: 5px; 57 | -moz-box-shadow: 0 0 0 1px #fff; 58 | -webkit-box-shadow: 0 0 0 1px #fff; 59 | box-shadow: 0 0 0 1px #fff; 60 | } 61 | #AntAdminLogin{ 62 | 63 | h1 64 | { 65 | text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5); 66 | text-transform: uppercase; 67 | text-align: center; 68 | color: #666; 69 | margin: 0 0 30px 0; 70 | letter-spacing: 4px; 71 | font: normal 26px/1 Verdana, Helvetica; 72 | position: relative; 73 | } 74 | 75 | h1:after, h1:before 76 | { 77 | background-color: #777; 78 | content: ""; 79 | height: 1px; 80 | position: absolute; 81 | top: 15px; 82 | width: 120px; 83 | } 84 | 85 | h1:after 86 | { 87 | background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff)); 88 | background-image: -webkit-linear-gradient(left, #777, #fff); 89 | background-image: -moz-linear-gradient(left, #777, #fff); 90 | background-image: -ms-linear-gradient(left, #777, #fff); 91 | background-image: -o-linear-gradient(left, #777, #fff); 92 | background-image: linear-gradient(left, #777, #fff); 93 | right: 0; 94 | } 95 | 96 | h1:before 97 | { 98 | background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff)); 99 | background-image: -webkit-linear-gradient(right, #777, #fff); 100 | background-image: -moz-linear-gradient(right, #777, #fff); 101 | background-image: -ms-linear-gradient(right, #777, #fff); 102 | background-image: -o-linear-gradient(right, #777, #fff); 103 | background-image: linear-gradient(right, #777, #fff); 104 | left: 0; 105 | } 106 | 107 | /*--------------------*/ 108 | 109 | fieldset 110 | { 111 | border: 0; 112 | padding: 0; 113 | margin: 0; 114 | } 115 | .login-form-button{ 116 | width: 100px; 117 | margin: 0 50px; 118 | } 119 | } -------------------------------------------------------------------------------- /src/registerServiceWorker.ts: -------------------------------------------------------------------------------- 1 | // tslint:disable:no-console 2 | // In production, we register a service worker to serve assets from local cache. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on the 'N+1' visit to a page, since previously 7 | // cached resources are updated in the background. 8 | 9 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 10 | // This link also includes instructions on opting out of this behavior. 11 | 12 | const isLocalhost = Boolean( 13 | window.location.hostname === 'localhost' || 14 | // [::1] is the IPv6 localhost address. 15 | window.location.hostname === '[::1]' || 16 | // 127.0.0.1/8 is considered localhost for IPv4. 17 | window.location.hostname.match( 18 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 19 | ) 20 | ); 21 | 22 | export default function register() { 23 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 24 | // The URL constructor is available in all browsers that support SW. 25 | const publicUrl = new URL( 26 | process.env.PUBLIC_URL!, 27 | window.location.toString() 28 | ); 29 | if (publicUrl.origin !== window.location.origin) { 30 | // Our service worker won't work if PUBLIC_URL is on a different origin 31 | // from what our page is served on. This might happen if a CDN is used to 32 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 33 | return; 34 | } 35 | 36 | window.addEventListener('load', () => { 37 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 38 | 39 | if (!isLocalhost) { 40 | // Is not local host. Just register service worker 41 | registerValidSW(swUrl); 42 | } else { 43 | // This is running on localhost. Lets check if a service worker still exists or not. 44 | checkValidServiceWorker(swUrl); 45 | } 46 | }); 47 | } 48 | } 49 | 50 | function registerValidSW(swUrl: string) { 51 | navigator.serviceWorker 52 | .register(swUrl) 53 | .then(registration => { 54 | registration.onupdatefound = () => { 55 | const installingWorker = registration.installing; 56 | if (installingWorker) { 57 | installingWorker.onstatechange = () => { 58 | if (installingWorker.state === 'installed') { 59 | if (navigator.serviceWorker.controller) { 60 | // At this point, the old content will have been purged and 61 | // the fresh content will have been added to the cache. 62 | // It's the perfect time to display a 'New content is 63 | // available; please refresh.' message in your web app. 64 | console.log('New content is available; please refresh.'); 65 | } else { 66 | // At this point, everything has been precached. 67 | // It's the perfect time to display a 68 | // 'Content is cached for offline use.' message. 69 | console.log('Content is cached for offline use.'); 70 | } 71 | } 72 | }; 73 | } 74 | }; 75 | }) 76 | .catch(error => { 77 | console.error('Error during service worker registration:', error); 78 | }); 79 | } 80 | 81 | function checkValidServiceWorker(swUrl: string) { 82 | // Check if the service worker can be found. If it can't reload the page. 83 | fetch(swUrl) 84 | .then(response => { 85 | // Ensure service worker exists, and that we really are getting a JS file. 86 | if ( 87 | response.status === 404 || 88 | response.headers.get('content-type')!.indexOf('javascript') === -1 89 | ) { 90 | // No service worker found. Probably a different app. Reload the page. 91 | navigator.serviceWorker.ready.then(registration => { 92 | registration.unregister().then(() => { 93 | window.location.reload(); 94 | }); 95 | }); 96 | } else { 97 | // Service worker found. Proceed as normal. 98 | registerValidSW(swUrl); 99 | } 100 | }) 101 | .catch(() => { 102 | console.log( 103 | 'No internet connection found. App is running in offline mode.' 104 | ); 105 | }); 106 | } 107 | 108 | export function unregister() { 109 | if ('serviceWorker' in navigator) { 110 | navigator.serviceWorker.ready.then(registration => { 111 | registration.unregister(); 112 | }); 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /src/containers/adminBoard/LoginList/AnimateLogin/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { 3 | Button, 4 | Form, 5 | Icon, 6 | Input 7 | } from 'antd'; 8 | import './index.less'; 9 | import Validator from '../../../../util/validator'; 10 | const FormItem = Form.Item 11 | class Login extends React.Component { 12 | 13 | constructor (props: any) { 14 | super(props) 15 | this.state = { 16 | username: '', 17 | password: '', 18 | currentForm: 'login' 19 | } 20 | } 21 | 22 | componentDidMount() { 23 | } 24 | 25 | componentWillReceiveProps(nextProps: any) { 26 | } 27 | 28 | checkUsername = (rule: any, value: any, callback: any) =>{ 29 | if(!Validator.userCheck(value)){ 30 | callback('用户名长度为4-12位,只允许字母数字组合'); 31 | }else{ 32 | callback(); 33 | } 34 | } 35 | 36 | checkPassword = (rule: any, value: any, callback: any) =>{ 37 | if(!Validator.passCheck(value)){ 38 | callback('密码必须6位或以上,必须有字母和数字混合'); 39 | }else{ 40 | callback(); 41 | } 42 | } 43 | 44 | handleChange(e: any, value: any) { 45 | this.setState({ 46 | [value]: e.target.value 47 | }, () => { 48 | // console.log(this.state) 49 | }) 50 | } 51 | 52 | handleSubmit = (e: any) => { 53 | e.preventDefault(); 54 | this.props.form.validateFields((err: any, values: any) => { 55 | let {username, password} = values; 56 | 57 | if (!err && username.length > 0 && password.length > 0) { 58 | console.log({username, password}) 59 | } 60 | 61 | }); 62 | } 63 | 64 | toggleAction = () =>{ 65 | console.log('action') 66 | if(this.state.currentForm == 'login'){ 67 | this.setState({ 68 | currentForm: 'reg' 69 | }) 70 | }else{ 71 | this.setState({ 72 | currentForm: 'login' 73 | }) 74 | } 75 | } 76 | render() { 77 | const { getFieldDecorator } = this.props.form; 78 | return ( 79 |
80 |
81 |
82 |
83 | 84 | 85 | {getFieldDecorator('username', { 86 | rules: [{ required: true, message: '请输入你的账户' }, { 87 | validator: this.checkUsername, 88 | }], 89 | })( 90 | } placeholder="用户名" /> 91 | )} 92 | 93 | 94 | 95 | {getFieldDecorator('password', { 96 | rules: [{ required: true, message: '请输入密码!' }, { 97 | validator: this.checkPassword, 98 | }], 99 | })( 100 | } type="password" placeholder="密码" /> 101 | )} 102 | 103 | 104 | 105 | 106 |

账号已注册? 登录

107 |
108 | 109 | 110 |
111 | 112 | {getFieldDecorator('username', { 113 | rules: [{ required: true, message: '请输入你的账户' }, { 114 | validator: this.checkUsername, 115 | }], 116 | })( 117 | } placeholder="用户名" /> 118 | )} 119 | 120 | 121 | 122 | {getFieldDecorator('password', { 123 | rules: [{ required: true, message: '请输入密码!' }, { 124 | validator: this.checkPassword, 125 | }], 126 | })( 127 | } type="password" placeholder="密码" /> 128 | )} 129 | 130 | 131 | 132 | 133 |

还没有账号? 创建账号

134 |
135 |
136 |
137 | ) 138 | } 139 | } 140 | 141 | 142 | const AnimatedLogin = Form.create()(Login) 143 | export default AnimatedLogin; -------------------------------------------------------------------------------- /src/containers/adminBoard/LoginList/AntAdminLogin/index.css: -------------------------------------------------------------------------------- 1 | 2 | html, 3 | body { 4 | height: 100%; 5 | } 6 | body { 7 | font: 12px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica; 8 | margin: 0; 9 | background-color: #d9dee2; 10 | background-image: -webkit-gradient(linear, left top, left bottom, from(#ebeef2), to(#d9dee2)); 11 | background-image: -webkit-linear-gradient(top, #ebeef2, #d9dee2); 12 | background-image: -moz-linear-gradient(top, #ebeef2, #d9dee2); 13 | background-image: -ms-linear-gradient(top, #ebeef2, #d9dee2); 14 | background-image: -o-linear-gradient(top, #ebeef2, #d9dee2); 15 | background-image: linear-gradient(top, #ebeef2, #d9dee2); 16 | } 17 | /*--------------------*/ 18 | #login { 19 | background-color: #fff; 20 | background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee)); 21 | background-image: -webkit-linear-gradient(top, #fff, #eee); 22 | background-image: -moz-linear-gradient(top, #fff, #eee); 23 | background-image: -ms-linear-gradient(top, #fff, #eee); 24 | background-image: -o-linear-gradient(top, #fff, #eee); 25 | background-image: linear-gradient(top, #fff, #eee); 26 | height: 240px; 27 | width: 400px; 28 | margin: -200px 0 0 -200px; 29 | padding: 30px; 30 | position: absolute; 31 | top: 50%; 32 | left: 50%; 33 | z-index: 0; 34 | -moz-border-radius: 3px; 35 | -webkit-border-radius: 3px; 36 | border-radius: 3px; 37 | -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.2), 0 3px 0 #fff, 0 4px 0 rgba(0, 0, 0, 0.2), 0 6px 0 #fff, 0 7px 0 rgba(0, 0, 0, 0.2); 38 | -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 1px 1px 0 rgba(0, 0, 0, 0.1), 3px 3px 0 #ffffff, 4px 4px 0 rgba(0, 0, 0, 0.1), 6px 6px 0 #ffffff, 7px 7px 0 rgba(0, 0, 0, 0.1); 39 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.2), 0 3px 0 #fff, 0 4px 0 rgba(0, 0, 0, 0.2), 0 6px 0 #fff, 0 7px 0 rgba(0, 0, 0, 0.2); 40 | } 41 | #login:before { 42 | content: ''; 43 | position: absolute; 44 | z-index: -1; 45 | border: 1px dashed #ccc; 46 | top: 5px; 47 | bottom: 5px; 48 | left: 5px; 49 | right: 5px; 50 | -moz-box-shadow: 0 0 0 1px #fff; 51 | -webkit-box-shadow: 0 0 0 1px #fff; 52 | box-shadow: 0 0 0 1px #fff; 53 | } 54 | /*--------------------*/ 55 | h1 { 56 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0px 2px 0 rgba(0, 0, 0, 0.5); 57 | text-transform: uppercase; 58 | text-align: center; 59 | color: #666; 60 | margin: 0 0 30px 0; 61 | letter-spacing: 4px; 62 | font: normal 26px/1 Verdana, Helvetica; 63 | position: relative; 64 | } 65 | h1:after, 66 | h1:before { 67 | background-color: #777; 68 | content: ""; 69 | height: 1px; 70 | position: absolute; 71 | top: 15px; 72 | width: 120px; 73 | } 74 | h1:after { 75 | background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff)); 76 | background-image: -webkit-linear-gradient(left, #777, #fff); 77 | background-image: -moz-linear-gradient(left, #777, #fff); 78 | background-image: -ms-linear-gradient(left, #777, #fff); 79 | background-image: -o-linear-gradient(left, #777, #fff); 80 | background-image: linear-gradient(left, #777, #fff); 81 | right: 0; 82 | } 83 | h1:before { 84 | background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff)); 85 | background-image: -webkit-linear-gradient(right, #777, #fff); 86 | background-image: -moz-linear-gradient(right, #777, #fff); 87 | background-image: -ms-linear-gradient(right, #777, #fff); 88 | background-image: -o-linear-gradient(right, #777, #fff); 89 | background-image: linear-gradient(right, #777, #fff); 90 | left: 0; 91 | } 92 | /*--------------------*/ 93 | fieldset { 94 | border: 0; 95 | padding: 0; 96 | margin: 0; 97 | } 98 | /*--------------------*/ 99 | #inputs input { 100 | background: #f1f1f1 url(/dist/uploads/2011/09/login-sprite.png) no-repeat; 101 | padding: 15px 15px 15px 30px; 102 | margin: 0 0 10px 0; 103 | width: 353px; 104 | /* 353 + 2 + 45 = 400 */ 105 | border: 1px solid #ccc; 106 | -moz-border-radius: 5px; 107 | -webkit-border-radius: 5px; 108 | border-radius: 5px; 109 | -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff; 110 | -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff; 111 | box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff; 112 | } 113 | #username { 114 | background-position: 5px -2px !important; 115 | } 116 | #password { 117 | background-position: 5px -52px !important; 118 | } 119 | #inputs input:focus { 120 | background-color: #fff; 121 | border-color: #e8c291; 122 | outline: none; 123 | -moz-box-shadow: 0 0 0 1px #e8c291 inset; 124 | -webkit-box-shadow: 0 0 0 1px #e8c291 inset; 125 | box-shadow: 0 0 0 1px #e8c291 inset; 126 | } 127 | /*--------------------*/ 128 | #actions { 129 | margin: 25px 0 0 0; 130 | } 131 | #submit { 132 | background-color: #ffb94b; 133 | background-image: -webkit-gradient(linear, left top, left bottom, from(#fddb6f), to(#ffb94b)); 134 | background-image: -webkit-linear-gradient(top, #fddb6f, #ffb94b); 135 | background-image: -moz-linear-gradient(top, #fddb6f, #ffb94b); 136 | background-image: -ms-linear-gradient(top, #fddb6f, #ffb94b); 137 | background-image: -o-linear-gradient(top, #fddb6f, #ffb94b); 138 | background-image: linear-gradient(top, #fddb6f, #ffb94b); 139 | -moz-border-radius: 3px; 140 | -webkit-border-radius: 3px; 141 | border-radius: 3px; 142 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 143 | -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; 144 | -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; 145 | box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; 146 | border-width: 1px; 147 | border-style: solid; 148 | border-color: #d69e31 #e3a037 #d5982d #e3a037; 149 | float: left; 150 | height: 35px; 151 | padding: 0; 152 | width: 120px; 153 | cursor: pointer; 154 | font: bold 15px Arial, Helvetica; 155 | color: #8f5a0a; 156 | } 157 | #submit:hover, 158 | #submit:focus { 159 | background-color: #fddb6f; 160 | background-image: -webkit-gradient(linear, left top, left bottom, from(#ffb94b), to(#fddb6f)); 161 | background-image: -webkit-linear-gradient(top, #ffb94b, #fddb6f); 162 | background-image: -moz-linear-gradient(top, #ffb94b, #fddb6f); 163 | background-image: -ms-linear-gradient(top, #ffb94b, #fddb6f); 164 | background-image: -o-linear-gradient(top, #ffb94b, #fddb6f); 165 | background-image: linear-gradient(top, #ffb94b, #fddb6f); 166 | } 167 | #submit:active { 168 | outline: none; 169 | -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; 170 | -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; 171 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; 172 | } 173 | #submit::-moz-focus-inner { 174 | border: none; 175 | } 176 | #actions a { 177 | color: #3151A2; 178 | float: right; 179 | line-height: 35px; 180 | margin-left: 10px; 181 | } 182 | /*--------------------*/ 183 | #back { 184 | display: block; 185 | text-align: center; 186 | position: relative; 187 | top: 60px; 188 | color: #999; 189 | } 190 | .login-form-button{ 191 | margin:auto; 192 | } -------------------------------------------------------------------------------- /src/containers/adminBoard/LoginList/AnimateLogin/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 10 | 12 | 13 | 19 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 50 | 53 | 55 | 57 | 59 | 61 | 63 | 65 | 67 | 69 | 72 | 75 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /src/containers/adminBoard/LoginList/DailyLogin/animate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*! 4 | * animate.css -http://daneden.me/animate 5 | * Version - 3.5.2 6 | * Licensed under the MIT license - http://opensource.org/licenses/MIT 7 | * 8 | * Copyright (c) 2017 Daniel Eden 9 | */ 10 | 11 | .animated { 12 | animation-duration: 1s; 13 | animation-fill-mode: both; 14 | } 15 | 16 | .animated.infinite { 17 | animation-iteration-count: infinite; 18 | } 19 | 20 | .animated.hinge { 21 | animation-duration: 2s; 22 | } 23 | 24 | .animated.flipOutX, 25 | .animated.flipOutY, 26 | .animated.bounceIn, 27 | .animated.bounceOut { 28 | animation-duration: .75s; 29 | } 30 | 31 | @keyframes bounce { 32 | from, 20%, 53%, 80%, to { 33 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 34 | transform: translate3d(0,0,0); 35 | } 36 | 37 | 40%, 43% { 38 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 39 | transform: translate3d(0, -30px, 0); 40 | } 41 | 42 | 70% { 43 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 44 | transform: translate3d(0, -15px, 0); 45 | } 46 | 47 | 90% { 48 | transform: translate3d(0,-4px,0); 49 | } 50 | } 51 | 52 | .bounce { 53 | animation-name: bounce; 54 | transform-origin: center bottom; 55 | } 56 | 57 | @keyframes flash { 58 | from, 50%, to { 59 | opacity: 1; 60 | } 61 | 62 | 25%, 75% { 63 | opacity: 0; 64 | } 65 | } 66 | 67 | .flash { 68 | animation-name: flash; 69 | } 70 | 71 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 72 | 73 | @keyframes pulse { 74 | from { 75 | transform: scale3d(1, 1, 1); 76 | } 77 | 78 | 50% { 79 | transform: scale3d(1.05, 1.05, 1.05); 80 | } 81 | 82 | to { 83 | transform: scale3d(1, 1, 1); 84 | } 85 | } 86 | 87 | .pulse { 88 | animation-name: pulse; 89 | } 90 | 91 | @keyframes rubberBand { 92 | from { 93 | transform: scale3d(1, 1, 1); 94 | } 95 | 96 | 30% { 97 | transform: scale3d(1.25, 0.75, 1); 98 | } 99 | 100 | 40% { 101 | transform: scale3d(0.75, 1.25, 1); 102 | } 103 | 104 | 50% { 105 | transform: scale3d(1.15, 0.85, 1); 106 | } 107 | 108 | 65% { 109 | transform: scale3d(.95, 1.05, 1); 110 | } 111 | 112 | 75% { 113 | transform: scale3d(1.05, .95, 1); 114 | } 115 | 116 | to { 117 | transform: scale3d(1, 1, 1); 118 | } 119 | } 120 | 121 | .rubberBand { 122 | animation-name: rubberBand; 123 | } 124 | 125 | @keyframes shake { 126 | from, to { 127 | transform: translate3d(0, 0, 0); 128 | } 129 | 130 | 10%, 30%, 50%, 70%, 90% { 131 | transform: translate3d(-10px, 0, 0); 132 | } 133 | 134 | 20%, 40%, 60%, 80% { 135 | transform: translate3d(10px, 0, 0); 136 | } 137 | } 138 | 139 | .shake { 140 | animation-name: shake; 141 | } 142 | 143 | @keyframes headShake { 144 | 0% { 145 | transform: translateX(0); 146 | } 147 | 148 | 6.5% { 149 | transform: translateX(-6px) rotateY(-9deg); 150 | } 151 | 152 | 18.5% { 153 | transform: translateX(5px) rotateY(7deg); 154 | } 155 | 156 | 31.5% { 157 | transform: translateX(-3px) rotateY(-5deg); 158 | } 159 | 160 | 43.5% { 161 | transform: translateX(2px) rotateY(3deg); 162 | } 163 | 164 | 50% { 165 | transform: translateX(0); 166 | } 167 | } 168 | 169 | .headShake { 170 | animation-timing-function: ease-in-out; 171 | animation-name: headShake; 172 | } 173 | 174 | @keyframes swing { 175 | 20% { 176 | transform: rotate3d(0, 0, 1, 15deg); 177 | } 178 | 179 | 40% { 180 | transform: rotate3d(0, 0, 1, -10deg); 181 | } 182 | 183 | 60% { 184 | transform: rotate3d(0, 0, 1, 5deg); 185 | } 186 | 187 | 80% { 188 | transform: rotate3d(0, 0, 1, -5deg); 189 | } 190 | 191 | to { 192 | transform: rotate3d(0, 0, 1, 0deg); 193 | } 194 | } 195 | 196 | .swing { 197 | transform-origin: top center; 198 | animation-name: swing; 199 | } 200 | 201 | @keyframes tada { 202 | from { 203 | transform: scale3d(1, 1, 1); 204 | } 205 | 206 | 10%, 20% { 207 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 208 | } 209 | 210 | 30%, 50%, 70%, 90% { 211 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 212 | } 213 | 214 | 40%, 60%, 80% { 215 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 216 | } 217 | 218 | to { 219 | transform: scale3d(1, 1, 1); 220 | } 221 | } 222 | 223 | .tada { 224 | animation-name: tada; 225 | } 226 | 227 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 228 | 229 | @keyframes wobble { 230 | from { 231 | transform: none; 232 | } 233 | 234 | 15% { 235 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 236 | } 237 | 238 | 30% { 239 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 240 | } 241 | 242 | 45% { 243 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 244 | } 245 | 246 | 60% { 247 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 248 | } 249 | 250 | 75% { 251 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 252 | } 253 | 254 | to { 255 | transform: none; 256 | } 257 | } 258 | 259 | .wobble { 260 | animation-name: wobble; 261 | } 262 | 263 | @keyframes jello { 264 | from, 11.1%, to { 265 | transform: none; 266 | } 267 | 268 | 22.2% { 269 | transform: skewX(-12.5deg) skewY(-12.5deg); 270 | } 271 | 272 | 33.3% { 273 | transform: skewX(6.25deg) skewY(6.25deg); 274 | } 275 | 276 | 44.4% { 277 | transform: skewX(-3.125deg) skewY(-3.125deg); 278 | } 279 | 280 | 55.5% { 281 | transform: skewX(1.5625deg) skewY(1.5625deg); 282 | } 283 | 284 | 66.6% { 285 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 286 | } 287 | 288 | 77.7% { 289 | transform: skewX(0.390625deg) skewY(0.390625deg); 290 | } 291 | 292 | 88.8% { 293 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 294 | } 295 | } 296 | 297 | .jello { 298 | animation-name: jello; 299 | transform-origin: center; 300 | } 301 | 302 | @keyframes bounceIn { 303 | from, 20%, 40%, 60%, 80%, to { 304 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 305 | } 306 | 307 | 0% { 308 | opacity: 0; 309 | transform: scale3d(.3, .3, .3); 310 | } 311 | 312 | 20% { 313 | transform: scale3d(1.1, 1.1, 1.1); 314 | } 315 | 316 | 40% { 317 | transform: scale3d(.9, .9, .9); 318 | } 319 | 320 | 60% { 321 | opacity: 1; 322 | transform: scale3d(1.03, 1.03, 1.03); 323 | } 324 | 325 | 80% { 326 | transform: scale3d(.97, .97, .97); 327 | } 328 | 329 | to { 330 | opacity: 1; 331 | transform: scale3d(1, 1, 1); 332 | } 333 | } 334 | 335 | .bounceIn { 336 | animation-name: bounceIn; 337 | } 338 | 339 | @keyframes bounceInDown { 340 | from, 60%, 75%, 90%, to { 341 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 342 | } 343 | 344 | 0% { 345 | opacity: 0; 346 | transform: translate3d(0, -3000px, 0); 347 | } 348 | 349 | 60% { 350 | opacity: 1; 351 | transform: translate3d(0, 25px, 0); 352 | } 353 | 354 | 75% { 355 | transform: translate3d(0, -10px, 0); 356 | } 357 | 358 | 90% { 359 | transform: translate3d(0, 5px, 0); 360 | } 361 | 362 | to { 363 | transform: none; 364 | } 365 | } 366 | 367 | .bounceInDown { 368 | animation-name: bounceInDown; 369 | } 370 | 371 | @keyframes bounceInLeft { 372 | from, 60%, 75%, 90%, to { 373 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 374 | } 375 | 376 | 0% { 377 | opacity: 0; 378 | transform: translate3d(-3000px, 0, 0); 379 | } 380 | 381 | 60% { 382 | opacity: 1; 383 | transform: translate3d(25px, 0, 0); 384 | } 385 | 386 | 75% { 387 | transform: translate3d(-10px, 0, 0); 388 | } 389 | 390 | 90% { 391 | transform: translate3d(5px, 0, 0); 392 | } 393 | 394 | to { 395 | transform: none; 396 | } 397 | } 398 | 399 | .bounceInLeft { 400 | animation-name: bounceInLeft; 401 | } 402 | 403 | @keyframes bounceInRight { 404 | from, 60%, 75%, 90%, to { 405 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 406 | } 407 | 408 | from { 409 | opacity: 0; 410 | transform: translate3d(3000px, 0, 0); 411 | } 412 | 413 | 60% { 414 | opacity: 1; 415 | transform: translate3d(-25px, 0, 0); 416 | } 417 | 418 | 75% { 419 | transform: translate3d(10px, 0, 0); 420 | } 421 | 422 | 90% { 423 | transform: translate3d(-5px, 0, 0); 424 | } 425 | 426 | to { 427 | transform: none; 428 | } 429 | } 430 | 431 | .bounceInRight { 432 | animation-name: bounceInRight; 433 | } 434 | 435 | @keyframes bounceInUp { 436 | from, 60%, 75%, 90%, to { 437 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 438 | } 439 | 440 | from { 441 | opacity: 0; 442 | transform: translate3d(0, 3000px, 0); 443 | } 444 | 445 | 60% { 446 | opacity: 1; 447 | transform: translate3d(0, -20px, 0); 448 | } 449 | 450 | 75% { 451 | transform: translate3d(0, 10px, 0); 452 | } 453 | 454 | 90% { 455 | transform: translate3d(0, -5px, 0); 456 | } 457 | 458 | to { 459 | transform: translate3d(0, 0, 0); 460 | } 461 | } 462 | 463 | .bounceInUp { 464 | animation-name: bounceInUp; 465 | } 466 | 467 | @keyframes bounceOut { 468 | 20% { 469 | transform: scale3d(.9, .9, .9); 470 | } 471 | 472 | 50%, 55% { 473 | opacity: 1; 474 | transform: scale3d(1.1, 1.1, 1.1); 475 | } 476 | 477 | to { 478 | opacity: 0; 479 | transform: scale3d(.3, .3, .3); 480 | } 481 | } 482 | 483 | .bounceOut { 484 | animation-name: bounceOut; 485 | } 486 | 487 | @keyframes bounceOutDown { 488 | 20% { 489 | transform: translate3d(0, 10px, 0); 490 | } 491 | 492 | 40%, 45% { 493 | opacity: 1; 494 | transform: translate3d(0, -20px, 0); 495 | } 496 | 497 | to { 498 | opacity: 0; 499 | transform: translate3d(0, 2000px, 0); 500 | } 501 | } 502 | 503 | .bounceOutDown { 504 | animation-name: bounceOutDown; 505 | } 506 | 507 | @keyframes bounceOutLeft { 508 | 20% { 509 | opacity: 1; 510 | transform: translate3d(20px, 0, 0); 511 | } 512 | 513 | to { 514 | opacity: 0; 515 | transform: translate3d(-2000px, 0, 0); 516 | } 517 | } 518 | 519 | .bounceOutLeft { 520 | animation-name: bounceOutLeft; 521 | } 522 | 523 | @keyframes bounceOutRight { 524 | 20% { 525 | opacity: 1; 526 | transform: translate3d(-20px, 0, 0); 527 | } 528 | 529 | to { 530 | opacity: 0; 531 | transform: translate3d(2000px, 0, 0); 532 | } 533 | } 534 | 535 | .bounceOutRight { 536 | animation-name: bounceOutRight; 537 | } 538 | 539 | @keyframes bounceOutUp { 540 | 20% { 541 | transform: translate3d(0, -10px, 0); 542 | } 543 | 544 | 40%, 45% { 545 | opacity: 1; 546 | transform: translate3d(0, 20px, 0); 547 | } 548 | 549 | to { 550 | opacity: 0; 551 | transform: translate3d(0, -2000px, 0); 552 | } 553 | } 554 | 555 | .bounceOutUp { 556 | animation-name: bounceOutUp; 557 | } 558 | 559 | @keyframes fadeIn { 560 | from { 561 | opacity: 0; 562 | } 563 | 564 | to { 565 | opacity: 1; 566 | } 567 | } 568 | 569 | .fadeIn { 570 | animation-name: fadeIn; 571 | } 572 | 573 | @keyframes fadeInDown { 574 | from { 575 | opacity: 0; 576 | transform: translate3d(0, -100%, 0); 577 | } 578 | 579 | to { 580 | opacity: 1; 581 | transform: none; 582 | } 583 | } 584 | 585 | .fadeInDown { 586 | animation-name: fadeInDown; 587 | } 588 | 589 | @keyframes fadeInDownBig { 590 | from { 591 | opacity: 0; 592 | transform: translate3d(0, -2000px, 0); 593 | } 594 | 595 | to { 596 | opacity: 1; 597 | transform: none; 598 | } 599 | } 600 | 601 | .fadeInDownBig { 602 | animation-name: fadeInDownBig; 603 | } 604 | 605 | @keyframes fadeInLeft { 606 | from { 607 | opacity: 0; 608 | transform: translate3d(-100%, 0, 0); 609 | } 610 | 611 | to { 612 | opacity: 1; 613 | transform: none; 614 | } 615 | } 616 | 617 | .fadeInLeft { 618 | animation-name: fadeInLeft; 619 | } 620 | 621 | @keyframes fadeInLeftBig { 622 | from { 623 | opacity: 0; 624 | transform: translate3d(-2000px, 0, 0); 625 | } 626 | 627 | to { 628 | opacity: 1; 629 | transform: none; 630 | } 631 | } 632 | 633 | .fadeInLeftBig { 634 | animation-name: fadeInLeftBig; 635 | } 636 | 637 | @keyframes fadeInRight { 638 | from { 639 | opacity: 0; 640 | transform: translate3d(100%, 0, 0); 641 | } 642 | 643 | to { 644 | opacity: 1; 645 | transform: none; 646 | } 647 | } 648 | 649 | .fadeInRight { 650 | animation-name: fadeInRight; 651 | } 652 | 653 | @keyframes fadeInRightBig { 654 | from { 655 | opacity: 0; 656 | transform: translate3d(2000px, 0, 0); 657 | } 658 | 659 | to { 660 | opacity: 1; 661 | transform: none; 662 | } 663 | } 664 | 665 | .fadeInRightBig { 666 | animation-name: fadeInRightBig; 667 | } 668 | 669 | @keyframes fadeInUp { 670 | from { 671 | opacity: 0; 672 | transform: translate3d(0, 100%, 0); 673 | } 674 | 675 | to { 676 | opacity: 1; 677 | transform: none; 678 | } 679 | } 680 | 681 | .fadeInUp { 682 | animation-name: fadeInUp; 683 | } 684 | 685 | @keyframes fadeInUpBig { 686 | from { 687 | opacity: 0; 688 | transform: translate3d(0, 2000px, 0); 689 | } 690 | 691 | to { 692 | opacity: 1; 693 | transform: none; 694 | } 695 | } 696 | 697 | .fadeInUpBig { 698 | animation-name: fadeInUpBig; 699 | } 700 | 701 | @keyframes fadeOut { 702 | from { 703 | opacity: 1; 704 | } 705 | 706 | to { 707 | opacity: 0; 708 | } 709 | } 710 | 711 | .fadeOut { 712 | animation-name: fadeOut; 713 | } 714 | 715 | @keyframes fadeOutDown { 716 | from { 717 | opacity: 1; 718 | } 719 | 720 | to { 721 | opacity: 0; 722 | transform: translate3d(0, 100%, 0); 723 | } 724 | } 725 | 726 | .fadeOutDown { 727 | animation-name: fadeOutDown; 728 | } 729 | 730 | @keyframes fadeOutDownBig { 731 | from { 732 | opacity: 1; 733 | } 734 | 735 | to { 736 | opacity: 0; 737 | transform: translate3d(0, 2000px, 0); 738 | } 739 | } 740 | 741 | .fadeOutDownBig { 742 | animation-name: fadeOutDownBig; 743 | } 744 | 745 | @keyframes fadeOutLeft { 746 | from { 747 | opacity: 1; 748 | } 749 | 750 | to { 751 | opacity: 0; 752 | transform: translate3d(-100%, 0, 0); 753 | } 754 | } 755 | 756 | .fadeOutLeft { 757 | animation-name: fadeOutLeft; 758 | } 759 | 760 | @keyframes fadeOutLeftBig { 761 | from { 762 | opacity: 1; 763 | } 764 | 765 | to { 766 | opacity: 0; 767 | transform: translate3d(-2000px, 0, 0); 768 | } 769 | } 770 | 771 | .fadeOutLeftBig { 772 | animation-name: fadeOutLeftBig; 773 | } 774 | 775 | @keyframes fadeOutRight { 776 | from { 777 | opacity: 1; 778 | } 779 | 780 | to { 781 | opacity: 0; 782 | transform: translate3d(100%, 0, 0); 783 | } 784 | } 785 | 786 | .fadeOutRight { 787 | animation-name: fadeOutRight; 788 | } 789 | 790 | @keyframes fadeOutRightBig { 791 | from { 792 | opacity: 1; 793 | } 794 | 795 | to { 796 | opacity: 0; 797 | transform: translate3d(2000px, 0, 0); 798 | } 799 | } 800 | 801 | .fadeOutRightBig { 802 | animation-name: fadeOutRightBig; 803 | } 804 | 805 | @keyframes fadeOutUp { 806 | from { 807 | opacity: 1; 808 | } 809 | 810 | to { 811 | opacity: 0; 812 | transform: translate3d(0, -100%, 0); 813 | } 814 | } 815 | 816 | .fadeOutUp { 817 | animation-name: fadeOutUp; 818 | } 819 | 820 | @keyframes fadeOutUpBig { 821 | from { 822 | opacity: 1; 823 | } 824 | 825 | to { 826 | opacity: 0; 827 | transform: translate3d(0, -2000px, 0); 828 | } 829 | } 830 | 831 | .fadeOutUpBig { 832 | animation-name: fadeOutUpBig; 833 | } 834 | 835 | @keyframes flip { 836 | from { 837 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 838 | animation-timing-function: ease-out; 839 | } 840 | 841 | 40% { 842 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 843 | animation-timing-function: ease-out; 844 | } 845 | 846 | 50% { 847 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 848 | animation-timing-function: ease-in; 849 | } 850 | 851 | 80% { 852 | transform: perspective(400px) scale3d(.95, .95, .95); 853 | animation-timing-function: ease-in; 854 | } 855 | 856 | to { 857 | transform: perspective(400px); 858 | animation-timing-function: ease-in; 859 | } 860 | } 861 | 862 | .animated.flip { 863 | -webkit-backface-visibility: visible; 864 | backface-visibility: visible; 865 | animation-name: flip; 866 | } 867 | 868 | @keyframes flipInX { 869 | from { 870 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 871 | animation-timing-function: ease-in; 872 | opacity: 0; 873 | } 874 | 875 | 40% { 876 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 877 | animation-timing-function: ease-in; 878 | } 879 | 880 | 60% { 881 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 882 | opacity: 1; 883 | } 884 | 885 | 80% { 886 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 887 | } 888 | 889 | to { 890 | transform: perspective(400px); 891 | } 892 | } 893 | 894 | .flipInX { 895 | -webkit-backface-visibility: visible !important; 896 | backface-visibility: visible !important; 897 | animation-name: flipInX; 898 | } 899 | 900 | @keyframes flipInY { 901 | from { 902 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 903 | animation-timing-function: ease-in; 904 | opacity: 0; 905 | } 906 | 907 | 40% { 908 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 909 | animation-timing-function: ease-in; 910 | } 911 | 912 | 60% { 913 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 914 | opacity: 1; 915 | } 916 | 917 | 80% { 918 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 919 | } 920 | 921 | to { 922 | transform: perspective(400px); 923 | } 924 | } 925 | 926 | .flipInY { 927 | -webkit-backface-visibility: visible !important; 928 | backface-visibility: visible !important; 929 | animation-name: flipInY; 930 | } 931 | 932 | @keyframes flipOutX { 933 | from { 934 | transform: perspective(400px); 935 | } 936 | 937 | 30% { 938 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 939 | opacity: 1; 940 | } 941 | 942 | to { 943 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 944 | opacity: 0; 945 | } 946 | } 947 | 948 | .flipOutX { 949 | animation-name: flipOutX; 950 | -webkit-backface-visibility: visible !important; 951 | backface-visibility: visible !important; 952 | } 953 | 954 | @keyframes flipOutY { 955 | from { 956 | transform: perspective(400px); 957 | } 958 | 959 | 30% { 960 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 961 | opacity: 1; 962 | } 963 | 964 | to { 965 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 966 | opacity: 0; 967 | } 968 | } 969 | 970 | .flipOutY { 971 | -webkit-backface-visibility: visible !important; 972 | backface-visibility: visible !important; 973 | animation-name: flipOutY; 974 | } 975 | 976 | @keyframes lightSpeedIn { 977 | from { 978 | transform: translate3d(100%, 0, 0) skewX(-30deg); 979 | opacity: 0; 980 | } 981 | 982 | 60% { 983 | transform: skewX(20deg); 984 | opacity: 1; 985 | } 986 | 987 | 80% { 988 | transform: skewX(-5deg); 989 | opacity: 1; 990 | } 991 | 992 | to { 993 | transform: none; 994 | opacity: 1; 995 | } 996 | } 997 | 998 | .lightSpeedIn { 999 | animation-name: lightSpeedIn; 1000 | animation-timing-function: ease-out; 1001 | } 1002 | 1003 | @keyframes lightSpeedOut { 1004 | from { 1005 | opacity: 1; 1006 | } 1007 | 1008 | to { 1009 | transform: translate3d(100%, 0, 0) skewX(30deg); 1010 | opacity: 0; 1011 | } 1012 | } 1013 | 1014 | .lightSpeedOut { 1015 | animation-name: lightSpeedOut; 1016 | animation-timing-function: ease-in; 1017 | } 1018 | 1019 | @keyframes rotateIn { 1020 | from { 1021 | transform-origin: center; 1022 | transform: rotate3d(0, 0, 1, -200deg); 1023 | opacity: 0; 1024 | } 1025 | 1026 | to { 1027 | transform-origin: center; 1028 | transform: none; 1029 | opacity: 1; 1030 | } 1031 | } 1032 | 1033 | .rotateIn { 1034 | animation-name: rotateIn; 1035 | } 1036 | 1037 | @keyframes rotateInDownLeft { 1038 | from { 1039 | transform-origin: left bottom; 1040 | transform: rotate3d(0, 0, 1, -45deg); 1041 | opacity: 0; 1042 | } 1043 | 1044 | to { 1045 | transform-origin: left bottom; 1046 | transform: none; 1047 | opacity: 1; 1048 | } 1049 | } 1050 | 1051 | .rotateInDownLeft { 1052 | animation-name: rotateInDownLeft; 1053 | } 1054 | 1055 | @keyframes rotateInDownRight { 1056 | from { 1057 | transform-origin: right bottom; 1058 | transform: rotate3d(0, 0, 1, 45deg); 1059 | opacity: 0; 1060 | } 1061 | 1062 | to { 1063 | transform-origin: right bottom; 1064 | transform: none; 1065 | opacity: 1; 1066 | } 1067 | } 1068 | 1069 | .rotateInDownRight { 1070 | animation-name: rotateInDownRight; 1071 | } 1072 | 1073 | @keyframes rotateInUpLeft { 1074 | from { 1075 | transform-origin: left bottom; 1076 | transform: rotate3d(0, 0, 1, 45deg); 1077 | opacity: 0; 1078 | } 1079 | 1080 | to { 1081 | transform-origin: left bottom; 1082 | transform: none; 1083 | opacity: 1; 1084 | } 1085 | } 1086 | 1087 | .rotateInUpLeft { 1088 | animation-name: rotateInUpLeft; 1089 | } 1090 | 1091 | @keyframes rotateInUpRight { 1092 | from { 1093 | transform-origin: right bottom; 1094 | transform: rotate3d(0, 0, 1, -90deg); 1095 | opacity: 0; 1096 | } 1097 | 1098 | to { 1099 | transform-origin: right bottom; 1100 | transform: none; 1101 | opacity: 1; 1102 | } 1103 | } 1104 | 1105 | .rotateInUpRight { 1106 | animation-name: rotateInUpRight; 1107 | } 1108 | 1109 | @keyframes rotateOut { 1110 | from { 1111 | transform-origin: center; 1112 | opacity: 1; 1113 | } 1114 | 1115 | to { 1116 | transform-origin: center; 1117 | transform: rotate3d(0, 0, 1, 200deg); 1118 | opacity: 0; 1119 | } 1120 | } 1121 | 1122 | .rotateOut { 1123 | animation-name: rotateOut; 1124 | } 1125 | 1126 | @keyframes rotateOutDownLeft { 1127 | from { 1128 | transform-origin: left bottom; 1129 | opacity: 1; 1130 | } 1131 | 1132 | to { 1133 | transform-origin: left bottom; 1134 | transform: rotate3d(0, 0, 1, 45deg); 1135 | opacity: 0; 1136 | } 1137 | } 1138 | 1139 | .rotateOutDownLeft { 1140 | animation-name: rotateOutDownLeft; 1141 | } 1142 | 1143 | @keyframes rotateOutDownRight { 1144 | from { 1145 | transform-origin: right bottom; 1146 | opacity: 1; 1147 | } 1148 | 1149 | to { 1150 | transform-origin: right bottom; 1151 | transform: rotate3d(0, 0, 1, -45deg); 1152 | opacity: 0; 1153 | } 1154 | } 1155 | 1156 | .rotateOutDownRight { 1157 | animation-name: rotateOutDownRight; 1158 | } 1159 | 1160 | @keyframes rotateOutUpLeft { 1161 | from { 1162 | transform-origin: left bottom; 1163 | opacity: 1; 1164 | } 1165 | 1166 | to { 1167 | transform-origin: left bottom; 1168 | transform: rotate3d(0, 0, 1, -45deg); 1169 | opacity: 0; 1170 | } 1171 | } 1172 | 1173 | .rotateOutUpLeft { 1174 | animation-name: rotateOutUpLeft; 1175 | } 1176 | 1177 | @keyframes rotateOutUpRight { 1178 | from { 1179 | transform-origin: right bottom; 1180 | opacity: 1; 1181 | } 1182 | 1183 | to { 1184 | transform-origin: right bottom; 1185 | transform: rotate3d(0, 0, 1, 90deg); 1186 | opacity: 0; 1187 | } 1188 | } 1189 | 1190 | .rotateOutUpRight { 1191 | animation-name: rotateOutUpRight; 1192 | } 1193 | 1194 | @keyframes hinge { 1195 | 0% { 1196 | transform-origin: top left; 1197 | animation-timing-function: ease-in-out; 1198 | } 1199 | 1200 | 20%, 60% { 1201 | transform: rotate3d(0, 0, 1, 80deg); 1202 | transform-origin: top left; 1203 | animation-timing-function: ease-in-out; 1204 | } 1205 | 1206 | 40%, 80% { 1207 | transform: rotate3d(0, 0, 1, 60deg); 1208 | transform-origin: top left; 1209 | animation-timing-function: ease-in-out; 1210 | opacity: 1; 1211 | } 1212 | 1213 | to { 1214 | transform: translate3d(0, 700px, 0); 1215 | opacity: 0; 1216 | } 1217 | } 1218 | 1219 | .hinge { 1220 | animation-name: hinge; 1221 | } 1222 | 1223 | @keyframes jackInTheBox { 1224 | from { 1225 | opacity: 0; 1226 | transform: scale(0.1) rotate(30deg); 1227 | transform-origin: center bottom; 1228 | } 1229 | 1230 | 50% { 1231 | transform: rotate(-10deg); 1232 | } 1233 | 1234 | 70% { 1235 | transform: rotate(3deg); 1236 | } 1237 | 1238 | to { 1239 | opacity: 1; 1240 | transform: scale(1); 1241 | } 1242 | } 1243 | 1244 | .jackInTheBox { 1245 | animation-name: jackInTheBox; 1246 | } 1247 | 1248 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 1249 | 1250 | @keyframes rollIn { 1251 | from { 1252 | opacity: 0; 1253 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 1254 | } 1255 | 1256 | to { 1257 | opacity: 1; 1258 | transform: none; 1259 | } 1260 | } 1261 | 1262 | .rollIn { 1263 | animation-name: rollIn; 1264 | } 1265 | 1266 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 1267 | 1268 | @keyframes rollOut { 1269 | from { 1270 | opacity: 1; 1271 | } 1272 | 1273 | to { 1274 | opacity: 0; 1275 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 1276 | } 1277 | } 1278 | 1279 | .rollOut { 1280 | animation-name: rollOut; 1281 | } 1282 | 1283 | @keyframes zoomIn { 1284 | from { 1285 | opacity: 0; 1286 | transform: scale3d(.3, .3, .3); 1287 | } 1288 | 1289 | 50% { 1290 | opacity: 1; 1291 | } 1292 | } 1293 | 1294 | .zoomIn { 1295 | animation-name: zoomIn; 1296 | } 1297 | 1298 | @keyframes zoomInDown { 1299 | from { 1300 | opacity: 0; 1301 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 1302 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1303 | } 1304 | 1305 | 60% { 1306 | opacity: 1; 1307 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 1308 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1309 | } 1310 | } 1311 | 1312 | .zoomInDown { 1313 | animation-name: zoomInDown; 1314 | } 1315 | 1316 | @keyframes zoomInLeft { 1317 | from { 1318 | opacity: 0; 1319 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 1320 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1321 | } 1322 | 1323 | 60% { 1324 | opacity: 1; 1325 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 1326 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1327 | } 1328 | } 1329 | 1330 | .zoomInLeft { 1331 | animation-name: zoomInLeft; 1332 | } 1333 | 1334 | @keyframes zoomInRight { 1335 | from { 1336 | opacity: 0; 1337 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 1338 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1339 | } 1340 | 1341 | 60% { 1342 | opacity: 1; 1343 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 1344 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1345 | } 1346 | } 1347 | 1348 | .zoomInRight { 1349 | animation-name: zoomInRight; 1350 | } 1351 | 1352 | @keyframes zoomInUp { 1353 | from { 1354 | opacity: 0; 1355 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 1356 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1357 | } 1358 | 1359 | 60% { 1360 | opacity: 1; 1361 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 1362 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1363 | } 1364 | } 1365 | 1366 | .zoomInUp { 1367 | animation-name: zoomInUp; 1368 | } 1369 | 1370 | @keyframes zoomOut { 1371 | from { 1372 | opacity: 1; 1373 | } 1374 | 1375 | 50% { 1376 | opacity: 0; 1377 | transform: scale3d(.3, .3, .3); 1378 | } 1379 | 1380 | to { 1381 | opacity: 0; 1382 | } 1383 | } 1384 | 1385 | .zoomOut { 1386 | animation-name: zoomOut; 1387 | } 1388 | 1389 | @keyframes zoomOutDown { 1390 | 40% { 1391 | opacity: 1; 1392 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 1393 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1394 | } 1395 | 1396 | to { 1397 | opacity: 0; 1398 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 1399 | transform-origin: center bottom; 1400 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1401 | } 1402 | } 1403 | 1404 | .zoomOutDown { 1405 | animation-name: zoomOutDown; 1406 | } 1407 | 1408 | @keyframes zoomOutLeft { 1409 | 40% { 1410 | opacity: 1; 1411 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 1412 | } 1413 | 1414 | to { 1415 | opacity: 0; 1416 | transform: scale(.1) translate3d(-2000px, 0, 0); 1417 | transform-origin: left center; 1418 | } 1419 | } 1420 | 1421 | .zoomOutLeft { 1422 | animation-name: zoomOutLeft; 1423 | } 1424 | 1425 | @keyframes zoomOutRight { 1426 | 40% { 1427 | opacity: 1; 1428 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 1429 | } 1430 | 1431 | to { 1432 | opacity: 0; 1433 | transform: scale(.1) translate3d(2000px, 0, 0); 1434 | transform-origin: right center; 1435 | } 1436 | } 1437 | 1438 | .zoomOutRight { 1439 | animation-name: zoomOutRight; 1440 | } 1441 | 1442 | @keyframes zoomOutUp { 1443 | 40% { 1444 | opacity: 1; 1445 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 1446 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1447 | } 1448 | 1449 | to { 1450 | opacity: 0; 1451 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 1452 | transform-origin: center bottom; 1453 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1454 | } 1455 | } 1456 | 1457 | .zoomOutUp { 1458 | animation-name: zoomOutUp; 1459 | } 1460 | 1461 | @keyframes slideInDown { 1462 | from { 1463 | transform: translate3d(0, -100%, 0); 1464 | visibility: visible; 1465 | } 1466 | 1467 | to { 1468 | transform: translate3d(0, 0, 0); 1469 | } 1470 | } 1471 | 1472 | .slideInDown { 1473 | animation-name: slideInDown; 1474 | } 1475 | 1476 | @keyframes slideInLeft { 1477 | from { 1478 | transform: translate3d(-100%, 0, 0); 1479 | visibility: visible; 1480 | } 1481 | 1482 | to { 1483 | transform: translate3d(0, 0, 0); 1484 | } 1485 | } 1486 | 1487 | .slideInLeft { 1488 | animation-name: slideInLeft; 1489 | } 1490 | 1491 | @keyframes slideInRight { 1492 | from { 1493 | transform: translate3d(100%, 0, 0); 1494 | visibility: visible; 1495 | } 1496 | 1497 | to { 1498 | transform: translate3d(0, 0, 0); 1499 | } 1500 | } 1501 | 1502 | .slideInRight { 1503 | animation-name: slideInRight; 1504 | } 1505 | 1506 | @keyframes slideInUp { 1507 | from { 1508 | transform: translate3d(0, 100%, 0); 1509 | visibility: visible; 1510 | } 1511 | 1512 | to { 1513 | transform: translate3d(0, 0, 0); 1514 | } 1515 | } 1516 | 1517 | .slideInUp { 1518 | animation-name: slideInUp; 1519 | } 1520 | 1521 | @keyframes slideOutDown { 1522 | from { 1523 | transform: translate3d(0, 0, 0); 1524 | } 1525 | 1526 | to { 1527 | visibility: hidden; 1528 | transform: translate3d(0, 100%, 0); 1529 | } 1530 | } 1531 | 1532 | .slideOutDown { 1533 | animation-name: slideOutDown; 1534 | } 1535 | 1536 | @keyframes slideOutLeft { 1537 | from { 1538 | transform: translate3d(0, 0, 0); 1539 | } 1540 | 1541 | to { 1542 | visibility: hidden; 1543 | transform: translate3d(-100%, 0, 0); 1544 | } 1545 | } 1546 | 1547 | .slideOutLeft { 1548 | animation-name: slideOutLeft; 1549 | } 1550 | 1551 | @keyframes slideOutRight { 1552 | from { 1553 | transform: translate3d(0, 0, 0); 1554 | } 1555 | 1556 | to { 1557 | visibility: hidden; 1558 | transform: translate3d(100%, 0, 0); 1559 | } 1560 | } 1561 | 1562 | .slideOutRight { 1563 | animation-name: slideOutRight; 1564 | } 1565 | 1566 | @keyframes slideOutUp { 1567 | from { 1568 | transform: translate3d(0, 0, 0); 1569 | } 1570 | 1571 | to { 1572 | visibility: hidden; 1573 | transform: translate3d(0, -100%, 0); 1574 | } 1575 | } 1576 | 1577 | .slideOutUp { 1578 | animation-name: slideOutUp; 1579 | } 1580 | -------------------------------------------------------------------------------- /src/containers/adminBoard/LoginList/AnimateLogin/animate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*! 4 | * animate.css -http://daneden.me/animate 5 | * Version - 3.5.2 6 | * Licensed under the MIT license - http://opensource.org/licenses/MIT 7 | * 8 | * Copyright (c) 2017 Daniel Eden 9 | */ 10 | 11 | .animated { 12 | animation-duration: 1s; 13 | animation-fill-mode: both; 14 | } 15 | 16 | .animated.infinite { 17 | animation-iteration-count: infinite; 18 | } 19 | 20 | .animated.hinge { 21 | animation-duration: 2s; 22 | } 23 | 24 | .animated.flipOutX, 25 | .animated.flipOutY, 26 | .animated.bounceIn, 27 | .animated.bounceOut { 28 | animation-duration: .75s; 29 | } 30 | 31 | @keyframes bounce { 32 | from, 20%, 53%, 80%, to { 33 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 34 | transform: translate3d(0,0,0); 35 | } 36 | 37 | 40%, 43% { 38 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 39 | transform: translate3d(0, -30px, 0); 40 | } 41 | 42 | 70% { 43 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 44 | transform: translate3d(0, -15px, 0); 45 | } 46 | 47 | 90% { 48 | transform: translate3d(0,-4px,0); 49 | } 50 | } 51 | 52 | .bounce { 53 | animation-name: bounce; 54 | transform-origin: center bottom; 55 | } 56 | 57 | @keyframes flash { 58 | from, 50%, to { 59 | opacity: 1; 60 | } 61 | 62 | 25%, 75% { 63 | opacity: 0; 64 | } 65 | } 66 | 67 | .flash { 68 | animation-name: flash; 69 | } 70 | 71 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 72 | 73 | @keyframes pulse { 74 | from { 75 | transform: scale3d(1, 1, 1); 76 | } 77 | 78 | 50% { 79 | transform: scale3d(1.05, 1.05, 1.05); 80 | } 81 | 82 | to { 83 | transform: scale3d(1, 1, 1); 84 | } 85 | } 86 | 87 | .pulse { 88 | animation-name: pulse; 89 | } 90 | 91 | @keyframes rubberBand { 92 | from { 93 | transform: scale3d(1, 1, 1); 94 | } 95 | 96 | 30% { 97 | transform: scale3d(1.25, 0.75, 1); 98 | } 99 | 100 | 40% { 101 | transform: scale3d(0.75, 1.25, 1); 102 | } 103 | 104 | 50% { 105 | transform: scale3d(1.15, 0.85, 1); 106 | } 107 | 108 | 65% { 109 | transform: scale3d(.95, 1.05, 1); 110 | } 111 | 112 | 75% { 113 | transform: scale3d(1.05, .95, 1); 114 | } 115 | 116 | to { 117 | transform: scale3d(1, 1, 1); 118 | } 119 | } 120 | 121 | .rubberBand { 122 | animation-name: rubberBand; 123 | } 124 | 125 | @keyframes shake { 126 | from, to { 127 | transform: translate3d(0, 0, 0); 128 | } 129 | 130 | 10%, 30%, 50%, 70%, 90% { 131 | transform: translate3d(-10px, 0, 0); 132 | } 133 | 134 | 20%, 40%, 60%, 80% { 135 | transform: translate3d(10px, 0, 0); 136 | } 137 | } 138 | 139 | .shake { 140 | animation-name: shake; 141 | } 142 | 143 | @keyframes headShake { 144 | 0% { 145 | transform: translateX(0); 146 | } 147 | 148 | 6.5% { 149 | transform: translateX(-6px) rotateY(-9deg); 150 | } 151 | 152 | 18.5% { 153 | transform: translateX(5px) rotateY(7deg); 154 | } 155 | 156 | 31.5% { 157 | transform: translateX(-3px) rotateY(-5deg); 158 | } 159 | 160 | 43.5% { 161 | transform: translateX(2px) rotateY(3deg); 162 | } 163 | 164 | 50% { 165 | transform: translateX(0); 166 | } 167 | } 168 | 169 | .headShake { 170 | animation-timing-function: ease-in-out; 171 | animation-name: headShake; 172 | } 173 | 174 | @keyframes swing { 175 | 20% { 176 | transform: rotate3d(0, 0, 1, 15deg); 177 | } 178 | 179 | 40% { 180 | transform: rotate3d(0, 0, 1, -10deg); 181 | } 182 | 183 | 60% { 184 | transform: rotate3d(0, 0, 1, 5deg); 185 | } 186 | 187 | 80% { 188 | transform: rotate3d(0, 0, 1, -5deg); 189 | } 190 | 191 | to { 192 | transform: rotate3d(0, 0, 1, 0deg); 193 | } 194 | } 195 | 196 | .swing { 197 | transform-origin: top center; 198 | animation-name: swing; 199 | } 200 | 201 | @keyframes tada { 202 | from { 203 | transform: scale3d(1, 1, 1); 204 | } 205 | 206 | 10%, 20% { 207 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 208 | } 209 | 210 | 30%, 50%, 70%, 90% { 211 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 212 | } 213 | 214 | 40%, 60%, 80% { 215 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 216 | } 217 | 218 | to { 219 | transform: scale3d(1, 1, 1); 220 | } 221 | } 222 | 223 | .tada { 224 | animation-name: tada; 225 | } 226 | 227 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 228 | 229 | @keyframes wobble { 230 | from { 231 | transform: none; 232 | } 233 | 234 | 15% { 235 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 236 | } 237 | 238 | 30% { 239 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 240 | } 241 | 242 | 45% { 243 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 244 | } 245 | 246 | 60% { 247 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 248 | } 249 | 250 | 75% { 251 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 252 | } 253 | 254 | to { 255 | transform: none; 256 | } 257 | } 258 | 259 | .wobble { 260 | animation-name: wobble; 261 | } 262 | 263 | @keyframes jello { 264 | from, 11.1%, to { 265 | transform: none; 266 | } 267 | 268 | 22.2% { 269 | transform: skewX(-12.5deg) skewY(-12.5deg); 270 | } 271 | 272 | 33.3% { 273 | transform: skewX(6.25deg) skewY(6.25deg); 274 | } 275 | 276 | 44.4% { 277 | transform: skewX(-3.125deg) skewY(-3.125deg); 278 | } 279 | 280 | 55.5% { 281 | transform: skewX(1.5625deg) skewY(1.5625deg); 282 | } 283 | 284 | 66.6% { 285 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 286 | } 287 | 288 | 77.7% { 289 | transform: skewX(0.390625deg) skewY(0.390625deg); 290 | } 291 | 292 | 88.8% { 293 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 294 | } 295 | } 296 | 297 | .jello { 298 | animation-name: jello; 299 | transform-origin: center; 300 | } 301 | 302 | @keyframes bounceIn { 303 | from, 20%, 40%, 60%, 80%, to { 304 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 305 | } 306 | 307 | 0% { 308 | opacity: 0; 309 | transform: scale3d(.3, .3, .3); 310 | } 311 | 312 | 20% { 313 | transform: scale3d(1.1, 1.1, 1.1); 314 | } 315 | 316 | 40% { 317 | transform: scale3d(.9, .9, .9); 318 | } 319 | 320 | 60% { 321 | opacity: 1; 322 | transform: scale3d(1.03, 1.03, 1.03); 323 | } 324 | 325 | 80% { 326 | transform: scale3d(.97, .97, .97); 327 | } 328 | 329 | to { 330 | opacity: 1; 331 | transform: scale3d(1, 1, 1); 332 | } 333 | } 334 | 335 | .bounceIn { 336 | animation-name: bounceIn; 337 | } 338 | 339 | @keyframes bounceInDown { 340 | from, 60%, 75%, 90%, to { 341 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 342 | } 343 | 344 | 0% { 345 | opacity: 0; 346 | transform: translate3d(0, -3000px, 0); 347 | } 348 | 349 | 60% { 350 | opacity: 1; 351 | transform: translate3d(0, 25px, 0); 352 | } 353 | 354 | 75% { 355 | transform: translate3d(0, -10px, 0); 356 | } 357 | 358 | 90% { 359 | transform: translate3d(0, 5px, 0); 360 | } 361 | 362 | to { 363 | transform: none; 364 | } 365 | } 366 | 367 | .bounceInDown { 368 | animation-name: bounceInDown; 369 | } 370 | 371 | @keyframes bounceInLeft { 372 | from, 60%, 75%, 90%, to { 373 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 374 | } 375 | 376 | 0% { 377 | opacity: 0; 378 | transform: translate3d(-3000px, 0, 0); 379 | } 380 | 381 | 60% { 382 | opacity: 1; 383 | transform: translate3d(25px, 0, 0); 384 | } 385 | 386 | 75% { 387 | transform: translate3d(-10px, 0, 0); 388 | } 389 | 390 | 90% { 391 | transform: translate3d(5px, 0, 0); 392 | } 393 | 394 | to { 395 | transform: none; 396 | } 397 | } 398 | 399 | .bounceInLeft { 400 | animation-name: bounceInLeft; 401 | } 402 | 403 | @keyframes bounceInRight { 404 | from, 60%, 75%, 90%, to { 405 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 406 | } 407 | 408 | from { 409 | opacity: 0; 410 | transform: translate3d(3000px, 0, 0); 411 | } 412 | 413 | 60% { 414 | opacity: 1; 415 | transform: translate3d(-25px, 0, 0); 416 | } 417 | 418 | 75% { 419 | transform: translate3d(10px, 0, 0); 420 | } 421 | 422 | 90% { 423 | transform: translate3d(-5px, 0, 0); 424 | } 425 | 426 | to { 427 | transform: none; 428 | } 429 | } 430 | 431 | .bounceInRight { 432 | animation-name: bounceInRight; 433 | } 434 | 435 | @keyframes bounceInUp { 436 | from, 60%, 75%, 90%, to { 437 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 438 | } 439 | 440 | from { 441 | opacity: 0; 442 | transform: translate3d(0, 3000px, 0); 443 | } 444 | 445 | 60% { 446 | opacity: 1; 447 | transform: translate3d(0, -20px, 0); 448 | } 449 | 450 | 75% { 451 | transform: translate3d(0, 10px, 0); 452 | } 453 | 454 | 90% { 455 | transform: translate3d(0, -5px, 0); 456 | } 457 | 458 | to { 459 | transform: translate3d(0, 0, 0); 460 | } 461 | } 462 | 463 | .bounceInUp { 464 | animation-name: bounceInUp; 465 | } 466 | 467 | @keyframes bounceOut { 468 | 20% { 469 | transform: scale3d(.9, .9, .9); 470 | } 471 | 472 | 50%, 55% { 473 | opacity: 1; 474 | transform: scale3d(1.1, 1.1, 1.1); 475 | } 476 | 477 | to { 478 | opacity: 0; 479 | transform: scale3d(.3, .3, .3); 480 | } 481 | } 482 | 483 | .bounceOut { 484 | animation-name: bounceOut; 485 | } 486 | 487 | @keyframes bounceOutDown { 488 | 20% { 489 | transform: translate3d(0, 10px, 0); 490 | } 491 | 492 | 40%, 45% { 493 | opacity: 1; 494 | transform: translate3d(0, -20px, 0); 495 | } 496 | 497 | to { 498 | opacity: 0; 499 | transform: translate3d(0, 2000px, 0); 500 | } 501 | } 502 | 503 | .bounceOutDown { 504 | animation-name: bounceOutDown; 505 | } 506 | 507 | @keyframes bounceOutLeft { 508 | 20% { 509 | opacity: 1; 510 | transform: translate3d(20px, 0, 0); 511 | } 512 | 513 | to { 514 | opacity: 0; 515 | transform: translate3d(-2000px, 0, 0); 516 | } 517 | } 518 | 519 | .bounceOutLeft { 520 | animation-name: bounceOutLeft; 521 | } 522 | 523 | @keyframes bounceOutRight { 524 | 20% { 525 | opacity: 1; 526 | transform: translate3d(-20px, 0, 0); 527 | } 528 | 529 | to { 530 | opacity: 0; 531 | transform: translate3d(2000px, 0, 0); 532 | } 533 | } 534 | 535 | .bounceOutRight { 536 | animation-name: bounceOutRight; 537 | } 538 | 539 | @keyframes bounceOutUp { 540 | 20% { 541 | transform: translate3d(0, -10px, 0); 542 | } 543 | 544 | 40%, 45% { 545 | opacity: 1; 546 | transform: translate3d(0, 20px, 0); 547 | } 548 | 549 | to { 550 | opacity: 0; 551 | transform: translate3d(0, -2000px, 0); 552 | } 553 | } 554 | 555 | .bounceOutUp { 556 | animation-name: bounceOutUp; 557 | } 558 | 559 | @keyframes fadeIn { 560 | from { 561 | opacity: 0; 562 | } 563 | 564 | to { 565 | opacity: 1; 566 | } 567 | } 568 | 569 | .fadeIn { 570 | animation-name: fadeIn; 571 | } 572 | 573 | @keyframes fadeInDown { 574 | from { 575 | opacity: 0; 576 | transform: translate3d(0, -100%, 0); 577 | } 578 | 579 | to { 580 | opacity: 1; 581 | transform: none; 582 | } 583 | } 584 | 585 | .fadeInDown { 586 | animation-name: fadeInDown; 587 | } 588 | 589 | @keyframes fadeInDownBig { 590 | from { 591 | opacity: 0; 592 | transform: translate3d(0, -2000px, 0); 593 | } 594 | 595 | to { 596 | opacity: 1; 597 | transform: none; 598 | } 599 | } 600 | 601 | .fadeInDownBig { 602 | animation-name: fadeInDownBig; 603 | } 604 | 605 | @keyframes fadeInLeft { 606 | from { 607 | opacity: 0; 608 | transform: translate3d(-100%, 0, 0); 609 | } 610 | 611 | to { 612 | opacity: 1; 613 | transform: none; 614 | } 615 | } 616 | 617 | .fadeInLeft { 618 | animation-name: fadeInLeft; 619 | } 620 | 621 | @keyframes fadeInLeftBig { 622 | from { 623 | opacity: 0; 624 | transform: translate3d(-2000px, 0, 0); 625 | } 626 | 627 | to { 628 | opacity: 1; 629 | transform: none; 630 | } 631 | } 632 | 633 | .fadeInLeftBig { 634 | animation-name: fadeInLeftBig; 635 | } 636 | 637 | @keyframes fadeInRight { 638 | from { 639 | opacity: 0; 640 | transform: translate3d(100%, 0, 0); 641 | } 642 | 643 | to { 644 | opacity: 1; 645 | transform: none; 646 | } 647 | } 648 | 649 | .fadeInRight { 650 | animation-name: fadeInRight; 651 | } 652 | 653 | @keyframes fadeInRightBig { 654 | from { 655 | opacity: 0; 656 | transform: translate3d(2000px, 0, 0); 657 | } 658 | 659 | to { 660 | opacity: 1; 661 | transform: none; 662 | } 663 | } 664 | 665 | .fadeInRightBig { 666 | animation-name: fadeInRightBig; 667 | } 668 | 669 | @keyframes fadeInUp { 670 | from { 671 | opacity: 0; 672 | transform: translate3d(0, 100%, 0); 673 | } 674 | 675 | to { 676 | opacity: 1; 677 | transform: none; 678 | } 679 | } 680 | 681 | .fadeInUp { 682 | animation-name: fadeInUp; 683 | } 684 | 685 | @keyframes fadeInUpBig { 686 | from { 687 | opacity: 0; 688 | transform: translate3d(0, 2000px, 0); 689 | } 690 | 691 | to { 692 | opacity: 1; 693 | transform: none; 694 | } 695 | } 696 | 697 | .fadeInUpBig { 698 | animation-name: fadeInUpBig; 699 | } 700 | 701 | @keyframes fadeOut { 702 | from { 703 | opacity: 1; 704 | } 705 | 706 | to { 707 | opacity: 0; 708 | } 709 | } 710 | 711 | .fadeOut { 712 | animation-name: fadeOut; 713 | } 714 | 715 | @keyframes fadeOutDown { 716 | from { 717 | opacity: 1; 718 | } 719 | 720 | to { 721 | opacity: 0; 722 | transform: translate3d(0, 100%, 0); 723 | } 724 | } 725 | 726 | .fadeOutDown { 727 | animation-name: fadeOutDown; 728 | } 729 | 730 | @keyframes fadeOutDownBig { 731 | from { 732 | opacity: 1; 733 | } 734 | 735 | to { 736 | opacity: 0; 737 | transform: translate3d(0, 2000px, 0); 738 | } 739 | } 740 | 741 | .fadeOutDownBig { 742 | animation-name: fadeOutDownBig; 743 | } 744 | 745 | @keyframes fadeOutLeft { 746 | from { 747 | opacity: 1; 748 | } 749 | 750 | to { 751 | opacity: 0; 752 | transform: translate3d(-100%, 0, 0); 753 | } 754 | } 755 | 756 | .fadeOutLeft { 757 | animation-name: fadeOutLeft; 758 | } 759 | 760 | @keyframes fadeOutLeftBig { 761 | from { 762 | opacity: 1; 763 | } 764 | 765 | to { 766 | opacity: 0; 767 | transform: translate3d(-2000px, 0, 0); 768 | } 769 | } 770 | 771 | .fadeOutLeftBig { 772 | animation-name: fadeOutLeftBig; 773 | } 774 | 775 | @keyframes fadeOutRight { 776 | from { 777 | opacity: 1; 778 | } 779 | 780 | to { 781 | opacity: 0; 782 | transform: translate3d(100%, 0, 0); 783 | } 784 | } 785 | 786 | .fadeOutRight { 787 | animation-name: fadeOutRight; 788 | } 789 | 790 | @keyframes fadeOutRightBig { 791 | from { 792 | opacity: 1; 793 | } 794 | 795 | to { 796 | opacity: 0; 797 | transform: translate3d(2000px, 0, 0); 798 | } 799 | } 800 | 801 | .fadeOutRightBig { 802 | animation-name: fadeOutRightBig; 803 | } 804 | 805 | @keyframes fadeOutUp { 806 | from { 807 | opacity: 1; 808 | } 809 | 810 | to { 811 | opacity: 0; 812 | transform: translate3d(0, -100%, 0); 813 | } 814 | } 815 | 816 | .fadeOutUp { 817 | animation-name: fadeOutUp; 818 | } 819 | 820 | @keyframes fadeOutUpBig { 821 | from { 822 | opacity: 1; 823 | } 824 | 825 | to { 826 | opacity: 0; 827 | transform: translate3d(0, -2000px, 0); 828 | } 829 | } 830 | 831 | .fadeOutUpBig { 832 | animation-name: fadeOutUpBig; 833 | } 834 | 835 | @keyframes flip { 836 | from { 837 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 838 | animation-timing-function: ease-out; 839 | } 840 | 841 | 40% { 842 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 843 | animation-timing-function: ease-out; 844 | } 845 | 846 | 50% { 847 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 848 | animation-timing-function: ease-in; 849 | } 850 | 851 | 80% { 852 | transform: perspective(400px) scale3d(.95, .95, .95); 853 | animation-timing-function: ease-in; 854 | } 855 | 856 | to { 857 | transform: perspective(400px); 858 | animation-timing-function: ease-in; 859 | } 860 | } 861 | 862 | .animated.flip { 863 | -webkit-backface-visibility: visible; 864 | backface-visibility: visible; 865 | animation-name: flip; 866 | } 867 | 868 | @keyframes flipInX { 869 | from { 870 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 871 | animation-timing-function: ease-in; 872 | opacity: 0; 873 | } 874 | 875 | 40% { 876 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 877 | animation-timing-function: ease-in; 878 | } 879 | 880 | 60% { 881 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 882 | opacity: 1; 883 | } 884 | 885 | 80% { 886 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 887 | } 888 | 889 | to { 890 | transform: perspective(400px); 891 | } 892 | } 893 | 894 | .flipInX { 895 | -webkit-backface-visibility: visible !important; 896 | backface-visibility: visible !important; 897 | animation-name: flipInX; 898 | } 899 | 900 | @keyframes flipInY { 901 | from { 902 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 903 | animation-timing-function: ease-in; 904 | opacity: 0; 905 | } 906 | 907 | 40% { 908 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 909 | animation-timing-function: ease-in; 910 | } 911 | 912 | 60% { 913 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 914 | opacity: 1; 915 | } 916 | 917 | 80% { 918 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 919 | } 920 | 921 | to { 922 | transform: perspective(400px); 923 | } 924 | } 925 | 926 | .flipInY { 927 | -webkit-backface-visibility: visible !important; 928 | backface-visibility: visible !important; 929 | animation-name: flipInY; 930 | } 931 | 932 | @keyframes flipOutX { 933 | from { 934 | transform: perspective(400px); 935 | } 936 | 937 | 30% { 938 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 939 | opacity: 1; 940 | } 941 | 942 | to { 943 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 944 | opacity: 0; 945 | } 946 | } 947 | 948 | .flipOutX { 949 | animation-name: flipOutX; 950 | -webkit-backface-visibility: visible !important; 951 | backface-visibility: visible !important; 952 | } 953 | 954 | @keyframes flipOutY { 955 | from { 956 | transform: perspective(400px); 957 | } 958 | 959 | 30% { 960 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 961 | opacity: 1; 962 | } 963 | 964 | to { 965 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 966 | opacity: 0; 967 | } 968 | } 969 | 970 | .flipOutY { 971 | -webkit-backface-visibility: visible !important; 972 | backface-visibility: visible !important; 973 | animation-name: flipOutY; 974 | } 975 | 976 | @keyframes lightSpeedIn { 977 | from { 978 | transform: translate3d(100%, 0, 0) skewX(-30deg); 979 | opacity: 0; 980 | } 981 | 982 | 60% { 983 | transform: skewX(20deg); 984 | opacity: 1; 985 | } 986 | 987 | 80% { 988 | transform: skewX(-5deg); 989 | opacity: 1; 990 | } 991 | 992 | to { 993 | transform: none; 994 | opacity: 1; 995 | } 996 | } 997 | 998 | .lightSpeedIn { 999 | animation-name: lightSpeedIn; 1000 | animation-timing-function: ease-out; 1001 | } 1002 | 1003 | @keyframes lightSpeedOut { 1004 | from { 1005 | opacity: 1; 1006 | } 1007 | 1008 | to { 1009 | transform: translate3d(100%, 0, 0) skewX(30deg); 1010 | opacity: 0; 1011 | } 1012 | } 1013 | 1014 | .lightSpeedOut { 1015 | animation-name: lightSpeedOut; 1016 | animation-timing-function: ease-in; 1017 | } 1018 | 1019 | @keyframes rotateIn { 1020 | from { 1021 | transform-origin: center; 1022 | transform: rotate3d(0, 0, 1, -200deg); 1023 | opacity: 0; 1024 | } 1025 | 1026 | to { 1027 | transform-origin: center; 1028 | transform: none; 1029 | opacity: 1; 1030 | } 1031 | } 1032 | 1033 | .rotateIn { 1034 | animation-name: rotateIn; 1035 | } 1036 | 1037 | @keyframes rotateInDownLeft { 1038 | from { 1039 | transform-origin: left bottom; 1040 | transform: rotate3d(0, 0, 1, -45deg); 1041 | opacity: 0; 1042 | } 1043 | 1044 | to { 1045 | transform-origin: left bottom; 1046 | transform: none; 1047 | opacity: 1; 1048 | } 1049 | } 1050 | 1051 | .rotateInDownLeft { 1052 | animation-name: rotateInDownLeft; 1053 | } 1054 | 1055 | @keyframes rotateInDownRight { 1056 | from { 1057 | transform-origin: right bottom; 1058 | transform: rotate3d(0, 0, 1, 45deg); 1059 | opacity: 0; 1060 | } 1061 | 1062 | to { 1063 | transform-origin: right bottom; 1064 | transform: none; 1065 | opacity: 1; 1066 | } 1067 | } 1068 | 1069 | .rotateInDownRight { 1070 | animation-name: rotateInDownRight; 1071 | } 1072 | 1073 | @keyframes rotateInUpLeft { 1074 | from { 1075 | transform-origin: left bottom; 1076 | transform: rotate3d(0, 0, 1, 45deg); 1077 | opacity: 0; 1078 | } 1079 | 1080 | to { 1081 | transform-origin: left bottom; 1082 | transform: none; 1083 | opacity: 1; 1084 | } 1085 | } 1086 | 1087 | .rotateInUpLeft { 1088 | animation-name: rotateInUpLeft; 1089 | } 1090 | 1091 | @keyframes rotateInUpRight { 1092 | from { 1093 | transform-origin: right bottom; 1094 | transform: rotate3d(0, 0, 1, -90deg); 1095 | opacity: 0; 1096 | } 1097 | 1098 | to { 1099 | transform-origin: right bottom; 1100 | transform: none; 1101 | opacity: 1; 1102 | } 1103 | } 1104 | 1105 | .rotateInUpRight { 1106 | animation-name: rotateInUpRight; 1107 | } 1108 | 1109 | @keyframes rotateOut { 1110 | from { 1111 | transform-origin: center; 1112 | opacity: 1; 1113 | } 1114 | 1115 | to { 1116 | transform-origin: center; 1117 | transform: rotate3d(0, 0, 1, 200deg); 1118 | opacity: 0; 1119 | } 1120 | } 1121 | 1122 | .rotateOut { 1123 | animation-name: rotateOut; 1124 | } 1125 | 1126 | @keyframes rotateOutDownLeft { 1127 | from { 1128 | transform-origin: left bottom; 1129 | opacity: 1; 1130 | } 1131 | 1132 | to { 1133 | transform-origin: left bottom; 1134 | transform: rotate3d(0, 0, 1, 45deg); 1135 | opacity: 0; 1136 | } 1137 | } 1138 | 1139 | .rotateOutDownLeft { 1140 | animation-name: rotateOutDownLeft; 1141 | } 1142 | 1143 | @keyframes rotateOutDownRight { 1144 | from { 1145 | transform-origin: right bottom; 1146 | opacity: 1; 1147 | } 1148 | 1149 | to { 1150 | transform-origin: right bottom; 1151 | transform: rotate3d(0, 0, 1, -45deg); 1152 | opacity: 0; 1153 | } 1154 | } 1155 | 1156 | .rotateOutDownRight { 1157 | animation-name: rotateOutDownRight; 1158 | } 1159 | 1160 | @keyframes rotateOutUpLeft { 1161 | from { 1162 | transform-origin: left bottom; 1163 | opacity: 1; 1164 | } 1165 | 1166 | to { 1167 | transform-origin: left bottom; 1168 | transform: rotate3d(0, 0, 1, -45deg); 1169 | opacity: 0; 1170 | } 1171 | } 1172 | 1173 | .rotateOutUpLeft { 1174 | animation-name: rotateOutUpLeft; 1175 | } 1176 | 1177 | @keyframes rotateOutUpRight { 1178 | from { 1179 | transform-origin: right bottom; 1180 | opacity: 1; 1181 | } 1182 | 1183 | to { 1184 | transform-origin: right bottom; 1185 | transform: rotate3d(0, 0, 1, 90deg); 1186 | opacity: 0; 1187 | } 1188 | } 1189 | 1190 | .rotateOutUpRight { 1191 | animation-name: rotateOutUpRight; 1192 | } 1193 | 1194 | @keyframes hinge { 1195 | 0% { 1196 | transform-origin: top left; 1197 | animation-timing-function: ease-in-out; 1198 | } 1199 | 1200 | 20%, 60% { 1201 | transform: rotate3d(0, 0, 1, 80deg); 1202 | transform-origin: top left; 1203 | animation-timing-function: ease-in-out; 1204 | } 1205 | 1206 | 40%, 80% { 1207 | transform: rotate3d(0, 0, 1, 60deg); 1208 | transform-origin: top left; 1209 | animation-timing-function: ease-in-out; 1210 | opacity: 1; 1211 | } 1212 | 1213 | to { 1214 | transform: translate3d(0, 700px, 0); 1215 | opacity: 0; 1216 | } 1217 | } 1218 | 1219 | .hinge { 1220 | animation-name: hinge; 1221 | } 1222 | 1223 | @keyframes jackInTheBox { 1224 | from { 1225 | opacity: 0; 1226 | transform: scale(0.1) rotate(30deg); 1227 | transform-origin: center bottom; 1228 | } 1229 | 1230 | 50% { 1231 | transform: rotate(-10deg); 1232 | } 1233 | 1234 | 70% { 1235 | transform: rotate(3deg); 1236 | } 1237 | 1238 | to { 1239 | opacity: 1; 1240 | transform: scale(1); 1241 | } 1242 | } 1243 | 1244 | .jackInTheBox { 1245 | animation-name: jackInTheBox; 1246 | } 1247 | 1248 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 1249 | 1250 | @keyframes rollIn { 1251 | from { 1252 | opacity: 0; 1253 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 1254 | } 1255 | 1256 | to { 1257 | opacity: 1; 1258 | transform: none; 1259 | } 1260 | } 1261 | 1262 | .rollIn { 1263 | animation-name: rollIn; 1264 | } 1265 | 1266 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 1267 | 1268 | @keyframes rollOut { 1269 | from { 1270 | opacity: 1; 1271 | } 1272 | 1273 | to { 1274 | opacity: 0; 1275 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 1276 | } 1277 | } 1278 | 1279 | .rollOut { 1280 | animation-name: rollOut; 1281 | } 1282 | 1283 | @keyframes zoomIn { 1284 | from { 1285 | opacity: 0; 1286 | transform: scale3d(.3, .3, .3); 1287 | } 1288 | 1289 | 50% { 1290 | opacity: 1; 1291 | } 1292 | } 1293 | 1294 | .zoomIn { 1295 | animation-name: zoomIn; 1296 | } 1297 | 1298 | @keyframes zoomInDown { 1299 | from { 1300 | opacity: 0; 1301 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 1302 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1303 | } 1304 | 1305 | 60% { 1306 | opacity: 1; 1307 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 1308 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1309 | } 1310 | } 1311 | 1312 | .zoomInDown { 1313 | animation-name: zoomInDown; 1314 | } 1315 | 1316 | @keyframes zoomInLeft { 1317 | from { 1318 | opacity: 0; 1319 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 1320 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1321 | } 1322 | 1323 | 60% { 1324 | opacity: 1; 1325 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 1326 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1327 | } 1328 | } 1329 | 1330 | .zoomInLeft { 1331 | animation-name: zoomInLeft; 1332 | } 1333 | 1334 | @keyframes zoomInRight { 1335 | from { 1336 | opacity: 0; 1337 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 1338 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1339 | } 1340 | 1341 | 60% { 1342 | opacity: 1; 1343 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 1344 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1345 | } 1346 | } 1347 | 1348 | .zoomInRight { 1349 | animation-name: zoomInRight; 1350 | } 1351 | 1352 | @keyframes zoomInUp { 1353 | from { 1354 | opacity: 0; 1355 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 1356 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1357 | } 1358 | 1359 | 60% { 1360 | opacity: 1; 1361 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 1362 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1363 | } 1364 | } 1365 | 1366 | .zoomInUp { 1367 | animation-name: zoomInUp; 1368 | } 1369 | 1370 | @keyframes zoomOut { 1371 | from { 1372 | opacity: 1; 1373 | } 1374 | 1375 | 50% { 1376 | opacity: 0; 1377 | transform: scale3d(.3, .3, .3); 1378 | } 1379 | 1380 | to { 1381 | opacity: 0; 1382 | } 1383 | } 1384 | 1385 | .zoomOut { 1386 | animation-name: zoomOut; 1387 | } 1388 | 1389 | @keyframes zoomOutDown { 1390 | 40% { 1391 | opacity: 1; 1392 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 1393 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1394 | } 1395 | 1396 | to { 1397 | opacity: 0; 1398 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 1399 | transform-origin: center bottom; 1400 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1401 | } 1402 | } 1403 | 1404 | .zoomOutDown { 1405 | animation-name: zoomOutDown; 1406 | } 1407 | 1408 | @keyframes zoomOutLeft { 1409 | 40% { 1410 | opacity: 1; 1411 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 1412 | } 1413 | 1414 | to { 1415 | opacity: 0; 1416 | transform: scale(.1) translate3d(-2000px, 0, 0); 1417 | transform-origin: left center; 1418 | } 1419 | } 1420 | 1421 | .zoomOutLeft { 1422 | animation-name: zoomOutLeft; 1423 | } 1424 | 1425 | @keyframes zoomOutRight { 1426 | 40% { 1427 | opacity: 1; 1428 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 1429 | } 1430 | 1431 | to { 1432 | opacity: 0; 1433 | transform: scale(.1) translate3d(2000px, 0, 0); 1434 | transform-origin: right center; 1435 | } 1436 | } 1437 | 1438 | .zoomOutRight { 1439 | animation-name: zoomOutRight; 1440 | } 1441 | 1442 | @keyframes zoomOutUp { 1443 | 40% { 1444 | opacity: 1; 1445 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 1446 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1447 | } 1448 | 1449 | to { 1450 | opacity: 0; 1451 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 1452 | transform-origin: center bottom; 1453 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1454 | } 1455 | } 1456 | 1457 | .zoomOutUp { 1458 | animation-name: zoomOutUp; 1459 | } 1460 | 1461 | @keyframes slideInDown { 1462 | from { 1463 | transform: translate3d(0, -100%, 0); 1464 | visibility: visible; 1465 | } 1466 | 1467 | to { 1468 | transform: translate3d(0, 0, 0); 1469 | } 1470 | } 1471 | 1472 | .slideInDown { 1473 | animation-name: slideInDown; 1474 | } 1475 | 1476 | @keyframes slideInLeft { 1477 | from { 1478 | transform: translate3d(-100%, 0, 0); 1479 | visibility: visible; 1480 | } 1481 | 1482 | to { 1483 | transform: translate3d(0, 0, 0); 1484 | } 1485 | } 1486 | 1487 | .slideInLeft { 1488 | animation-name: slideInLeft; 1489 | } 1490 | 1491 | @keyframes slideInRight { 1492 | from { 1493 | transform: translate3d(100%, 0, 0); 1494 | visibility: visible; 1495 | } 1496 | 1497 | to { 1498 | transform: translate3d(0, 0, 0); 1499 | } 1500 | } 1501 | 1502 | .slideInRight { 1503 | animation-name: slideInRight; 1504 | } 1505 | 1506 | @keyframes slideInUp { 1507 | from { 1508 | transform: translate3d(0, 100%, 0); 1509 | visibility: visible; 1510 | } 1511 | 1512 | to { 1513 | transform: translate3d(0, 0, 0); 1514 | } 1515 | } 1516 | 1517 | .slideInUp { 1518 | animation-name: slideInUp; 1519 | } 1520 | 1521 | @keyframes slideOutDown { 1522 | from { 1523 | transform: translate3d(0, 0, 0); 1524 | } 1525 | 1526 | to { 1527 | visibility: hidden; 1528 | transform: translate3d(0, 100%, 0); 1529 | } 1530 | } 1531 | 1532 | .slideOutDown { 1533 | animation-name: slideOutDown; 1534 | } 1535 | 1536 | @keyframes slideOutLeft { 1537 | from { 1538 | transform: translate3d(0, 0, 0); 1539 | } 1540 | 1541 | to { 1542 | visibility: hidden; 1543 | transform: translate3d(-100%, 0, 0); 1544 | } 1545 | } 1546 | 1547 | .slideOutLeft { 1548 | animation-name: slideOutLeft; 1549 | } 1550 | 1551 | @keyframes slideOutRight { 1552 | from { 1553 | transform: translate3d(0, 0, 0); 1554 | } 1555 | 1556 | to { 1557 | visibility: hidden; 1558 | transform: translate3d(100%, 0, 0); 1559 | } 1560 | } 1561 | 1562 | .slideOutRight { 1563 | animation-name: slideOutRight; 1564 | } 1565 | 1566 | @keyframes slideOutUp { 1567 | from { 1568 | transform: translate3d(0, 0, 0); 1569 | } 1570 | 1571 | to { 1572 | visibility: hidden; 1573 | transform: translate3d(0, -100%, 0); 1574 | } 1575 | } 1576 | 1577 | .slideOutUp { 1578 | animation-name: slideOutUp; 1579 | } 1580 | --------------------------------------------------------------------------------