├── .gitignore ├── package.json ├── LICENSE ├── docs ├── prism.css ├── prism.js ├── script.js └── index.html ├── src ├── notus.d.ts ├── notus.css ├── notus.js └── animate.css └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 18 | .grunt 19 | 20 | # node-waf configuration 21 | .lock-wscript 22 | 23 | # Compiled binary addons (http://nodejs.org/api/addons.html) 24 | build/Release 25 | 26 | # Dependency directory 27 | node_modules 28 | 29 | # Optional npm cache directory 30 | .npm 31 | 32 | # Optional REPL history 33 | .node_repl_history 34 | 35 | # Jetbrains IDE's 36 | .idea 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "notus", 3 | "version": "0.3.2", 4 | "description": "Yet another pop-up notification library for the web, strictly without jQuery", 5 | "main": "src/notus.js", 6 | "typings": "src/notus.d.ts", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/kushalpandya/notus.git" 13 | }, 14 | "keywords": [ 15 | "js", 16 | "notify", 17 | "popup", 18 | "toast", 19 | "snackbar" 20 | ], 21 | "author": "Kushal Pandya (https://doublslash.com)", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/kushalpandya/notus/issues" 25 | }, 26 | "homepage": "https://github.com/kushalpandya/notus#readme" 27 | } 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Kushal Pandya 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/prism.css: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */ 2 | /** 3 | * prism.js default theme for JavaScript, CSS and HTML 4 | * Based on dabblet (http://dabblet.com) 5 | * @author Lea Verou 6 | */ 7 | 8 | code[class*="language-"], 9 | pre[class*="language-"] { 10 | color: black; 11 | background: none; 12 | text-shadow: 0 1px white; 13 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 14 | text-align: left; 15 | white-space: pre; 16 | word-spacing: normal; 17 | word-break: normal; 18 | word-wrap: normal; 19 | line-height: 1.5; 20 | 21 | -moz-tab-size: 4; 22 | -o-tab-size: 4; 23 | tab-size: 4; 24 | 25 | -webkit-hyphens: none; 26 | -moz-hyphens: none; 27 | -ms-hyphens: none; 28 | hyphens: none; 29 | } 30 | 31 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 32 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 33 | text-shadow: none; 34 | background: #b3d4fc; 35 | } 36 | 37 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 38 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 39 | text-shadow: none; 40 | background: #b3d4fc; 41 | } 42 | 43 | @media print { 44 | code[class*="language-"], 45 | pre[class*="language-"] { 46 | text-shadow: none; 47 | } 48 | } 49 | 50 | /* Code blocks */ 51 | pre[class*="language-"] { 52 | padding: 1em; 53 | margin: .5em 0; 54 | overflow: auto; 55 | } 56 | 57 | :not(pre) > code[class*="language-"], 58 | pre[class*="language-"] { 59 | background: #f5f2f0; 60 | } 61 | 62 | /* Inline code */ 63 | :not(pre) > code[class*="language-"] { 64 | padding: .1em; 65 | border-radius: .3em; 66 | white-space: normal; 67 | } 68 | 69 | .token.comment, 70 | .token.prolog, 71 | .token.doctype, 72 | .token.cdata { 73 | color: slategray; 74 | } 75 | 76 | .token.punctuation { 77 | color: #999; 78 | } 79 | 80 | .namespace { 81 | opacity: .7; 82 | } 83 | 84 | .token.property, 85 | .token.tag, 86 | .token.boolean, 87 | .token.number, 88 | .token.constant, 89 | .token.symbol, 90 | .token.deleted { 91 | color: #905; 92 | } 93 | 94 | .token.selector, 95 | .token.attr-name, 96 | .token.string, 97 | .token.char, 98 | .token.builtin, 99 | .token.inserted { 100 | color: #690; 101 | } 102 | 103 | .token.operator, 104 | .token.entity, 105 | .token.url, 106 | .language-css .token.string, 107 | .style .token.string { 108 | color: #a67f59; 109 | background: hsla(0, 0%, 100%, .5); 110 | } 111 | 112 | .token.atrule, 113 | .token.attr-value, 114 | .token.keyword { 115 | color: #07a; 116 | } 117 | 118 | .token.function { 119 | color: #DD4A68; 120 | } 121 | 122 | .token.regex, 123 | .token.important, 124 | .token.variable { 125 | color: #e90; 126 | } 127 | 128 | .token.important, 129 | .token.bold { 130 | font-weight: bold; 131 | } 132 | .token.italic { 133 | font-style: italic; 134 | } 135 | 136 | .token.entity { 137 | cursor: help; 138 | } 139 | 140 | -------------------------------------------------------------------------------- /src/notus.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * notus v0.3.1 3 | * 4 | * Author: Kushal Pandya (https://doublslash.com) 5 | * Date: 27 September, 2016 6 | * 7 | * Notus Type Definitions. 8 | */ 9 | 10 | declare namespace notus { 11 | 12 | /** 13 | * Notus Configuration Shape 14 | */ 15 | interface NotusConfig { 16 | /* 17 | * Type can be anything from; 'popup', 'toast' or 'snackbar' 18 | */ 19 | notusType?: string; 20 | 21 | /* 22 | * Available positions for different notus types; 23 | * 'popup' => 'top-left' ('tl'), 'bottom-left' ('bl'), 24 | * 'top-right' ('tr') or 'bottom-right' ('br') 25 | * 26 | * 'toast' & 'snackbar' => 'top' ('t') or 'bottom' ('b') 27 | */ 28 | notusPosition?: string; 29 | 30 | /* 31 | * Alert type can be; 'none', 'success', 'failure' or 'warning' 32 | */ 33 | alertType?: string; 34 | 35 | /* 36 | * Title of notification to be shown, not available for notusType 'snackbar'. 37 | */ 38 | title?: string; 39 | 40 | /* 41 | * Message text to be shown in notification. 42 | */ 43 | message: string; 44 | 45 | /* 46 | * Show close button to close Notus 47 | */ 48 | closable?: boolean; 49 | 50 | /* 51 | * Callback method to call when close button is clicked. 52 | * By default, notification will be dismissed after callback is called and executed, 53 | * but you can prevent notification from dismissing by returning true (or a truthy value) from the callback. 54 | */ 55 | closeHandler?: Function; 56 | 57 | /* 58 | * Notus supports actions on all notification types (starting v0.3.0 to perform something when an action is clicked). 59 | * Notus currently supports only two actions; primary & secondary. 60 | * Default value for actionable is false. In case this property is set to true, 61 | * you need to provide at least one of the available action types; primaryAction and/or secondaryAction. 62 | */ 63 | actionable?: boolean; 64 | 65 | /* 66 | * Primary Action on Notus appears first in Notus bubble. 67 | */ 68 | primaryAction?: Action; 69 | 70 | /* 71 | * Secondary Action on Notus appears after Primary action on Notus bubble. 72 | */ 73 | secondaryAction?: Action; 74 | 75 | /* 76 | * Enable HTML support in strings provided for 'title', 'message' & 'text' within actions 77 | * this is unsafe and hence, it is false by default 78 | */ 79 | htmlString?: boolean; 80 | 81 | /* 82 | * Automatically close Notus once autoCloseDuration completes 83 | */ 84 | autoClose?: boolean; 85 | 86 | /* 87 | * Milliseconds to wait before closing 88 | */ 89 | autoCloseDuration?: number; 90 | 91 | /* 92 | * Animate while showing/hiding Notus 93 | */ 94 | animate?: boolean; 95 | 96 | /* 97 | * Animation Type while showing/hiding Notus; it can be 'slide', 'fade' or 'custom' 98 | * Using 'custom' exposes an additional config animationClass which can be used 99 | * to provide animations using animate.css < https://github.com/daneden/animate.css > 100 | */ 101 | animationType?: string; 102 | 103 | /* 104 | * Animation Duration to apply while showing/hiding Notus, 105 | * it supports values in milliseconds. 106 | * which is then passed to CSS animation-duration 107 | */ 108 | animationDuration?: number; 109 | 110 | /* 111 | * Animation Timing Function to use while showing/hiding Notus, 112 | * it supports any value that CSS animation-timing-function supports, 113 | * including cubic-bezier() & steps() 114 | * value is then passed to CSS animation-timing-function 115 | */ 116 | animationFunction?: string; 117 | 118 | /* 119 | * This config is only applicable if animationType is 'custom' 120 | */ 121 | animationClass?: AnimationClass; 122 | 123 | /* 124 | * Provide custom CSS class that you want to apply on Parent element of Notus 125 | */ 126 | themeClass?: string; 127 | } 128 | 129 | /* 130 | * Custom Animation CSS Class for Notus 131 | * 132 | * provide custom 'extry' & 'exit' classes to control animations, 133 | * exit animation only occurs if Notus auto-closes itself 134 | * while providing 'fixed' (that stays applied always) class to control your overrides, 135 | * you can also use external library like animate.css 136 | */ 137 | interface AnimationClass { 138 | fixed: string; 139 | entry: string; 140 | exit: string; 141 | } 142 | 143 | /** 144 | * Action Handler 145 | */ 146 | interface Action { 147 | /* 148 | * Title of action, it supports markup in case 'htmlString' of NotusConfig is set to true. 149 | */ 150 | text: string; 151 | 152 | /* 153 | * Callback function to invoke when action is clicked by user. 154 | * By default, notification will be dismissed after callback is called and executed, 155 | * but you can prevent notification from dismissing by returning true (or a truthy value) from the callback. 156 | */ 157 | actionHandler: Function; 158 | } 159 | 160 | /** 161 | * Main Notus Interface 162 | */ 163 | interface Notus { 164 | /* 165 | * Primary API method to show Notus notification. 166 | * @param notusConfig should be a valid NotusConfig Object 167 | */ 168 | send(notusConfig: NotusConfig): any; 169 | 170 | /* 171 | * Gets reference to previously initialized global notus instance. 172 | */ 173 | noConflict(): Notus; 174 | } 175 | 176 | /** 177 | * Reference to global notus object 178 | */ 179 | interface NotusRef { 180 | notus(defaultConfig?: NotusConfig): Notus; 181 | } 182 | } 183 | 184 | declare function notus(): notus.Notus; 185 | declare function notus(defaultConfig: notus.NotusConfig): notus.Notus; 186 | 187 | export = notus; 188 | -------------------------------------------------------------------------------- /docs/prism.js: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */ 2 | var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(v instanceof a)){u.lastIndex=0;var b=u.exec(v),k=1;if(!b&&h&&m!=r.length-1){if(u.lastIndex=y,b=u.exec(e),!b)break;for(var w=b.index+(g?b[1].length:0),_=b.index+b[0].length,A=m,S=y,P=r.length;P>A&&_>S;++A)S+=(r[A].matchedStr||r[A]).length,w>=S&&(++m,y=S);if(r[m]instanceof a||r[A-1].greedy)continue;k=A-m,v=e.slice(y,S),b.index-=y}if(b){g&&(f=b[1].length);var w=b.index+f,b=b[0].slice(f),_=w+b.length,x=v.slice(0,w),O=v.slice(_),j=[m,k];x&&j.push(x);var N=new a(l,c?n.tokenize(b,c):b,d,b,h);j.push(N),O&&j.push(O),Array.prototype.splice.apply(r,j)}}}}}return r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.matchedStr=a||null,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var i={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}n.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=(o?" ":"")+s+'="'+(i.attributes[s]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(o?" "+o:"")+">"+i.content+""},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,i=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),i&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,document.addEventListener&&!r.hasAttribute("data-manual")&&("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); 3 | Prism.languages.markup={comment://,prolog:/<\?[\w\W]+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup; 4 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:{pattern:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/()[\w\W]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag)); 5 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/}; 6 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*\*?|\/|~|\^|%|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0}}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\\\|\\?[^\\])*?`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\w\W]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript; 7 | -------------------------------------------------------------------------------- /src/notus.css: -------------------------------------------------------------------------------- 1 | /** 2 | * notus v0.3.1 3 | * 4 | * Author: Kushal Pandya (https://doublslash.com) 5 | * Date: 12 February, 2016 6 | * 7 | * Main Notus Stylesheet. 8 | */ 9 | 10 | /*---------------- Supported Animations ----------------*/ 11 | 12 | @keyframes slide-in-right { 13 | 0% { 14 | transform: translateX(110%); 15 | } 16 | } 17 | 18 | @keyframes slide-in-left { 19 | 0% { 20 | transform: translateX(-110%); 21 | } 22 | } 23 | 24 | @keyframes slide-in-top { 25 | 0% { 26 | transform: translateY(-110%); 27 | } 28 | } 29 | 30 | @keyframes slide-in-bottom { 31 | 0% { 32 | transform: translateY(110%); 33 | } 34 | } 35 | 36 | @keyframes slide-out-lr { 37 | 0% { 38 | transform: translateX(0%); 39 | } 40 | } 41 | 42 | @keyframes slide-out-tb { 43 | 0% { 44 | transform: translateY(0%); 45 | } 46 | } 47 | 48 | @keyframes fade-in { 49 | 0% { 50 | opacity: 0; 51 | } 52 | } 53 | 54 | @keyframes fade-out { 55 | 0% { 56 | opacity: 1; 57 | } 58 | } 59 | 60 | /*---------------- Container Styles ----------------*/ 61 | 62 | .notus-container { 63 | position: fixed; 64 | pointer-events: none; 65 | z-index: 9999999; 66 | } 67 | 68 | .notus-container.notus-position-tr, 69 | .notus-container.notus-position-tl, 70 | .notus-container.notus-position-top { 71 | top: 0; 72 | } 73 | 74 | .notus-container.notus-position-br, 75 | .notus-container.notus-position-tr { 76 | right: 0; 77 | } 78 | 79 | .notus-container.notus-position-bl, 80 | .notus-container.notus-position-tl { 81 | left: 0; 82 | } 83 | 84 | .notus-container.notus-position-br, 85 | .notus-container.notus-position-bl, 86 | .notus-container.notus-position-bottom { 87 | bottom: 0; 88 | } 89 | 90 | .notus-container.notus-position-top, 91 | .notus-container.notus-position-bottom { 92 | display: block; 93 | left: 0; 94 | right: 0; 95 | margin: auto; 96 | } 97 | 98 | .notus-container.notus-container-snackbar { 99 | width: 100%; 100 | } 101 | 102 | .notus-container.notus-position-bl .notus, 103 | .notus-container.notus-position-tl .notus { 104 | margin-left: 10px; 105 | } 106 | 107 | .notus-container.notus-position-br .notus, 108 | .notus-container.notus-position-tr .notus { 109 | margin-right: 10px; 110 | } 111 | 112 | .notus-position-top .notus, 113 | .notus-position-bottom .notus { 114 | width: 200px; 115 | } 116 | 117 | .notus-position-top .notus.notus-type-snackbar, 118 | .notus-position-bottom .notus.notus-type-snackbar { 119 | width: 60%; 120 | margin: 0 auto; 121 | } 122 | 123 | .notus-position-top .notus.notus-type-snackbar { 124 | margin-bottom: 10px; 125 | } 126 | 127 | .notus-position-bottom .notus.notus-type-snackbar { 128 | margin-top: 10px; 129 | } 130 | 131 | /*---------------- Built-in Animation Config ----------------*/ 132 | 133 | /* Common Animation Config */ 134 | .notus-type-popup.notus-slide, 135 | .notus-type-toast.notus-slide, 136 | .notus-type-snackbar.notus-slide { 137 | animation-duration: .2s; 138 | animation-timing-function: ease-out; 139 | } 140 | 141 | /* Slide-in for Popup */ 142 | .notus-position-tr .notus-type-popup.notus-slide.notus-slide-in, 143 | .notus-position-br .notus-type-popup.notus-slide.notus-slide-in { 144 | animation-name: slide-in-right; 145 | } 146 | 147 | .notus-position-tl .notus-type-popup.notus-slide.notus-slide-in, 148 | .notus-position-bl .notus-type-popup.notus-slide.notus-slide-in { 149 | animation-name: slide-in-left; 150 | } 151 | 152 | /* Slide-in for Toast / Snackbar */ 153 | .notus-position-top .notus-type-toast.notus-slide.notus-slide-in, 154 | .notus-position-top .notus-type-snackbar.notus-slide.notus-slide-in { 155 | animation-name: slide-in-top; 156 | } 157 | 158 | .notus-position-bottom .notus-type-toast.notus-slide.notus-slide-in, 159 | .notus-position-bottom .notus-type-snackbar.notus-slide.notus-slide-in { 160 | animation-name: slide-in-bottom; 161 | } 162 | 163 | /* Fade-in for Popup / Toast / Snackbar */ 164 | .notus.notus-fade { 165 | animation-duration: .4s; 166 | animation-timing-function: ease-out; 167 | } 168 | 169 | .notus.notus-fade.notus-fade-in { 170 | animation-name: fade-in; 171 | } 172 | 173 | /* Slide-out for Popup */ 174 | .notus-type-popup.notus-slide.notus-slide-out { 175 | animation-name: slide-out-lr; 176 | } 177 | 178 | .notus-type-toast.notus-slide.notus-slide-out, 179 | .notus-type-snackbar.notus-slide.notus-slide-out { 180 | animation-name: slide-out-tb; 181 | } 182 | 183 | /* Fade-out for Popup / Toast / Snackbar */ 184 | .notus.notus-fade.notus-fade-out { 185 | animation-name: fade-out; 186 | } 187 | 188 | /*---------------- Notification Card Styles ----------------*/ 189 | 190 | .notus { 191 | position: relative; 192 | box-sizing: border-box; 193 | margin: 10px auto; 194 | padding: 8px; 195 | box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 196 | 0 3px 1px -2px rgba(0,0,0,.2), 197 | 0 1px 5px 0 rgba(0,0,0,.12); 198 | 199 | border-radius: 2px; 200 | font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; 201 | font-size: 16px; 202 | pointer-events: all; 203 | } 204 | 205 | .notus .notus-close { 206 | position: absolute; 207 | height: 20px; 208 | width: 20px; 209 | padding: 3px 4px; 210 | font-size: 2rem; 211 | line-height: 15px; 212 | 213 | -webkit-user-select: none; 214 | -moz-user-select: none; 215 | -ms-user-select: none; 216 | user-select: none; 217 | } 218 | 219 | .notus .notus-actions { 220 | font-size: 1.4rem; 221 | } 222 | 223 | .notus .notus-close, 224 | .notus .notus-actions { 225 | cursor: pointer; 226 | font-weight: 600; 227 | } 228 | 229 | .notus .notus-content-body { 230 | font-size: 1.3rem; 231 | } 232 | 233 | .notus:not(.notus-type-snackbar) { 234 | width: 300px; 235 | min-height: 100px; 236 | } 237 | 238 | .notus:not(.notus-type-snackbar) .notus-content { 239 | max-width: 95%; 240 | } 241 | 242 | .notus:not(.notus-type-snackbar) .notus-content-title { 243 | font-size: 1.8rem; 244 | font-weight: 700; 245 | } 246 | 247 | .notus:not(.notus-type-snackbar) .notus-content-body { 248 | margin-top: 5px; 249 | } 250 | 251 | .notus:not(.notus-type-snackbar) .notus-close { 252 | top: 0; 253 | right: 0; 254 | } 255 | 256 | .notus:not(.notus-type-snackbar) .notus-actions { 257 | margin-top: 3px; 258 | padding-top: 3px; 259 | font-size: 1.2rem; 260 | border-top: 1px solid #E0E0E0; 261 | } 262 | 263 | .notus:not(.notus-type-snackbar) .notus-actions .action-item { 264 | display: block; 265 | padding: 6px 4px; 266 | } 267 | 268 | /** Styles for Snackbar **/ 269 | 270 | .notus-position-bottom .notus.notus-type-snackbar { 271 | box-shadow: 0 -2px 2px 0 rgba(0,0,0,.14), 272 | 0 -3px 1px -2px rgba(0,0,0,.2), 273 | 0 -1px 5px 0 rgba(0,0,0,.12); 274 | } 275 | 276 | .notus.notus-type-snackbar:after { 277 | content: "."; 278 | display: block; 279 | height: 0; 280 | clear: both; 281 | visibility: hidden; 282 | } 283 | 284 | .notus.notus-type-snackbar .notus-close { 285 | left: 5px; 286 | } 287 | 288 | .notus.notus-type-snackbar .notus-content { 289 | float: left; 290 | width: 85%; 291 | margin-left: 25px; 292 | } 293 | 294 | .notus.notus-type-snackbar .notus-content .notus-content-body { 295 | line-height: 2.1rem; 296 | } 297 | 298 | .notus.notus-type-snackbar .notus-actions { 299 | float: right; 300 | padding: 0 3px; 301 | } 302 | 303 | .notus.notus-type-snackbar .notus-actions .action-item { 304 | padding: 3px 4px; 305 | } 306 | 307 | .notus.notus-type-snackbar .notus-actions .action-item.action-secondary { 308 | margin-left: 10px; 309 | } 310 | 311 | /*---------------- Material Light Theme ----------------*/ 312 | 313 | .notus.notus-material-light .notus-content .notus-content-title, 314 | .notus.notus-type-snackbar.notus-material-light .notus-content .notus-content-body { 315 | color: rgba(0, 0, 0, 0.87); 316 | } 317 | 318 | .notus.notus-material-light .notus-close .icon-close, 319 | .notus.notus-type-snackbar.notus-material-light .notus-action, 320 | .notus.notus-material-light .notus-content .notus-content-body { 321 | color: rgba(0, 0, 0, 0.54); 322 | } 323 | 324 | .notus.notus-material-light { 325 | background-color: #F5F5F5; 326 | border: 1px solid #EEEEEE; 327 | } 328 | 329 | .notus.notus-material-light .notus-actions { 330 | border-color: #E0E0E0; 331 | } 332 | 333 | .notus.notus-material-light .notus-close:hover, 334 | .notus.notus-material-light .notus-actions .action-item:hover { 335 | background-color: #E0E0E0; 336 | } 337 | 338 | .notus.notus-material-light.notus-alert-success { 339 | background-color: #E8F5E9; 340 | border-color: #C8E6C9; 341 | } 342 | 343 | .notus.notus-material-light.notus-alert-success .notus-actions { 344 | border-color: #C8E6C9; 345 | } 346 | 347 | .notus.notus-material-light.notus-alert-success .notus-close:hover, 348 | .notus.notus-material-light.notus-alert-success .notus-actions .action-item:hover { 349 | background-color: #C8E6C9; 350 | } 351 | 352 | .notus.notus-material-light.notus-alert-failure { 353 | background-color: #FFEBEE; 354 | border-color: #FFCDD2; 355 | } 356 | 357 | .notus.notus-material-light.notus-alert-failure .notus-actions { 358 | border-color: #FFCDD2; 359 | } 360 | 361 | .notus.notus-material-light.notus-alert-failure .notus-close:hover, 362 | .notus.notus-material-light.notus-alert-failure .notus-actions .action-item:hover { 363 | background-color: #FFCDD2; 364 | } 365 | 366 | .notus.notus-material-light.notus-alert-warning { 367 | background-color: #FFF3E0; 368 | border-color: #FFE0B2; 369 | } 370 | 371 | .notus.notus-material-light.notus-alert-warning .notus-actions { 372 | border-color: #FFE0B2; 373 | } 374 | 375 | .notus.notus-material-light.notus-alert-warning .notus-close:hover, 376 | .notus.notus-material-light.notus-alert-warning .notus-actions .action-item:hover { 377 | background-color: #FFE0B2; 378 | } 379 | -------------------------------------------------------------------------------- /docs/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * notus v0.3.0 3 | * 4 | * Author: Kushal Pandya (https://doublslash.com) 5 | * Date: 19 August, 2016 6 | * 7 | * Notus Interactive Demo Script. 8 | */ 9 | 10 | (function() { 11 | var myNotus = notus(), 12 | 13 | btnNotify = document.getElementById('btnNotify'), 14 | sourceEl = document.getElementById('example-source'), 15 | 16 | cbClosable = document.querySelector('input[type="checkbox"][name="closable"]'), 17 | cbAutoClose = document.querySelector('input[type="checkbox"][name="autoClose"]'), 18 | cbAnimate = document.querySelector('input[type="checkbox"][name="animate"]'), 19 | cbActionable = document.querySelector('input[type="checkbox"][name="actionable"]'), 20 | 21 | rdNotusType = document.querySelectorAll('input[type="radio"][name="notusType"]'), 22 | rdNotusPosition = document.querySelectorAll('input[type="radio"][name="notusPosition"]'), 23 | rdAlertType = document.querySelectorAll('input[type="radio"][name="alertType"]'), 24 | rdAnimationType = document.querySelectorAll('input[type="radio"][name="animationType"]'), 25 | 26 | notusType = "popup", 27 | notusPosition = "top-left", 28 | alertType = "none", 29 | animationType = "slide", 30 | closable = true, 31 | autoClose = true, 32 | animate = true, 33 | actionable = false, 34 | 35 | generatedNotusConfig, 36 | fnClone, 37 | fnRemoveDefaultConfig, 38 | fnGetSource, 39 | fnGenerateNotusConfig, 40 | i; 41 | 42 | fnClone = function(obj) { 43 | if (obj === null || typeof obj !== 'object') 44 | return obj; 45 | 46 | var temp = obj.constructor(); 47 | 48 | for (var key in obj) 49 | temp[key] = fnClone(obj[key]); 50 | 51 | return temp; 52 | }; 53 | 54 | fnRemoveDefaultConfig = function(config) { 55 | var key, 56 | defaultConfig = { 57 | notusType: 'popup', 58 | notusPosition: 'top-right', 59 | alertType: 'none', 60 | htmlString: false, 61 | closable: true, 62 | autoClose: true, 63 | autoCloseDuration: 3000, 64 | actionable: false, 65 | animate: true, 66 | animationType: 'slide', 67 | animationDuration: 300, 68 | animationFunction: 'ease-out', 69 | animationClass: { 70 | fixed: '', 71 | entry: '', 72 | exit: '' 73 | }, 74 | themeClass: 'notus-material-light' 75 | }; 76 | 77 | for (key in defaultConfig) 78 | { 79 | if (defaultConfig.hasOwnProperty(key) && 80 | defaultConfig[key] === config[key]) 81 | { 82 | delete config[key]; 83 | if (key === "actionable") 84 | { 85 | delete config["primaryAction"]; 86 | delete config["secondaryAction"]; 87 | } 88 | } 89 | } 90 | }; 91 | 92 | fnGetSource = function(config) { 93 | var copyConfig = fnClone(config), 94 | sourceConfig, 95 | primaryActionHandler = '', 96 | secondaryActionHandler = '', 97 | key; 98 | 99 | for (key in copyConfig) 100 | { 101 | if (copyConfig.hasOwnProperty(key) && 102 | key === "actionable" && 103 | copyConfig.actionable) 104 | { 105 | if (copyConfig.primaryAction) 106 | { 107 | primaryActionHandler += String(copyConfig.primaryAction.actionHandler); 108 | copyConfig.primaryAction.actionHandler = primaryActionHandler; 109 | } 110 | 111 | if (copyConfig.secondaryAction) 112 | { 113 | secondaryActionHandler += String(copyConfig.secondaryAction.actionHandler); 114 | copyConfig.secondaryAction.actionHandler = secondaryActionHandler; 115 | } 116 | } 117 | } 118 | 119 | sourceConfig = JSON.stringify(copyConfig, null, 4) // Stringify with 4 space indentation 120 | .replace(/"(\w+)"\s*:/g, '$1:') // Remove quotes enclosing key names 121 | .replace(/\"\\/g, '"') // Replace escaped forward slash 122 | //.replace(/\\\"/g, '"') // Replace escaped quotes 123 | .replace(/\"function/g, "function") // Remove quotes preceding `function` 124 | .replace(/}\"/g, "}") // Remove quotes following `}` 125 | .replace(/\\r\\n/g, "") // Remove new-line characters `\r\n` 126 | .replace(//g, ">"); 128 | 129 | return js_beautify(sourceConfig); 130 | }; 131 | 132 | fnGenerateNotusConfig = function() { 133 | var notusConfig = { 134 | title: document.getElementById('notusTitle').value, 135 | message: document.getElementById('notusMessage').value, 136 | closable: closable, 137 | autoClose: autoClose, 138 | autoCloseDuration: 5000, 139 | notusType: notusType, 140 | notusPosition: notusPosition, 141 | alertType: alertType, 142 | animate: animate, 143 | animationType: animationType, 144 | animationDuration: 300, 145 | htmlString: true 146 | }; 147 | 148 | notusConfig['actionable'] = cbActionable.checked; 149 | notusConfig['primaryAction'] = { 150 | 'text': " Reply", 151 | 'actionHandler': function(e) { 152 | alert('Primary action clicked!'); 153 | } 154 | }; 155 | 156 | notusConfig['secondaryAction'] = { 157 | 'text': " Snooze", 158 | 'actionHandler': function(e) { 159 | alert('Secondary action clicked!'); 160 | return true; 161 | } 162 | }; 163 | 164 | if (notusType === 'snackbar') 165 | { 166 | delete notusConfig.title; 167 | 168 | notusConfig['primaryAction'].text = 'CONFIRM'; 169 | notusConfig['secondaryAction'].text = 'UNDO'; 170 | } 171 | 172 | if (animationType === 'custom') 173 | { 174 | notusConfig['animationClass'] = { 175 | fixed: 'animated', 176 | entry: 'flipInX', 177 | exit: 'flipOutX' 178 | }; 179 | } 180 | 181 | fnRemoveDefaultConfig(notusConfig); 182 | sourceEl.innerHTML = fnGetSource(notusConfig); 183 | Prism.highlightElement(sourceEl); 184 | 185 | return notusConfig; 186 | }; 187 | 188 | for (i = 0; i < rdNotusType.length; i++) 189 | { 190 | rdNotusType[i].onchange = function(e) { 191 | var supportPositions, 192 | j; 193 | 194 | if (this.checked) 195 | notusType = this.value; 196 | 197 | supportPositions = document.querySelectorAll('input[type="radio"][data-supported]'); 198 | 199 | for (j = 0; j < supportPositions.length; j++) 200 | { 201 | if (notusType == 'popup') 202 | { 203 | supportPositions[j].disabled = (supportPositions[j].dataset.supported === 'ts'); 204 | document.querySelectorAll('input[type="radio"][data-supported="p"]')[0].checked = true; 205 | notusPosition = 'top-left'; 206 | } 207 | else 208 | { 209 | supportPositions[j].disabled = (supportPositions[j].dataset.supported === 'p'); 210 | document.querySelectorAll('input[type="radio"][data-supported="ts"]')[(notusType === 'snackbar') ? 1 : 0].checked = true; 211 | notusPosition = (notusType === 'snackbar') ? 'bottom' : 'top'; 212 | } 213 | } 214 | 215 | document.getElementById('notusTitle').disabled = (notusType === 'snackbar'); 216 | 217 | generatedNotusConfig = fnGenerateNotusConfig(); 218 | }; 219 | } 220 | 221 | for (i = 0; i < rdNotusPosition.length; i++) 222 | { 223 | rdNotusPosition[i].onchange = function(e) { 224 | if (this.checked) 225 | notusPosition = this.value; 226 | 227 | generatedNotusConfig = fnGenerateNotusConfig(); 228 | } 229 | } 230 | 231 | for (i = 0; i < rdAlertType.length; i++) 232 | { 233 | rdAlertType[i].onchange = function(e) { 234 | if (this.checked) 235 | alertType = this.value; 236 | 237 | generatedNotusConfig = fnGenerateNotusConfig(); 238 | } 239 | } 240 | 241 | for (i = 0; i < rdAnimationType.length; i++) 242 | { 243 | rdAnimationType[i].onchange = function(e) { 244 | if (this.checked) 245 | animationType = this.value; 246 | 247 | generatedNotusConfig = fnGenerateNotusConfig(); 248 | }; 249 | } 250 | 251 | cbClosable.onchange = function(e) { 252 | closable = this.checked; 253 | generatedNotusConfig = fnGenerateNotusConfig(); 254 | }; 255 | 256 | cbAutoClose.onchange = function(e) { 257 | autoClose = this.checked; 258 | generatedNotusConfig = fnGenerateNotusConfig(); 259 | }; 260 | 261 | cbAnimate.onchange = function(e) { 262 | for (i = 0; i < rdAnimationType.length; i++) 263 | { 264 | rdAnimationType[i].checked = false; 265 | rdAnimationType[i].disabled = !this.checked; 266 | } 267 | 268 | if (this.checked) 269 | { 270 | rdAnimationType[0].checked = true; 271 | animationType = "slide"; 272 | } 273 | 274 | animate = this.checked; 275 | generatedNotusConfig = fnGenerateNotusConfig(); 276 | }; 277 | 278 | cbActionable.onchange = function(e) { 279 | actionable = this.checked; 280 | generatedNotusConfig = fnGenerateNotusConfig(); 281 | }; 282 | 283 | btnNotify.onclick = function(e) { 284 | e.preventDefault(); 285 | 286 | if (!generatedNotusConfig) 287 | generatedNotusConfig = fnGenerateNotusConfig(); 288 | 289 | myNotus.send(generatedNotusConfig); 290 | }; 291 | })(); 292 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Notus 2 | ====================== 3 | [![NPM](https://img.shields.io/npm/dt/notus.svg)](https://npmjs.org/package/notus) 4 | 5 | [![NPM](https://nodei.co/npm/notus.png?compact=true)](https://npmjs.org/package/notus) 6 | 7 | 8 | Yet another non-blocking, pop-up notification library for the web, strictly without jQuery (or any other dependencies). 9 | 10 | ### Why? 11 | I wanted simple notification JS library at my day-job which can be used to show popup/toast notifications with variety of configurations, and does it with one strict requirement; **NO external dependencies**. I came across several great libraries which allow to show popup notifications but either they depend on jQuery, or they are not so minimal. Not that they are bad, but it is not wise to include a library to accomplish small task, in a huge project with a large codebase, that carries lot of additional weight with it. 12 | 13 | ### How Notus is different? 14 | Notus is small, it doesn't rely on any external framework or library, its implementation is rather very simple to understand (and tweak). It relies on modern web standards from core logic to the animations. 15 | 16 | See the [project homepage](https://kushalpandya.github.io/notus/) for demo. 17 | 18 | ### Configure 19 | --- 20 | Download the tarball and extract it, include `notus.js` and `notus.css` in your page ``. 21 | ```html 22 | 23 | 24 | 25 | 26 | Awesome Notifications 27 | ... 28 | ... 29 | 30 | 31 | 32 | ``` 33 | 34 | Install latest Notus release using using `npm`. 35 | ```bash 36 | npm install -S notus 37 | ``` 38 | 39 | ### Use 40 | --- 41 | 42 | - **Initialize:** 43 | Get instance of Notus using global `notus(config)` which returns reference to `notus` singleton. Configuration map passed during initialization is considered as default and will be used during creating notifications. 44 | 45 | ```html 46 | 49 | ``` 50 | 51 | - **Call:** 52 | Notus provides a single method `send()` which optionally accepts `config` map to provide certain options. Note that this `config` will override any options that you passed during initialization of Notus. 53 | 54 | ```html 55 | 63 | ``` 64 | - **Options:** 65 | Notus supports following options. 66 | 67 | - `notusType`: Type of notification you want to show, it can be `popup` (default), `toast` or `snackbar` (inspired from Android's [Snackbar](http://www.getmdl.io/components/index.html#snackbar-section) notifications). 68 | - `notusPosition`: Location on viewport where you want to show notification. Popup notification supports `top-left`, `top-right`, `bottom-left` & `bottom-right` positions, while Toast & Snackbar support only `top` & `bottom` positions. 69 | - `alertType`: Alert type determines whether notification is relating to `success`, `failure`, `warning` or `none` (i.e. Neutral). 70 | - `title`: Title of notification to be shown, not available for `snackbar`. 71 | - `message`: Message text to be shown in notification. 72 | - `closable`: Whether to show close button to close notification. 73 | - `closeHandler`: Callback method to call when close button is clicked. By default, notification will be dismissed after callback is called and executed, but you can prevent notification from dismissing by returning `true` (or a _truthy_ value) from the callback. 74 | - `actionable`: Notus supports actions on all notification types (starting `v0.3.0` to perform something when an action is clicked). Notus currently supports only two actions; **primary** & **secondary**. Default value for actionable is `false`. In case this property is set to `true`, you need to provide at least one of the available action types; `primaryAction` and/or `secondaryAction`. 75 | - `primaryAction`/`secondaryAction`: This is an object containing following properties. 76 | - `text`: Title of action, it supports markup in case `htmlString` is set to `true`. 77 | - `actionHandler`: Callback function to invoke when action is clicked by user. By default, notification will be dismissed after callback is called and executed, but you can prevent notification from dismissing by returning `true` (or a _truthy_ value) from the callback. 78 | - `htmlString`: By default, Notus prevents value of `title`, `message` and `actionText` to have HTML markup for safety reasons. Set this to `true` to allow notification texts to support HTML markup. 79 | - `autoClose`: Whether to close notification automatically after certain duration. Default is `true`. 80 | - `autoCloseDuration`: Duration (in milliseconds) to wait before automatically closing the notification. Default is `3000`. 81 | - `animate`: Whether to show/hide notification with animation. Default is `true`. 82 | - `animationType`: Animation type to use while performing show/hide animation. Supported types are `slide` (default), `fade` and `custom` (only available in >=`v0.2.0`). 83 | - `animationDuration`: Speed of animation in milliseconds. Default is `300`. 84 | - `animationFunction`: Value to pass to CSS `animation-timing-function` property. Value can be any valid value that original CSS property supports (including `cubic-bezier()` & `steps()`). Default is `ease-out`. See [MDN article](https://developer.mozilla.org/en/docs/Web/CSS/animation-timing-function) on this CSS property. **Note:** This config is ignored if you provide `animationType` as `custom`. 85 | - `animationClass`: If you have set `animationType` as `custom`, you can use this config to provide additional animation classes to have complete control on animations. This config is a map which supports following properties. 86 | - `fixed`: CSS class that you want Notus element to always have (useful in controlling overrides). 87 | - `entry`: CSS class to use while showing Notus. 88 | - `exit`: CSS class to use while hiding Notus (only if it auto-closes itself with `autoClose` set to `true`). 89 | - `themeClass`: CSS class to add to main notification element to apply custom styling. Default is `notus-material-light` which is built-in theme and is part of `notus.css` stylesheet. Note that providing value to this option will replace `notus-material-light` with your value instead of adding a new class. 90 | 91 | ### Examples 92 | --- 93 | - **Popup**: Showing Notus as a popup in bottom-right corner of screen. 94 | ```javascript 95 | myNotus.send({ 96 | notusType: 'popup', 97 | notusPosition: 'bottom-right', 98 | title: 'Notus Popup', 99 | message: 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas!!' 100 | }); 101 | ``` 102 | - **Calling a method on Close**: Providing `closeHandler` to call custom logic when Notus is closed by user. 103 | ```javascript 104 | myNotus.send({ 105 | notusType: 'toast', 106 | notusPosition: 'bottom', 107 | title: 'Notus Popup', 108 | message: 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas!!', 109 | closeHandler: function(e) { 110 | alert('Close was clicked on Notus'); 111 | return true; // Persist this Toast after click. 112 | } 113 | }); 114 | ``` 115 | - **Actionable Toast**: Providing `primaryAction` and `secondaryAction` on Toast Notus to call a method on clicking an action. 116 | ```javascript 117 | myNotus.send({ 118 | notusType: 'toast', 119 | notusPosition: 'bottom-right', 120 | title: 'Notus Popup', 121 | message: 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas!!', 122 | actionable: true, 123 | primaryAction: { 124 | text: 'Confirm', 125 | actionHandler: function(e) { 126 | alert('Confirm was clicked!'); 127 | return true; // Persist this Toast after click. 128 | } 129 | }, 130 | secondaryAction: { 131 | text: 'Undo', 132 | actionHandler: function(e) { 133 | alert('Undo was clicked!'); 134 | } 135 | } 136 | }); 137 | ``` 138 | - **Custom Animations**: Providing custom animations using CSS. Starting `v0.2.0`, Notus fully supports custom animations that you define in your own CSS file, along with it, Notus is now also compatible with [Animate.css](https://github.com/daneden/animate.css) to provide custom animations, you're just required to include `animate.css` (download it from project page) into your page as follows to use it (it is not part of notus); 139 | ```html 140 | 141 | 142 | 143 | 144 | Awesome Notifications 145 | ... 146 | ... 147 | 148 | 149 | 150 | 151 | ``` 152 | Once included, use `animationType` as `custom` and provide values for `animationClass` as follows. 153 | ```javascript 154 | myNotus.send({ 155 | notusType: 'toast', 156 | notusPosition: 'bottom', 157 | title: 'Notus Popup', 158 | message: 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas!!', 159 | animationType: 'custom', 160 | animationClass: { 161 | fixed: 'animated', // This is part of animate.css, this class should always be present in element which will animate. 162 | entry: 'flipInX', // Animation to use when Notus appears, see https://daneden.github.io/animate.css/ for more supported animations 163 | exit: 'flipOutX' // Animation to use when Notus disappears (i.e. auto-closes), see https://daneden.github.io/animate.css/ for more supported animations 164 | } 165 | }); 166 | ``` 167 | 168 | ### Known Limitations 169 | --- 170 | 171 | For simplicity in implementation, Notus uses unprefixed versions of CSS properties for animations, so animations will not work on any browser which supports only vendor-prefixed version of CSS properties for `@keyframe` animations. You can work-around this problem by using something like [Autoprefixer](https://github.com/postcss/autoprefixer) against `notus.css` stylesheet while building your project. 172 | 173 | ### Upgrading from previous release 174 | 175 | For those who are upgrading notus to [v0.3.0](https://github.com/kushalpandya/notus/releases/tag/v0.3.0) from previous releases, here are points to keep in mind: 176 | 177 | - Support for actions on all notus types (previously limited to only `snackbar`) means `actionHandler` will not work, and you'll need to provide `primaryAction` and/or `secondaryAction` for actions. 178 | - Returning `true` or a _truthy_ value from any handler function (eg; `closeHandler` or `actionHandler` within `primaryAction`/`secondaryAction`) will prevent notus from closing. 179 | 180 | ### Version Information 181 | --- 182 | * [0.1.0](https://github.com/kushalpandya/notus/releases/tag/v0.1.0) - First Release. 183 | * [0.1.1](https://github.com/kushalpandya/notus/releases/tag/v0.1.1) - Fixes for Toast & Snackbar. 184 | * [0.2.0](https://github.com/kushalpandya/notus/releases/tag/v0.2.0) - Adds support for custom animations, compatible with awesome CSS animation library [Animate.css](https://github.com/daneden/animate.css). 185 | * [0.2.1](https://github.com/kushalpandya/notus/releases/tag/v0.2.1) - Added support for bower installation. Thanks to [@lossendae](https://github.com/lossendae). 186 | * [0.3.0](https://github.com/kushalpandya/notus/releases/tag/v0.3.0) - Added actionable support for all notus types. 187 | * [0.3.1](https://github.com/kushalpandya/notus/releases/tag/v0.3.1) - Added Typings for TypeScript support. 188 | * [0.3.2](https://github.com/kushalpandya/notus/releases/tag/v0.3.2) - Make message config mandatory for all supported notification types. 189 | 190 | ### Author 191 | --- 192 | [Kushal Pandya](https://doublslash.com) 193 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Notus - Better Popup Notifications 7 | 8 | 9 | 10 | 11 | 12 | 88 | 89 | 90 | 91 | Fork me on GitHub 95 | 96 | 97 |
98 |
99 |

Notus

100 |
101 |
102 |

Notus - Web Notifications Widget

103 |

Yet another non-blocking pop-up notification library for the web, strictly without jQuery.

104 |
105 |
106 | 107 | 108 |
109 |
110 | 111 | 112 |
113 |
114 |
115 | 119 |
120 |
121 | 125 |
126 |
127 | 131 |
132 |
133 |
134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 150 | 158 | 166 | 174 | 175 | 176 | 184 | 192 | 200 | 208 | 209 | 210 | 218 | 226 | 234 | 242 | 243 | 244 | 252 | 260 | 268 | 269 | 270 | 278 | 279 | 280 | 288 | 289 |
Position Alert Type Behavior Animation Type
143 |
144 | 148 |
149 | 		151 |
152 | 156 |
157 | 		159 |
160 | 164 |
165 | 		167 |
168 | 172 |
173 |
177 |
178 | 182 |
183 | 		185 |
186 | 190 |
191 | 		193 |
194 | 198 |
199 | 		201 |
202 | 206 |
207 |
211 |
212 | 216 |
217 | 		219 |
220 | 224 |
225 | 		227 |
228 | 232 |
233 | 		235 |
236 | 240 |
241 |
245 |
246 | 250 |
251 | 		253 |
254 | 258 |
259 | 		261 |
262 | 266 |
267 |
271 |
272 | 276 |
277 |
281 |
282 | 286 |
287 |
290 |
291 |
292 |

Configuration

293 | 
{
294 |     title: "Notus",
295 |     message: "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas!",
296 |     autoCloseDuration: 5000,
297 |     notusPosition: "top-left",
298 |     htmlString: true
299 | }
300 |

301 |

or

302 |

Download

303 |
304 |
305 |
306 |

No Dependencies

307 |

There are ton of Notification widgets out there but they either depend on jQuery or they are too heavy to include in your already large project, Notus has no dependencies and is super-small to blend in your existing project. Honourable mentions; Notify.js & AlertifyJS

308 |
309 |
310 |

Light Weight

311 |

Notus is less than 4 KB (2 KB for JS & little over 1 KB for CSS) minified and gzipped.

312 |
313 |
314 |

Fully Flexible

315 |

Notus is fully customizable and supports several ways to show notifications (Popup, Toast & Snackbar) as well as custom styling using themeClass config.

316 |
317 |
318 |

Pure CSS3 Animations

319 |

Notus provides basic Slide and Fade animations which are entirely CSS driven. It even allows custom easing function (with animationFunction) and animation duration (with animationDuration) in config.

320 |
321 |
322 |

Works with Browsers, NodeJS & TypeScript

323 |

Notus supports web browsers as well as Desktop platforms like Electron or NW.js. It also supports TypeScript Type Definitions starting v0.3.1.

324 |
325 |
326 |

Latest Browser Support

327 |

Notus supports latest Chrome, Firefox, Safari & IE11+.

328 |
329 |
330 | 334 |
335 | 336 | 337 | 338 | 339 | 340 | -------------------------------------------------------------------------------- /src/notus.js: -------------------------------------------------------------------------------- 1 | /** 2 | * notus v0.3.1 3 | * 4 | * Author: Kushal Pandya (https://doublslash.com) 5 | * Date: 12 February, 2016 6 | * 7 | * Main Notus Script. 8 | */ 9 | 10 | (function() { 11 | "use strict"; 12 | 13 | var self = this, 14 | hasRequire = (typeof require !== 'undefined'), 15 | old_notus = self.notus, 16 | _n = {}, 17 | notus; 18 | 19 | var htmlEntityMap = { 20 | '&': '&', 21 | '<': '<', 22 | '>': '>', 23 | '"': '"', 24 | "'": ''', 25 | '/': '/', 26 | '`': '`', 27 | '=': '=' 28 | }, 29 | notusTypeMap = { 30 | 'popup': 'popup', 31 | 'toast': 'toast', 32 | 'snackbar': 'snackbar' 33 | }, 34 | positionShorts = { 35 | 'top-left': 'tl', 36 | 'top-right': 'tr', 37 | 'bottom-left': 'bl', 38 | 'bottom-right': 'br', 39 | 'top': 'top', 40 | 'bottom': 'bottom', 41 | 'tl': 'tl', 42 | 'tr': 'tr', 43 | 'bl': 'bl', 44 | 'br': 'br', 45 | 't': 'top', 46 | 'b': 'bottom' 47 | }, 48 | positionForType = { 49 | 'popup': ['tl', 'tr', 'bl', 'br'], 50 | 'toast': ['top', 'bottom'], 51 | 'snackbar': ['top', 'bottom'], 52 | }, 53 | alertTypeMap = { 54 | 'success': 'success', 55 | 'failure': 'failure', 56 | 'warning': 'warning', 57 | 'custom': 'custom', 58 | 'none': '' 59 | }, 60 | animationTypeMap = { 61 | 'slide': 'slide', 62 | 'fade': 'fade', 63 | 'custom': 'custom' 64 | }; 65 | 66 | var fnValidateConfig, 67 | fnGetParentClassList, 68 | fnCreateNotusContainer, 69 | fnGetEntryAnimatorStyle, 70 | fnGetExitAnimatorStyle, 71 | fnBindCloseHandler, 72 | fnBindCloseListener, 73 | fnBindActionHandler, 74 | fnCreateNotusEl; 75 | 76 | /** 77 | * Local Utility API. 78 | */ 79 | _n = { 80 | /** 81 | * Generate timestamp based unique ID. 82 | */ 83 | genId: function() { 84 | return 'notus-' + Math.floor(Math.random() * 10000000000000001); 85 | }, 86 | 87 | /** 88 | * Simple Object extender (similar to jQuery's $.extend()). 89 | * courtesy; SO < http://stackoverflow.com/a/11197343/414749 > 90 | */ 91 | extend: function() { 92 | var key, i; 93 | 94 | for (i = 1; i < arguments.length; i++) 95 | { 96 | for (key in arguments[i]) 97 | { 98 | if (arguments[i].hasOwnProperty(key)) 99 | arguments[0][key] = arguments[i][key]; 100 | } 101 | } 102 | 103 | return arguments[0]; 104 | }, 105 | 106 | /** 107 | * String formatter. 108 | * Accepts first param as target string, and following params as strings to 109 | * replace placeholders (eg; {0}). 110 | * courtesy: SO 111 | */ 112 | format: function() { 113 | var str = arguments[0], 114 | reg, 115 | i; 116 | 117 | for (i = 0; i < arguments.length - 1; i++) { 118 | reg = new RegExp("\\{" + i + "\\}", "gm"); 119 | str = str.replace(reg, arguments[i + 1]); 120 | } 121 | 122 | return str; 123 | }, 124 | 125 | /** 126 | * Escapes HTML tags present in the string. 127 | * courtesy: Mustache.js < https://github.com/janl/mustache.js > 128 | */ 129 | escapeHtml: function(string) { 130 | return String(string).replace(/[&<>"'`=\/]/g, function fromEntityMap (s) { 131 | return htmlEntityMap[s]; 132 | }); 133 | }, 134 | 135 | /** 136 | * Removes an Element from the DOM. 137 | * This method uses el.remove() internally in supported browsers 138 | * except for IE11, where it is using el.parent.removeChild(). 139 | * courtesy: MDN < https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove > 140 | */ 141 | removeEl: function(el) { 142 | if (typeof el.remove === 'function') 143 | el.remove(); 144 | else if (el.parentElement) 145 | el.parentElement.removeChild(el); 146 | } 147 | }; 148 | 149 | /** Helpers Begin **/ 150 | 151 | /** 152 | * Validate user configuration and throw Errors accordingly. 153 | */ 154 | fnValidateConfig = function(config) { 155 | var type = config.notusType, 156 | position = config.notusPosition; 157 | 158 | if (notusTypeMap[type] === undefined) 159 | throw new Error('Unknown value for notusType'); 160 | 161 | if (positionShorts[position] === undefined) 162 | throw new Error('Unknown value for notusPosition'); 163 | 164 | if (alertTypeMap[config.alertType] === undefined) 165 | throw new Error('Unknown value for alertType'); 166 | 167 | if (animationTypeMap[config.animationType] === undefined) 168 | throw new Error('Unknown value for animationType'); 169 | 170 | if (config.message === undefined) 171 | throw new Error('Unknown value for message'); 172 | 173 | if (positionForType[type].indexOf(positionShorts[position]) < 0) 174 | throw new Error('Unsupported position "' + position + '" for notusType "' + type + '"'); 175 | 176 | if (config.closeHandler && 177 | typeof config.closeHandler !== "function") 178 | throw new Error("closeHandler is not a function"); 179 | 180 | if (config.actionable && 181 | (typeof config.primaryAction !== "object" && typeof config.secondaryAction !== "object")) 182 | throw new Error("primaryAction or secondaryAction undefined for actionable notus"); 183 | }; 184 | 185 | /** 186 | * Creates list of CSS classes which are to be applied main Notus element based on config. 187 | */ 188 | fnGetParentClassList = function(config) { 189 | var classList = [], 190 | type = config.notusType, 191 | alertType = config.alertType; 192 | 193 | classList.push('notus'); 194 | 195 | classList.push('notus-type-' + notusTypeMap[type]); 196 | 197 | if (alertTypeMap[alertType]) 198 | classList.push('notus-alert-' + alertTypeMap[alertType]); 199 | 200 | if (config.themeClass) 201 | classList.push(config.themeClass); 202 | 203 | return classList; 204 | }; 205 | 206 | /** 207 | * Creates new (or returns existing) Notus container elements to house Notus for a particular position. 208 | * Note that it creates containers for all position types that Notus supports, and it will return 209 | * reference to an existing container if it was previously created. 210 | */ 211 | fnCreateNotusContainer = function(config) { 212 | var type = config.notusType, 213 | position = config.notusPosition, 214 | containerCls = ['notus-container'], 215 | containerEl; 216 | 217 | containerCls.push('notus-position-' + positionShorts[position]); 218 | 219 | if (type !== 'popup') 220 | containerCls.push((type === 'toast') ? 'notus-container-toast' : 'notus-container-snackbar'); 221 | 222 | containerEl = document.querySelector('.' + containerCls.join('.')); 223 | 224 | if (!containerEl) 225 | { 226 | containerEl = document.createElement('div'); 227 | containerEl.setAttribute('class', containerCls.join(' ')); 228 | document.body.appendChild(containerEl); 229 | } 230 | 231 | return containerEl; 232 | }; 233 | 234 | /** 235 | * Binds Timer event on each Notus that has autoClose set to true. 236 | * the timer waits for autoCloseDuration to finish before closing & destroying Notus. 237 | */ 238 | fnBindCloseListener = function(config, notusEl) { 239 | var type = config.notusType, 240 | animationType = config.animationType, 241 | animationClass = config.animationClass; 242 | 243 | setTimeout(function() { 244 | notusEl.setAttribute('style', fnGetExitAnimatorStyle(config).join(';')); 245 | 246 | 247 | if (animationType === 'slide') 248 | { 249 | notusEl.classList.remove('notus-slide-in'); 250 | notusEl.classList.add('notus-slide-out'); 251 | } 252 | else if (animationType === 'fade') 253 | { 254 | notusEl.classList.remove('notus-fade-in'); 255 | notusEl.classList.add('notus-fade-out'); 256 | } 257 | else 258 | { 259 | notusEl.classList.remove(animationClass.extry); 260 | notusEl.classList.add(animationClass.exit); 261 | } 262 | 263 | setTimeout(function() { 264 | _n.removeEl(notusEl); 265 | }, config.animationDuration); 266 | 267 | }, config.autoCloseDuration); 268 | }; 269 | 270 | /** 271 | * Binds Mouse Click event handler on Close element of Notus. 272 | * it optionally supports closeHandler function that gets called before Notus is destroyed. 273 | * if closeHandler returns false (boolean false), Notus will be prevented from destroying. 274 | */ 275 | fnBindCloseHandler = function(config, notusEl) { 276 | var closeEl = notusEl.querySelector('.notus-close'); 277 | 278 | closeEl.onclick = function(e) { 279 | var persist; 280 | 281 | if (config.closeHandler) 282 | persist = config.closeHandler.apply(this, arguments); 283 | 284 | if (!persist) 285 | _n.removeEl(notusEl); 286 | }; 287 | }; 288 | 289 | /** 290 | * Binds Mouse Click event handler on action element of Notus type Snackbar. 291 | */ 292 | fnBindActionHandler = function(config, notusEl) { 293 | var primaryActionEl = notusEl.querySelector('.notus-actions > .action-item.action-primary'), 294 | secondaryActionEl = notusEl.querySelector('.notus-actions > .action-item.action-secondary'), 295 | getActionHandler; 296 | 297 | getActionHandler = function(actionConfig) { 298 | return function(e) { 299 | var persist = actionConfig.actionHandler.apply(this, arguments); 300 | if (!persist) 301 | _n.removeEl(notusEl); 302 | }; 303 | }; 304 | 305 | if (primaryActionEl) 306 | primaryActionEl.onclick = getActionHandler(config.primaryAction); 307 | 308 | if (secondaryActionEl) 309 | secondaryActionEl.onclick = getActionHandler(config.secondaryAction); 310 | }; 311 | 312 | /** 313 | * Updates and applies Entry Animation CSS styles and Classes of Notus Element based on config. 314 | */ 315 | fnGetEntryAnimatorStyle = function(config) { 316 | var type = config.notusType, 317 | animationType = config.animationType, 318 | animationFunction = config.animationFunction, 319 | animationDuration = config.animationDuration / 1000, 320 | isSlide = animationType === 'slide', 321 | animators = []; 322 | 323 | if (animationType !== 'custom') 324 | { 325 | if (type === 'popup') 326 | animators.push(isSlide ? 'transform: translateX(0%)' : 'opacity: 1'); 327 | else 328 | animators.push(isSlide ? 'transform: translateY(0%)' : 'opacity: 1'); 329 | 330 | if (animationFunction) 331 | animators.push(_n.format('animation-timing-function: {0}', animationFunction)); 332 | } 333 | 334 | if (animationDuration > 0) 335 | animators.push(_n.format('animation-duration: {0}s', animationDuration)); 336 | 337 | return animators; 338 | }; 339 | 340 | /** 341 | * Updates and applies Exit Animation CSS styles and Classes of Notus Element based on config. 342 | */ 343 | fnGetExitAnimatorStyle = function(config) { 344 | var type = config.notusType, 345 | position = config.notusPosition, 346 | animationType = config.animationType, 347 | animationFunction = config.animationFunction, 348 | animationDuration = config.animationDuration / 1000, 349 | isSlide = animationType === 'slide', 350 | animators = []; 351 | 352 | if (animationType !== 'custom') 353 | { 354 | if (type === 'popup') 355 | { 356 | if (positionShorts[position].indexOf('l') > -1) 357 | animators.push(isSlide ? 'transform: translateX(-110%)' : 'opacity: 0'); 358 | else 359 | animators.push(isSlide ? 'transform: translateX(110%)' : 'opacity: 0'); 360 | } 361 | else 362 | { 363 | if (positionShorts[position] === 'top') 364 | animators.push(isSlide ? 'transform: translateY(-110%)' : 'opacity: 0'); 365 | else 366 | animators.push(isSlide ? 'transform: translateY(110%)' : 'opacity: 0'); 367 | } 368 | 369 | if (animationFunction) 370 | animators.push(_n.format('animation-timing-function: {0}', animationFunction)); 371 | } 372 | 373 | if (animationDuration > 0) 374 | animators.push(_n.format('animation-duration: {0}s', animationDuration)); 375 | 376 | return animators; 377 | }; 378 | 379 | /** 380 | * Creates main Notus DOM Element based with provided config. 381 | */ 382 | fnCreateNotusEl = function(config) { 383 | var parentDiv = document.createElement('div'), 384 | animationType = config.animationType, 385 | animationClass = config.animationClass, 386 | isSlide = animationType === 'slide', 387 | htmlStringSupported = config.htmlString, 388 | classList = [], 389 | notusElTpl = '', 390 | notusTitleElTpl = '', 391 | primaryActionElTpl = '', 392 | secondaryActionElTpl = '', 393 | actionElTpl = '', 394 | closeElTpl = ''; 395 | 396 | classList = fnGetParentClassList(config); 397 | 398 | if (config.animate) 399 | { 400 | if (animationType !== 'custom') 401 | { 402 | classList.push(isSlide ? 'notus-slide' : 'notus-fade'); 403 | classList.push(isSlide ? 'notus-slide-in' : 'notus-fade-in'); 404 | } 405 | else 406 | { 407 | classList.push(animationClass.fixed); 408 | classList.push(animationClass.entry); 409 | } 410 | 411 | parentDiv.setAttribute('style', fnGetEntryAnimatorStyle(config).join(';')); 412 | } 413 | 414 | parentDiv.setAttribute('id', _n.genId()); 415 | parentDiv.setAttribute('class', classList.join(' ')); 416 | 417 | if (config.closable) 418 | { 419 | closeElTpl = [ 420 | '
', 421 | '×', 422 | '
' 423 | ].join(''); 424 | } 425 | 426 | if (config.actionable) 427 | { 428 | if (config.primaryAction) 429 | primaryActionElTpl = _n.format('{0}', htmlStringSupported ? config.primaryAction.text : _n.escapeHtml(config.primaryAction.text)); 430 | 431 | if (config.secondaryAction) 432 | secondaryActionElTpl = _n.format('{0}', htmlStringSupported ? config.secondaryAction.text : _n.escapeHtml(config.secondaryAction.text)); 433 | 434 | actionElTpl = [ 435 | '
', 436 | primaryActionElTpl, 437 | secondaryActionElTpl, 438 | '
' 439 | ].join(''); 440 | } 441 | 442 | if (config.notusType !== 'snackbar') 443 | notusTitleElTpl = '
{0}
'; 444 | 445 | notusElTpl = [ 446 | '
', 447 | notusTitleElTpl, 448 | '
', 449 | '{1}', 450 | '
', 451 | '
', 452 | closeElTpl, 453 | actionElTpl 454 | ].join(''); 455 | 456 | parentDiv.innerHTML = _n.format(notusElTpl, 457 | htmlStringSupported ? config.title : _n.escapeHtml(config.title), 458 | htmlStringSupported ? config.message : _n.escapeHtml(config.message) 459 | ); 460 | 461 | return parentDiv; 462 | }; 463 | 464 | /** Helpers End **/ 465 | 466 | /** Main Notus Object Begin **/ 467 | 468 | notus = self.notus = function(userConfig) { 469 | var bodyEL = document.body, 470 | defaultConfig = {}, 471 | thisNotus = {}; 472 | 473 | /** Default Config options that Notus provides **/ 474 | defaultConfig = { 475 | notusType: 'popup', /* Type can be anything from; 'popup', 'toast' or 'snackbar' */ 476 | 477 | notusPosition: 'top-right', /* Available positions for different notus types; 478 | 'popup' => 'top-left' ('tl'), 'bottom-left' ('bl'), 479 | 'top-right' ('tr') or 'bottom-right' ('br') 480 | 'toast' & 'snackbar' => 'top' ('t') or 'bottom' ('b') */ 481 | 482 | alertType: 'none', /* Alert type can be; 'none', 'success', 'failure' or 'warning' */ 483 | 484 | htmlString: false, /* Enable HTML support in strings provided for 'title', 'message' & 'text' within actions, 485 | this is unsafe and hence, it is false by default */ 486 | 487 | closable: true, /* Show close button to close Notus */ 488 | 489 | autoClose: true, /* Automatically close Notus once autoCloseDuration completes */ 490 | 491 | autoCloseDuration: 3000, /* Milliseconds to wait before closing */ 492 | 493 | animate: true, /* Animate while showing/hiding Notus */ 494 | 495 | animationType: 'slide', /* Animation Type while showing/hiding Notus; it can be 'slide', 'fade' or 'custom' 496 | Using 'custom' exposes an additional config animationClass which can be used 497 | to provide animations using animate.css < https://github.com/daneden/animate.css > */ 498 | 499 | animationDuration: 300, /* Animation Duration to apply while showing/hiding Notus, 500 | it supports values in milliseconds. 501 | which is then passed to CSS animation-duration */ 502 | 503 | animationFunction: 'ease-out', /* Animation Timing Function to use while showing/hiding Notus, 504 | it supports any value that CSS animation-timing-function supports, 505 | including cubic-bezier() & steps() 506 | value is then passed to CSS animation-timing-function */ 507 | 508 | animationClass: { 509 | fixed: '', 510 | entry: '', 511 | exit: '' 512 | }, /* This config is only applicable if animationType is 'custom' 513 | Using this config, you can provide custom 'extry' & 'exit' classes to control 514 | animations (exit animation only occurs if Notus auto-closes itself) 515 | with this config, while providing 'fixed' (that stays applied always) class to control your overrides, 516 | you can also use external library like animate.css */ 517 | 518 | themeClass: 'notus-material-light' /* Provide custom CSS class that you want to apply on Parent element of Notus */ 519 | }; 520 | 521 | userConfig = _n.extend(defaultConfig, userConfig); 522 | 523 | /** Notus API begin **/ 524 | 525 | /** 526 | * Resolve instance conflict in case module is loaded more than once. 527 | */ 528 | thisNotus.noConflict = function() { 529 | self.notus = old_notus; 530 | return notus; 531 | }; 532 | 533 | /** 534 | * Main Notus send() method to send supported type of notus Notifications. 535 | */ 536 | thisNotus.send = function(config) { 537 | var containerEl, 538 | notusEl; 539 | 540 | config = _n.extend({}, userConfig, config); 541 | 542 | fnValidateConfig(config); 543 | 544 | containerEl = fnCreateNotusContainer(config); 545 | 546 | notusEl = fnCreateNotusEl(config); 547 | 548 | if (config.closable) 549 | fnBindCloseHandler(config, notusEl); 550 | 551 | if (config.actionable) 552 | fnBindActionHandler(config, notusEl); 553 | 554 | if (config.notusPosition.indexOf('bottom') > -1) 555 | containerEl.insertBefore(notusEl, containerEl.firstChild); 556 | else 557 | containerEl.appendChild(notusEl); 558 | 559 | if (config.autoClose) 560 | fnBindCloseListener(config, notusEl); 561 | 562 | return notusEl.getAttribute('id'); 563 | }; 564 | /** Notus API end **/ 565 | 566 | return thisNotus; 567 | }; 568 | 569 | // UMD Definition < https://github.com/umdjs/umd >. 570 | if (typeof exports !== 'undefined') 571 | { 572 | if (typeof module !== 'undefined' && 573 | module.exports) 574 | { 575 | exports = module.exports = notus; 576 | } 577 | exports.notus = notus; 578 | } 579 | else 580 | { 581 | self.notus = notus; 582 | } 583 | }).call(this); 584 | -------------------------------------------------------------------------------- /src/animate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*! 4 | * animate.css -http://daneden.me/animate 5 | * Version - 3.5.0 6 | * Licensed under the MIT license - http://opensource.org/licenses/MIT 7 | * 8 | * Copyright (c) 2016 Daniel Eden 9 | */ 10 | 11 | .animated { 12 | -webkit-animation-duration: 1s; 13 | animation-duration: 1s; 14 | -webkit-animation-fill-mode: both; 15 | animation-fill-mode: both; 16 | } 17 | 18 | .animated.infinite { 19 | -webkit-animation-iteration-count: infinite; 20 | animation-iteration-count: infinite; 21 | } 22 | 23 | .animated.hinge { 24 | -webkit-animation-duration: 2s; 25 | animation-duration: 2s; 26 | } 27 | 28 | .animated.flipOutX, 29 | .animated.flipOutY, 30 | .animated.bounceIn, 31 | .animated.bounceOut { 32 | -webkit-animation-duration: .75s; 33 | animation-duration: .75s; 34 | } 35 | 36 | @-webkit-keyframes bounce { 37 | from, 20%, 53%, 80%, to { 38 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 39 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 40 | -webkit-transform: translate3d(0,0,0); 41 | transform: translate3d(0,0,0); 42 | } 43 | 44 | 40%, 43% { 45 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 46 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 47 | -webkit-transform: translate3d(0, -30px, 0); 48 | transform: translate3d(0, -30px, 0); 49 | } 50 | 51 | 70% { 52 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 53 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 54 | -webkit-transform: translate3d(0, -15px, 0); 55 | transform: translate3d(0, -15px, 0); 56 | } 57 | 58 | 90% { 59 | -webkit-transform: translate3d(0,-4px,0); 60 | transform: translate3d(0,-4px,0); 61 | } 62 | } 63 | 64 | @keyframes bounce { 65 | from, 20%, 53%, 80%, to { 66 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 67 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 68 | -webkit-transform: translate3d(0,0,0); 69 | transform: translate3d(0,0,0); 70 | } 71 | 72 | 40%, 43% { 73 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 74 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 75 | -webkit-transform: translate3d(0, -30px, 0); 76 | transform: translate3d(0, -30px, 0); 77 | } 78 | 79 | 70% { 80 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 81 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 82 | -webkit-transform: translate3d(0, -15px, 0); 83 | transform: translate3d(0, -15px, 0); 84 | } 85 | 86 | 90% { 87 | -webkit-transform: translate3d(0,-4px,0); 88 | transform: translate3d(0,-4px,0); 89 | } 90 | } 91 | 92 | .bounce { 93 | -webkit-animation-name: bounce; 94 | animation-name: bounce; 95 | -webkit-transform-origin: center bottom; 96 | transform-origin: center bottom; 97 | } 98 | 99 | @-webkit-keyframes flash { 100 | from, 50%, to { 101 | opacity: 1; 102 | } 103 | 104 | 25%, 75% { 105 | opacity: 0; 106 | } 107 | } 108 | 109 | @keyframes flash { 110 | from, 50%, to { 111 | opacity: 1; 112 | } 113 | 114 | 25%, 75% { 115 | opacity: 0; 116 | } 117 | } 118 | 119 | .flash { 120 | -webkit-animation-name: flash; 121 | animation-name: flash; 122 | } 123 | 124 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 125 | 126 | @-webkit-keyframes pulse { 127 | from { 128 | -webkit-transform: scale3d(1, 1, 1); 129 | transform: scale3d(1, 1, 1); 130 | } 131 | 132 | 50% { 133 | -webkit-transform: scale3d(1.05, 1.05, 1.05); 134 | transform: scale3d(1.05, 1.05, 1.05); 135 | } 136 | 137 | to { 138 | -webkit-transform: scale3d(1, 1, 1); 139 | transform: scale3d(1, 1, 1); 140 | } 141 | } 142 | 143 | @keyframes pulse { 144 | from { 145 | -webkit-transform: scale3d(1, 1, 1); 146 | transform: scale3d(1, 1, 1); 147 | } 148 | 149 | 50% { 150 | -webkit-transform: scale3d(1.05, 1.05, 1.05); 151 | transform: scale3d(1.05, 1.05, 1.05); 152 | } 153 | 154 | to { 155 | -webkit-transform: scale3d(1, 1, 1); 156 | transform: scale3d(1, 1, 1); 157 | } 158 | } 159 | 160 | .pulse { 161 | -webkit-animation-name: pulse; 162 | animation-name: pulse; 163 | } 164 | 165 | @-webkit-keyframes rubberBand { 166 | from { 167 | -webkit-transform: scale3d(1, 1, 1); 168 | transform: scale3d(1, 1, 1); 169 | } 170 | 171 | 30% { 172 | -webkit-transform: scale3d(1.25, 0.75, 1); 173 | transform: scale3d(1.25, 0.75, 1); 174 | } 175 | 176 | 40% { 177 | -webkit-transform: scale3d(0.75, 1.25, 1); 178 | transform: scale3d(0.75, 1.25, 1); 179 | } 180 | 181 | 50% { 182 | -webkit-transform: scale3d(1.15, 0.85, 1); 183 | transform: scale3d(1.15, 0.85, 1); 184 | } 185 | 186 | 65% { 187 | -webkit-transform: scale3d(.95, 1.05, 1); 188 | transform: scale3d(.95, 1.05, 1); 189 | } 190 | 191 | 75% { 192 | -webkit-transform: scale3d(1.05, .95, 1); 193 | transform: scale3d(1.05, .95, 1); 194 | } 195 | 196 | to { 197 | -webkit-transform: scale3d(1, 1, 1); 198 | transform: scale3d(1, 1, 1); 199 | } 200 | } 201 | 202 | @keyframes rubberBand { 203 | from { 204 | -webkit-transform: scale3d(1, 1, 1); 205 | transform: scale3d(1, 1, 1); 206 | } 207 | 208 | 30% { 209 | -webkit-transform: scale3d(1.25, 0.75, 1); 210 | transform: scale3d(1.25, 0.75, 1); 211 | } 212 | 213 | 40% { 214 | -webkit-transform: scale3d(0.75, 1.25, 1); 215 | transform: scale3d(0.75, 1.25, 1); 216 | } 217 | 218 | 50% { 219 | -webkit-transform: scale3d(1.15, 0.85, 1); 220 | transform: scale3d(1.15, 0.85, 1); 221 | } 222 | 223 | 65% { 224 | -webkit-transform: scale3d(.95, 1.05, 1); 225 | transform: scale3d(.95, 1.05, 1); 226 | } 227 | 228 | 75% { 229 | -webkit-transform: scale3d(1.05, .95, 1); 230 | transform: scale3d(1.05, .95, 1); 231 | } 232 | 233 | to { 234 | -webkit-transform: scale3d(1, 1, 1); 235 | transform: scale3d(1, 1, 1); 236 | } 237 | } 238 | 239 | .rubberBand { 240 | -webkit-animation-name: rubberBand; 241 | animation-name: rubberBand; 242 | } 243 | 244 | @-webkit-keyframes shake { 245 | from, to { 246 | -webkit-transform: translate3d(0, 0, 0); 247 | transform: translate3d(0, 0, 0); 248 | } 249 | 250 | 10%, 30%, 50%, 70%, 90% { 251 | -webkit-transform: translate3d(-10px, 0, 0); 252 | transform: translate3d(-10px, 0, 0); 253 | } 254 | 255 | 20%, 40%, 60%, 80% { 256 | -webkit-transform: translate3d(10px, 0, 0); 257 | transform: translate3d(10px, 0, 0); 258 | } 259 | } 260 | 261 | @keyframes shake { 262 | from, to { 263 | -webkit-transform: translate3d(0, 0, 0); 264 | transform: translate3d(0, 0, 0); 265 | } 266 | 267 | 10%, 30%, 50%, 70%, 90% { 268 | -webkit-transform: translate3d(-10px, 0, 0); 269 | transform: translate3d(-10px, 0, 0); 270 | } 271 | 272 | 20%, 40%, 60%, 80% { 273 | -webkit-transform: translate3d(10px, 0, 0); 274 | transform: translate3d(10px, 0, 0); 275 | } 276 | } 277 | 278 | .shake { 279 | -webkit-animation-name: shake; 280 | animation-name: shake; 281 | } 282 | 283 | @-webkit-keyframes headShake { 284 | 0% { 285 | -webkit-transform: translateX(0); 286 | transform: translateX(0); 287 | } 288 | 289 | 6.5% { 290 | -webkit-transform: translateX(-6px) rotateY(-9deg); 291 | transform: translateX(-6px) rotateY(-9deg); 292 | } 293 | 294 | 18.5% { 295 | -webkit-transform: translateX(5px) rotateY(7deg); 296 | transform: translateX(5px) rotateY(7deg); 297 | } 298 | 299 | 31.5% { 300 | -webkit-transform: translateX(-3px) rotateY(-5deg); 301 | transform: translateX(-3px) rotateY(-5deg); 302 | } 303 | 304 | 43.5% { 305 | -webkit-transform: translateX(2px) rotateY(3deg); 306 | transform: translateX(2px) rotateY(3deg); 307 | } 308 | 309 | 50% { 310 | -webkit-transform: translateX(0); 311 | transform: translateX(0); 312 | } 313 | } 314 | 315 | @keyframes headShake { 316 | 0% { 317 | -webkit-transform: translateX(0); 318 | transform: translateX(0); 319 | } 320 | 321 | 6.5% { 322 | -webkit-transform: translateX(-6px) rotateY(-9deg); 323 | transform: translateX(-6px) rotateY(-9deg); 324 | } 325 | 326 | 18.5% { 327 | -webkit-transform: translateX(5px) rotateY(7deg); 328 | transform: translateX(5px) rotateY(7deg); 329 | } 330 | 331 | 31.5% { 332 | -webkit-transform: translateX(-3px) rotateY(-5deg); 333 | transform: translateX(-3px) rotateY(-5deg); 334 | } 335 | 336 | 43.5% { 337 | -webkit-transform: translateX(2px) rotateY(3deg); 338 | transform: translateX(2px) rotateY(3deg); 339 | } 340 | 341 | 50% { 342 | -webkit-transform: translateX(0); 343 | transform: translateX(0); 344 | } 345 | } 346 | 347 | .headShake { 348 | -webkit-animation-timing-function: ease-in-out; 349 | animation-timing-function: ease-in-out; 350 | -webkit-animation-name: headShake; 351 | animation-name: headShake; 352 | } 353 | 354 | @-webkit-keyframes swing { 355 | 20% { 356 | -webkit-transform: rotate3d(0, 0, 1, 15deg); 357 | transform: rotate3d(0, 0, 1, 15deg); 358 | } 359 | 360 | 40% { 361 | -webkit-transform: rotate3d(0, 0, 1, -10deg); 362 | transform: rotate3d(0, 0, 1, -10deg); 363 | } 364 | 365 | 60% { 366 | -webkit-transform: rotate3d(0, 0, 1, 5deg); 367 | transform: rotate3d(0, 0, 1, 5deg); 368 | } 369 | 370 | 80% { 371 | -webkit-transform: rotate3d(0, 0, 1, -5deg); 372 | transform: rotate3d(0, 0, 1, -5deg); 373 | } 374 | 375 | to { 376 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 377 | transform: rotate3d(0, 0, 1, 0deg); 378 | } 379 | } 380 | 381 | @keyframes swing { 382 | 20% { 383 | -webkit-transform: rotate3d(0, 0, 1, 15deg); 384 | transform: rotate3d(0, 0, 1, 15deg); 385 | } 386 | 387 | 40% { 388 | -webkit-transform: rotate3d(0, 0, 1, -10deg); 389 | transform: rotate3d(0, 0, 1, -10deg); 390 | } 391 | 392 | 60% { 393 | -webkit-transform: rotate3d(0, 0, 1, 5deg); 394 | transform: rotate3d(0, 0, 1, 5deg); 395 | } 396 | 397 | 80% { 398 | -webkit-transform: rotate3d(0, 0, 1, -5deg); 399 | transform: rotate3d(0, 0, 1, -5deg); 400 | } 401 | 402 | to { 403 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 404 | transform: rotate3d(0, 0, 1, 0deg); 405 | } 406 | } 407 | 408 | .swing { 409 | -webkit-transform-origin: top center; 410 | transform-origin: top center; 411 | -webkit-animation-name: swing; 412 | animation-name: swing; 413 | } 414 | 415 | @-webkit-keyframes tada { 416 | from { 417 | -webkit-transform: scale3d(1, 1, 1); 418 | transform: scale3d(1, 1, 1); 419 | } 420 | 421 | 10%, 20% { 422 | -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 423 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 424 | } 425 | 426 | 30%, 50%, 70%, 90% { 427 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 428 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 429 | } 430 | 431 | 40%, 60%, 80% { 432 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 433 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 434 | } 435 | 436 | to { 437 | -webkit-transform: scale3d(1, 1, 1); 438 | transform: scale3d(1, 1, 1); 439 | } 440 | } 441 | 442 | @keyframes tada { 443 | from { 444 | -webkit-transform: scale3d(1, 1, 1); 445 | transform: scale3d(1, 1, 1); 446 | } 447 | 448 | 10%, 20% { 449 | -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 450 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 451 | } 452 | 453 | 30%, 50%, 70%, 90% { 454 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 455 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 456 | } 457 | 458 | 40%, 60%, 80% { 459 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 460 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 461 | } 462 | 463 | to { 464 | -webkit-transform: scale3d(1, 1, 1); 465 | transform: scale3d(1, 1, 1); 466 | } 467 | } 468 | 469 | .tada { 470 | -webkit-animation-name: tada; 471 | animation-name: tada; 472 | } 473 | 474 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 475 | 476 | @-webkit-keyframes wobble { 477 | from { 478 | -webkit-transform: none; 479 | transform: none; 480 | } 481 | 482 | 15% { 483 | -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 484 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 485 | } 486 | 487 | 30% { 488 | -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 489 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 490 | } 491 | 492 | 45% { 493 | -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 494 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 495 | } 496 | 497 | 60% { 498 | -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 499 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 500 | } 501 | 502 | 75% { 503 | -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 504 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 505 | } 506 | 507 | to { 508 | -webkit-transform: none; 509 | transform: none; 510 | } 511 | } 512 | 513 | @keyframes wobble { 514 | from { 515 | -webkit-transform: none; 516 | transform: none; 517 | } 518 | 519 | 15% { 520 | -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 521 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 522 | } 523 | 524 | 30% { 525 | -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 526 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 527 | } 528 | 529 | 45% { 530 | -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 531 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 532 | } 533 | 534 | 60% { 535 | -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 536 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 537 | } 538 | 539 | 75% { 540 | -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 541 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 542 | } 543 | 544 | to { 545 | -webkit-transform: none; 546 | transform: none; 547 | } 548 | } 549 | 550 | .wobble { 551 | -webkit-animation-name: wobble; 552 | animation-name: wobble; 553 | } 554 | 555 | @-webkit-keyframes jello { 556 | from, 11.1%, to { 557 | -webkit-transform: none; 558 | transform: none; 559 | } 560 | 561 | 22.2% { 562 | -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); 563 | transform: skewX(-12.5deg) skewY(-12.5deg); 564 | } 565 | 566 | 33.3% { 567 | -webkit-transform: skewX(6.25deg) skewY(6.25deg); 568 | transform: skewX(6.25deg) skewY(6.25deg); 569 | } 570 | 571 | 44.4% { 572 | -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); 573 | transform: skewX(-3.125deg) skewY(-3.125deg); 574 | } 575 | 576 | 55.5% { 577 | -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); 578 | transform: skewX(1.5625deg) skewY(1.5625deg); 579 | } 580 | 581 | 66.6% { 582 | -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); 583 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 584 | } 585 | 586 | 77.7% { 587 | -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); 588 | transform: skewX(0.390625deg) skewY(0.390625deg); 589 | } 590 | 591 | 88.8% { 592 | -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 593 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 594 | } 595 | } 596 | 597 | @keyframes jello { 598 | from, 11.1%, to { 599 | -webkit-transform: none; 600 | transform: none; 601 | } 602 | 603 | 22.2% { 604 | -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); 605 | transform: skewX(-12.5deg) skewY(-12.5deg); 606 | } 607 | 608 | 33.3% { 609 | -webkit-transform: skewX(6.25deg) skewY(6.25deg); 610 | transform: skewX(6.25deg) skewY(6.25deg); 611 | } 612 | 613 | 44.4% { 614 | -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); 615 | transform: skewX(-3.125deg) skewY(-3.125deg); 616 | } 617 | 618 | 55.5% { 619 | -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); 620 | transform: skewX(1.5625deg) skewY(1.5625deg); 621 | } 622 | 623 | 66.6% { 624 | -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); 625 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 626 | } 627 | 628 | 77.7% { 629 | -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); 630 | transform: skewX(0.390625deg) skewY(0.390625deg); 631 | } 632 | 633 | 88.8% { 634 | -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 635 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 636 | } 637 | } 638 | 639 | .jello { 640 | -webkit-animation-name: jello; 641 | animation-name: jello; 642 | -webkit-transform-origin: center; 643 | transform-origin: center; 644 | } 645 | 646 | @-webkit-keyframes bounceIn { 647 | from, 20%, 40%, 60%, 80%, to { 648 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 649 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 650 | } 651 | 652 | 0% { 653 | opacity: 0; 654 | -webkit-transform: scale3d(.3, .3, .3); 655 | transform: scale3d(.3, .3, .3); 656 | } 657 | 658 | 20% { 659 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 660 | transform: scale3d(1.1, 1.1, 1.1); 661 | } 662 | 663 | 40% { 664 | -webkit-transform: scale3d(.9, .9, .9); 665 | transform: scale3d(.9, .9, .9); 666 | } 667 | 668 | 60% { 669 | opacity: 1; 670 | -webkit-transform: scale3d(1.03, 1.03, 1.03); 671 | transform: scale3d(1.03, 1.03, 1.03); 672 | } 673 | 674 | 80% { 675 | -webkit-transform: scale3d(.97, .97, .97); 676 | transform: scale3d(.97, .97, .97); 677 | } 678 | 679 | to { 680 | opacity: 1; 681 | -webkit-transform: scale3d(1, 1, 1); 682 | transform: scale3d(1, 1, 1); 683 | } 684 | } 685 | 686 | @keyframes bounceIn { 687 | from, 20%, 40%, 60%, 80%, to { 688 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 689 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 690 | } 691 | 692 | 0% { 693 | opacity: 0; 694 | -webkit-transform: scale3d(.3, .3, .3); 695 | transform: scale3d(.3, .3, .3); 696 | } 697 | 698 | 20% { 699 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 700 | transform: scale3d(1.1, 1.1, 1.1); 701 | } 702 | 703 | 40% { 704 | -webkit-transform: scale3d(.9, .9, .9); 705 | transform: scale3d(.9, .9, .9); 706 | } 707 | 708 | 60% { 709 | opacity: 1; 710 | -webkit-transform: scale3d(1.03, 1.03, 1.03); 711 | transform: scale3d(1.03, 1.03, 1.03); 712 | } 713 | 714 | 80% { 715 | -webkit-transform: scale3d(.97, .97, .97); 716 | transform: scale3d(.97, .97, .97); 717 | } 718 | 719 | to { 720 | opacity: 1; 721 | -webkit-transform: scale3d(1, 1, 1); 722 | transform: scale3d(1, 1, 1); 723 | } 724 | } 725 | 726 | .bounceIn { 727 | -webkit-animation-name: bounceIn; 728 | animation-name: bounceIn; 729 | } 730 | 731 | @-webkit-keyframes bounceInDown { 732 | from, 60%, 75%, 90%, to { 733 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 734 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 735 | } 736 | 737 | 0% { 738 | opacity: 0; 739 | -webkit-transform: translate3d(0, -3000px, 0); 740 | transform: translate3d(0, -3000px, 0); 741 | } 742 | 743 | 60% { 744 | opacity: 1; 745 | -webkit-transform: translate3d(0, 25px, 0); 746 | transform: translate3d(0, 25px, 0); 747 | } 748 | 749 | 75% { 750 | -webkit-transform: translate3d(0, -10px, 0); 751 | transform: translate3d(0, -10px, 0); 752 | } 753 | 754 | 90% { 755 | -webkit-transform: translate3d(0, 5px, 0); 756 | transform: translate3d(0, 5px, 0); 757 | } 758 | 759 | to { 760 | -webkit-transform: none; 761 | transform: none; 762 | } 763 | } 764 | 765 | @keyframes bounceInDown { 766 | from, 60%, 75%, 90%, to { 767 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 768 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 769 | } 770 | 771 | 0% { 772 | opacity: 0; 773 | -webkit-transform: translate3d(0, -3000px, 0); 774 | transform: translate3d(0, -3000px, 0); 775 | } 776 | 777 | 60% { 778 | opacity: 1; 779 | -webkit-transform: translate3d(0, 25px, 0); 780 | transform: translate3d(0, 25px, 0); 781 | } 782 | 783 | 75% { 784 | -webkit-transform: translate3d(0, -10px, 0); 785 | transform: translate3d(0, -10px, 0); 786 | } 787 | 788 | 90% { 789 | -webkit-transform: translate3d(0, 5px, 0); 790 | transform: translate3d(0, 5px, 0); 791 | } 792 | 793 | to { 794 | -webkit-transform: none; 795 | transform: none; 796 | } 797 | } 798 | 799 | .bounceInDown { 800 | -webkit-animation-name: bounceInDown; 801 | animation-name: bounceInDown; 802 | } 803 | 804 | @-webkit-keyframes bounceInLeft { 805 | from, 60%, 75%, 90%, to { 806 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 807 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 808 | } 809 | 810 | 0% { 811 | opacity: 0; 812 | -webkit-transform: translate3d(-3000px, 0, 0); 813 | transform: translate3d(-3000px, 0, 0); 814 | } 815 | 816 | 60% { 817 | opacity: 1; 818 | -webkit-transform: translate3d(25px, 0, 0); 819 | transform: translate3d(25px, 0, 0); 820 | } 821 | 822 | 75% { 823 | -webkit-transform: translate3d(-10px, 0, 0); 824 | transform: translate3d(-10px, 0, 0); 825 | } 826 | 827 | 90% { 828 | -webkit-transform: translate3d(5px, 0, 0); 829 | transform: translate3d(5px, 0, 0); 830 | } 831 | 832 | to { 833 | -webkit-transform: none; 834 | transform: none; 835 | } 836 | } 837 | 838 | @keyframes bounceInLeft { 839 | from, 60%, 75%, 90%, to { 840 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 841 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 842 | } 843 | 844 | 0% { 845 | opacity: 0; 846 | -webkit-transform: translate3d(-3000px, 0, 0); 847 | transform: translate3d(-3000px, 0, 0); 848 | } 849 | 850 | 60% { 851 | opacity: 1; 852 | -webkit-transform: translate3d(25px, 0, 0); 853 | transform: translate3d(25px, 0, 0); 854 | } 855 | 856 | 75% { 857 | -webkit-transform: translate3d(-10px, 0, 0); 858 | transform: translate3d(-10px, 0, 0); 859 | } 860 | 861 | 90% { 862 | -webkit-transform: translate3d(5px, 0, 0); 863 | transform: translate3d(5px, 0, 0); 864 | } 865 | 866 | to { 867 | -webkit-transform: none; 868 | transform: none; 869 | } 870 | } 871 | 872 | .bounceInLeft { 873 | -webkit-animation-name: bounceInLeft; 874 | animation-name: bounceInLeft; 875 | } 876 | 877 | @-webkit-keyframes bounceInRight { 878 | from, 60%, 75%, 90%, to { 879 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 880 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 881 | } 882 | 883 | from { 884 | opacity: 0; 885 | -webkit-transform: translate3d(3000px, 0, 0); 886 | transform: translate3d(3000px, 0, 0); 887 | } 888 | 889 | 60% { 890 | opacity: 1; 891 | -webkit-transform: translate3d(-25px, 0, 0); 892 | transform: translate3d(-25px, 0, 0); 893 | } 894 | 895 | 75% { 896 | -webkit-transform: translate3d(10px, 0, 0); 897 | transform: translate3d(10px, 0, 0); 898 | } 899 | 900 | 90% { 901 | -webkit-transform: translate3d(-5px, 0, 0); 902 | transform: translate3d(-5px, 0, 0); 903 | } 904 | 905 | to { 906 | -webkit-transform: none; 907 | transform: none; 908 | } 909 | } 910 | 911 | @keyframes bounceInRight { 912 | from, 60%, 75%, 90%, to { 913 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 914 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 915 | } 916 | 917 | from { 918 | opacity: 0; 919 | -webkit-transform: translate3d(3000px, 0, 0); 920 | transform: translate3d(3000px, 0, 0); 921 | } 922 | 923 | 60% { 924 | opacity: 1; 925 | -webkit-transform: translate3d(-25px, 0, 0); 926 | transform: translate3d(-25px, 0, 0); 927 | } 928 | 929 | 75% { 930 | -webkit-transform: translate3d(10px, 0, 0); 931 | transform: translate3d(10px, 0, 0); 932 | } 933 | 934 | 90% { 935 | -webkit-transform: translate3d(-5px, 0, 0); 936 | transform: translate3d(-5px, 0, 0); 937 | } 938 | 939 | to { 940 | -webkit-transform: none; 941 | transform: none; 942 | } 943 | } 944 | 945 | .bounceInRight { 946 | -webkit-animation-name: bounceInRight; 947 | animation-name: bounceInRight; 948 | } 949 | 950 | @-webkit-keyframes bounceInUp { 951 | from, 60%, 75%, 90%, to { 952 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 953 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 954 | } 955 | 956 | from { 957 | opacity: 0; 958 | -webkit-transform: translate3d(0, 3000px, 0); 959 | transform: translate3d(0, 3000px, 0); 960 | } 961 | 962 | 60% { 963 | opacity: 1; 964 | -webkit-transform: translate3d(0, -20px, 0); 965 | transform: translate3d(0, -20px, 0); 966 | } 967 | 968 | 75% { 969 | -webkit-transform: translate3d(0, 10px, 0); 970 | transform: translate3d(0, 10px, 0); 971 | } 972 | 973 | 90% { 974 | -webkit-transform: translate3d(0, -5px, 0); 975 | transform: translate3d(0, -5px, 0); 976 | } 977 | 978 | to { 979 | -webkit-transform: translate3d(0, 0, 0); 980 | transform: translate3d(0, 0, 0); 981 | } 982 | } 983 | 984 | @keyframes bounceInUp { 985 | from, 60%, 75%, 90%, to { 986 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 987 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 988 | } 989 | 990 | from { 991 | opacity: 0; 992 | -webkit-transform: translate3d(0, 3000px, 0); 993 | transform: translate3d(0, 3000px, 0); 994 | } 995 | 996 | 60% { 997 | opacity: 1; 998 | -webkit-transform: translate3d(0, -20px, 0); 999 | transform: translate3d(0, -20px, 0); 1000 | } 1001 | 1002 | 75% { 1003 | -webkit-transform: translate3d(0, 10px, 0); 1004 | transform: translate3d(0, 10px, 0); 1005 | } 1006 | 1007 | 90% { 1008 | -webkit-transform: translate3d(0, -5px, 0); 1009 | transform: translate3d(0, -5px, 0); 1010 | } 1011 | 1012 | to { 1013 | -webkit-transform: translate3d(0, 0, 0); 1014 | transform: translate3d(0, 0, 0); 1015 | } 1016 | } 1017 | 1018 | .bounceInUp { 1019 | -webkit-animation-name: bounceInUp; 1020 | animation-name: bounceInUp; 1021 | } 1022 | 1023 | @-webkit-keyframes bounceOut { 1024 | 20% { 1025 | -webkit-transform: scale3d(.9, .9, .9); 1026 | transform: scale3d(.9, .9, .9); 1027 | } 1028 | 1029 | 50%, 55% { 1030 | opacity: 1; 1031 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 1032 | transform: scale3d(1.1, 1.1, 1.1); 1033 | } 1034 | 1035 | to { 1036 | opacity: 0; 1037 | -webkit-transform: scale3d(.3, .3, .3); 1038 | transform: scale3d(.3, .3, .3); 1039 | } 1040 | } 1041 | 1042 | @keyframes bounceOut { 1043 | 20% { 1044 | -webkit-transform: scale3d(.9, .9, .9); 1045 | transform: scale3d(.9, .9, .9); 1046 | } 1047 | 1048 | 50%, 55% { 1049 | opacity: 1; 1050 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 1051 | transform: scale3d(1.1, 1.1, 1.1); 1052 | } 1053 | 1054 | to { 1055 | opacity: 0; 1056 | -webkit-transform: scale3d(.3, .3, .3); 1057 | transform: scale3d(.3, .3, .3); 1058 | } 1059 | } 1060 | 1061 | .bounceOut { 1062 | -webkit-animation-name: bounceOut; 1063 | animation-name: bounceOut; 1064 | } 1065 | 1066 | @-webkit-keyframes bounceOutDown { 1067 | 20% { 1068 | -webkit-transform: translate3d(0, 10px, 0); 1069 | transform: translate3d(0, 10px, 0); 1070 | } 1071 | 1072 | 40%, 45% { 1073 | opacity: 1; 1074 | -webkit-transform: translate3d(0, -20px, 0); 1075 | transform: translate3d(0, -20px, 0); 1076 | } 1077 | 1078 | to { 1079 | opacity: 0; 1080 | -webkit-transform: translate3d(0, 2000px, 0); 1081 | transform: translate3d(0, 2000px, 0); 1082 | } 1083 | } 1084 | 1085 | @keyframes bounceOutDown { 1086 | 20% { 1087 | -webkit-transform: translate3d(0, 10px, 0); 1088 | transform: translate3d(0, 10px, 0); 1089 | } 1090 | 1091 | 40%, 45% { 1092 | opacity: 1; 1093 | -webkit-transform: translate3d(0, -20px, 0); 1094 | transform: translate3d(0, -20px, 0); 1095 | } 1096 | 1097 | to { 1098 | opacity: 0; 1099 | -webkit-transform: translate3d(0, 2000px, 0); 1100 | transform: translate3d(0, 2000px, 0); 1101 | } 1102 | } 1103 | 1104 | .bounceOutDown { 1105 | -webkit-animation-name: bounceOutDown; 1106 | animation-name: bounceOutDown; 1107 | } 1108 | 1109 | @-webkit-keyframes bounceOutLeft { 1110 | 20% { 1111 | opacity: 1; 1112 | -webkit-transform: translate3d(20px, 0, 0); 1113 | transform: translate3d(20px, 0, 0); 1114 | } 1115 | 1116 | to { 1117 | opacity: 0; 1118 | -webkit-transform: translate3d(-2000px, 0, 0); 1119 | transform: translate3d(-2000px, 0, 0); 1120 | } 1121 | } 1122 | 1123 | @keyframes bounceOutLeft { 1124 | 20% { 1125 | opacity: 1; 1126 | -webkit-transform: translate3d(20px, 0, 0); 1127 | transform: translate3d(20px, 0, 0); 1128 | } 1129 | 1130 | to { 1131 | opacity: 0; 1132 | -webkit-transform: translate3d(-2000px, 0, 0); 1133 | transform: translate3d(-2000px, 0, 0); 1134 | } 1135 | } 1136 | 1137 | .bounceOutLeft { 1138 | -webkit-animation-name: bounceOutLeft; 1139 | animation-name: bounceOutLeft; 1140 | } 1141 | 1142 | @-webkit-keyframes bounceOutRight { 1143 | 20% { 1144 | opacity: 1; 1145 | -webkit-transform: translate3d(-20px, 0, 0); 1146 | transform: translate3d(-20px, 0, 0); 1147 | } 1148 | 1149 | to { 1150 | opacity: 0; 1151 | -webkit-transform: translate3d(2000px, 0, 0); 1152 | transform: translate3d(2000px, 0, 0); 1153 | } 1154 | } 1155 | 1156 | @keyframes bounceOutRight { 1157 | 20% { 1158 | opacity: 1; 1159 | -webkit-transform: translate3d(-20px, 0, 0); 1160 | transform: translate3d(-20px, 0, 0); 1161 | } 1162 | 1163 | to { 1164 | opacity: 0; 1165 | -webkit-transform: translate3d(2000px, 0, 0); 1166 | transform: translate3d(2000px, 0, 0); 1167 | } 1168 | } 1169 | 1170 | .bounceOutRight { 1171 | -webkit-animation-name: bounceOutRight; 1172 | animation-name: bounceOutRight; 1173 | } 1174 | 1175 | @-webkit-keyframes bounceOutUp { 1176 | 20% { 1177 | -webkit-transform: translate3d(0, -10px, 0); 1178 | transform: translate3d(0, -10px, 0); 1179 | } 1180 | 1181 | 40%, 45% { 1182 | opacity: 1; 1183 | -webkit-transform: translate3d(0, 20px, 0); 1184 | transform: translate3d(0, 20px, 0); 1185 | } 1186 | 1187 | to { 1188 | opacity: 0; 1189 | -webkit-transform: translate3d(0, -2000px, 0); 1190 | transform: translate3d(0, -2000px, 0); 1191 | } 1192 | } 1193 | 1194 | @keyframes bounceOutUp { 1195 | 20% { 1196 | -webkit-transform: translate3d(0, -10px, 0); 1197 | transform: translate3d(0, -10px, 0); 1198 | } 1199 | 1200 | 40%, 45% { 1201 | opacity: 1; 1202 | -webkit-transform: translate3d(0, 20px, 0); 1203 | transform: translate3d(0, 20px, 0); 1204 | } 1205 | 1206 | to { 1207 | opacity: 0; 1208 | -webkit-transform: translate3d(0, -2000px, 0); 1209 | transform: translate3d(0, -2000px, 0); 1210 | } 1211 | } 1212 | 1213 | .bounceOutUp { 1214 | -webkit-animation-name: bounceOutUp; 1215 | animation-name: bounceOutUp; 1216 | } 1217 | 1218 | @-webkit-keyframes fadeIn { 1219 | from { 1220 | opacity: 0; 1221 | } 1222 | 1223 | to { 1224 | opacity: 1; 1225 | } 1226 | } 1227 | 1228 | @keyframes fadeIn { 1229 | from { 1230 | opacity: 0; 1231 | } 1232 | 1233 | to { 1234 | opacity: 1; 1235 | } 1236 | } 1237 | 1238 | .fadeIn { 1239 | -webkit-animation-name: fadeIn; 1240 | animation-name: fadeIn; 1241 | } 1242 | 1243 | @-webkit-keyframes fadeInDown { 1244 | from { 1245 | opacity: 0; 1246 | -webkit-transform: translate3d(0, -100%, 0); 1247 | transform: translate3d(0, -100%, 0); 1248 | } 1249 | 1250 | to { 1251 | opacity: 1; 1252 | -webkit-transform: none; 1253 | transform: none; 1254 | } 1255 | } 1256 | 1257 | @keyframes fadeInDown { 1258 | from { 1259 | opacity: 0; 1260 | -webkit-transform: translate3d(0, -100%, 0); 1261 | transform: translate3d(0, -100%, 0); 1262 | } 1263 | 1264 | to { 1265 | opacity: 1; 1266 | -webkit-transform: none; 1267 | transform: none; 1268 | } 1269 | } 1270 | 1271 | .fadeInDown { 1272 | -webkit-animation-name: fadeInDown; 1273 | animation-name: fadeInDown; 1274 | } 1275 | 1276 | @-webkit-keyframes fadeInDownBig { 1277 | from { 1278 | opacity: 0; 1279 | -webkit-transform: translate3d(0, -2000px, 0); 1280 | transform: translate3d(0, -2000px, 0); 1281 | } 1282 | 1283 | to { 1284 | opacity: 1; 1285 | -webkit-transform: none; 1286 | transform: none; 1287 | } 1288 | } 1289 | 1290 | @keyframes fadeInDownBig { 1291 | from { 1292 | opacity: 0; 1293 | -webkit-transform: translate3d(0, -2000px, 0); 1294 | transform: translate3d(0, -2000px, 0); 1295 | } 1296 | 1297 | to { 1298 | opacity: 1; 1299 | -webkit-transform: none; 1300 | transform: none; 1301 | } 1302 | } 1303 | 1304 | .fadeInDownBig { 1305 | -webkit-animation-name: fadeInDownBig; 1306 | animation-name: fadeInDownBig; 1307 | } 1308 | 1309 | @-webkit-keyframes fadeInLeft { 1310 | from { 1311 | opacity: 0; 1312 | -webkit-transform: translate3d(-100%, 0, 0); 1313 | transform: translate3d(-100%, 0, 0); 1314 | } 1315 | 1316 | to { 1317 | opacity: 1; 1318 | -webkit-transform: none; 1319 | transform: none; 1320 | } 1321 | } 1322 | 1323 | @keyframes fadeInLeft { 1324 | from { 1325 | opacity: 0; 1326 | -webkit-transform: translate3d(-100%, 0, 0); 1327 | transform: translate3d(-100%, 0, 0); 1328 | } 1329 | 1330 | to { 1331 | opacity: 1; 1332 | -webkit-transform: none; 1333 | transform: none; 1334 | } 1335 | } 1336 | 1337 | .fadeInLeft { 1338 | -webkit-animation-name: fadeInLeft; 1339 | animation-name: fadeInLeft; 1340 | } 1341 | 1342 | @-webkit-keyframes fadeInLeftBig { 1343 | from { 1344 | opacity: 0; 1345 | -webkit-transform: translate3d(-2000px, 0, 0); 1346 | transform: translate3d(-2000px, 0, 0); 1347 | } 1348 | 1349 | to { 1350 | opacity: 1; 1351 | -webkit-transform: none; 1352 | transform: none; 1353 | } 1354 | } 1355 | 1356 | @keyframes fadeInLeftBig { 1357 | from { 1358 | opacity: 0; 1359 | -webkit-transform: translate3d(-2000px, 0, 0); 1360 | transform: translate3d(-2000px, 0, 0); 1361 | } 1362 | 1363 | to { 1364 | opacity: 1; 1365 | -webkit-transform: none; 1366 | transform: none; 1367 | } 1368 | } 1369 | 1370 | .fadeInLeftBig { 1371 | -webkit-animation-name: fadeInLeftBig; 1372 | animation-name: fadeInLeftBig; 1373 | } 1374 | 1375 | @-webkit-keyframes fadeInRight { 1376 | from { 1377 | opacity: 0; 1378 | -webkit-transform: translate3d(100%, 0, 0); 1379 | transform: translate3d(100%, 0, 0); 1380 | } 1381 | 1382 | to { 1383 | opacity: 1; 1384 | -webkit-transform: none; 1385 | transform: none; 1386 | } 1387 | } 1388 | 1389 | @keyframes fadeInRight { 1390 | from { 1391 | opacity: 0; 1392 | -webkit-transform: translate3d(100%, 0, 0); 1393 | transform: translate3d(100%, 0, 0); 1394 | } 1395 | 1396 | to { 1397 | opacity: 1; 1398 | -webkit-transform: none; 1399 | transform: none; 1400 | } 1401 | } 1402 | 1403 | .fadeInRight { 1404 | -webkit-animation-name: fadeInRight; 1405 | animation-name: fadeInRight; 1406 | } 1407 | 1408 | @-webkit-keyframes fadeInRightBig { 1409 | from { 1410 | opacity: 0; 1411 | -webkit-transform: translate3d(2000px, 0, 0); 1412 | transform: translate3d(2000px, 0, 0); 1413 | } 1414 | 1415 | to { 1416 | opacity: 1; 1417 | -webkit-transform: none; 1418 | transform: none; 1419 | } 1420 | } 1421 | 1422 | @keyframes fadeInRightBig { 1423 | from { 1424 | opacity: 0; 1425 | -webkit-transform: translate3d(2000px, 0, 0); 1426 | transform: translate3d(2000px, 0, 0); 1427 | } 1428 | 1429 | to { 1430 | opacity: 1; 1431 | -webkit-transform: none; 1432 | transform: none; 1433 | } 1434 | } 1435 | 1436 | .fadeInRightBig { 1437 | -webkit-animation-name: fadeInRightBig; 1438 | animation-name: fadeInRightBig; 1439 | } 1440 | 1441 | @-webkit-keyframes fadeInUp { 1442 | from { 1443 | opacity: 0; 1444 | -webkit-transform: translate3d(0, 100%, 0); 1445 | transform: translate3d(0, 100%, 0); 1446 | } 1447 | 1448 | to { 1449 | opacity: 1; 1450 | -webkit-transform: none; 1451 | transform: none; 1452 | } 1453 | } 1454 | 1455 | @keyframes fadeInUp { 1456 | from { 1457 | opacity: 0; 1458 | -webkit-transform: translate3d(0, 100%, 0); 1459 | transform: translate3d(0, 100%, 0); 1460 | } 1461 | 1462 | to { 1463 | opacity: 1; 1464 | -webkit-transform: none; 1465 | transform: none; 1466 | } 1467 | } 1468 | 1469 | .fadeInUp { 1470 | -webkit-animation-name: fadeInUp; 1471 | animation-name: fadeInUp; 1472 | } 1473 | 1474 | @-webkit-keyframes fadeInUpBig { 1475 | from { 1476 | opacity: 0; 1477 | -webkit-transform: translate3d(0, 2000px, 0); 1478 | transform: translate3d(0, 2000px, 0); 1479 | } 1480 | 1481 | to { 1482 | opacity: 1; 1483 | -webkit-transform: none; 1484 | transform: none; 1485 | } 1486 | } 1487 | 1488 | @keyframes fadeInUpBig { 1489 | from { 1490 | opacity: 0; 1491 | -webkit-transform: translate3d(0, 2000px, 0); 1492 | transform: translate3d(0, 2000px, 0); 1493 | } 1494 | 1495 | to { 1496 | opacity: 1; 1497 | -webkit-transform: none; 1498 | transform: none; 1499 | } 1500 | } 1501 | 1502 | .fadeInUpBig { 1503 | -webkit-animation-name: fadeInUpBig; 1504 | animation-name: fadeInUpBig; 1505 | } 1506 | 1507 | @-webkit-keyframes fadeOut { 1508 | from { 1509 | opacity: 1; 1510 | } 1511 | 1512 | to { 1513 | opacity: 0; 1514 | } 1515 | } 1516 | 1517 | @keyframes fadeOut { 1518 | from { 1519 | opacity: 1; 1520 | } 1521 | 1522 | to { 1523 | opacity: 0; 1524 | } 1525 | } 1526 | 1527 | .fadeOut { 1528 | -webkit-animation-name: fadeOut; 1529 | animation-name: fadeOut; 1530 | } 1531 | 1532 | @-webkit-keyframes fadeOutDown { 1533 | from { 1534 | opacity: 1; 1535 | } 1536 | 1537 | to { 1538 | opacity: 0; 1539 | -webkit-transform: translate3d(0, 100%, 0); 1540 | transform: translate3d(0, 100%, 0); 1541 | } 1542 | } 1543 | 1544 | @keyframes fadeOutDown { 1545 | from { 1546 | opacity: 1; 1547 | } 1548 | 1549 | to { 1550 | opacity: 0; 1551 | -webkit-transform: translate3d(0, 100%, 0); 1552 | transform: translate3d(0, 100%, 0); 1553 | } 1554 | } 1555 | 1556 | .fadeOutDown { 1557 | -webkit-animation-name: fadeOutDown; 1558 | animation-name: fadeOutDown; 1559 | } 1560 | 1561 | @-webkit-keyframes fadeOutDownBig { 1562 | from { 1563 | opacity: 1; 1564 | } 1565 | 1566 | to { 1567 | opacity: 0; 1568 | -webkit-transform: translate3d(0, 2000px, 0); 1569 | transform: translate3d(0, 2000px, 0); 1570 | } 1571 | } 1572 | 1573 | @keyframes fadeOutDownBig { 1574 | from { 1575 | opacity: 1; 1576 | } 1577 | 1578 | to { 1579 | opacity: 0; 1580 | -webkit-transform: translate3d(0, 2000px, 0); 1581 | transform: translate3d(0, 2000px, 0); 1582 | } 1583 | } 1584 | 1585 | .fadeOutDownBig { 1586 | -webkit-animation-name: fadeOutDownBig; 1587 | animation-name: fadeOutDownBig; 1588 | } 1589 | 1590 | @-webkit-keyframes fadeOutLeft { 1591 | from { 1592 | opacity: 1; 1593 | } 1594 | 1595 | to { 1596 | opacity: 0; 1597 | -webkit-transform: translate3d(-100%, 0, 0); 1598 | transform: translate3d(-100%, 0, 0); 1599 | } 1600 | } 1601 | 1602 | @keyframes fadeOutLeft { 1603 | from { 1604 | opacity: 1; 1605 | } 1606 | 1607 | to { 1608 | opacity: 0; 1609 | -webkit-transform: translate3d(-100%, 0, 0); 1610 | transform: translate3d(-100%, 0, 0); 1611 | } 1612 | } 1613 | 1614 | .fadeOutLeft { 1615 | -webkit-animation-name: fadeOutLeft; 1616 | animation-name: fadeOutLeft; 1617 | } 1618 | 1619 | @-webkit-keyframes fadeOutLeftBig { 1620 | from { 1621 | opacity: 1; 1622 | } 1623 | 1624 | to { 1625 | opacity: 0; 1626 | -webkit-transform: translate3d(-2000px, 0, 0); 1627 | transform: translate3d(-2000px, 0, 0); 1628 | } 1629 | } 1630 | 1631 | @keyframes fadeOutLeftBig { 1632 | from { 1633 | opacity: 1; 1634 | } 1635 | 1636 | to { 1637 | opacity: 0; 1638 | -webkit-transform: translate3d(-2000px, 0, 0); 1639 | transform: translate3d(-2000px, 0, 0); 1640 | } 1641 | } 1642 | 1643 | .fadeOutLeftBig { 1644 | -webkit-animation-name: fadeOutLeftBig; 1645 | animation-name: fadeOutLeftBig; 1646 | } 1647 | 1648 | @-webkit-keyframes fadeOutRight { 1649 | from { 1650 | opacity: 1; 1651 | } 1652 | 1653 | to { 1654 | opacity: 0; 1655 | -webkit-transform: translate3d(100%, 0, 0); 1656 | transform: translate3d(100%, 0, 0); 1657 | } 1658 | } 1659 | 1660 | @keyframes fadeOutRight { 1661 | from { 1662 | opacity: 1; 1663 | } 1664 | 1665 | to { 1666 | opacity: 0; 1667 | -webkit-transform: translate3d(100%, 0, 0); 1668 | transform: translate3d(100%, 0, 0); 1669 | } 1670 | } 1671 | 1672 | .fadeOutRight { 1673 | -webkit-animation-name: fadeOutRight; 1674 | animation-name: fadeOutRight; 1675 | } 1676 | 1677 | @-webkit-keyframes fadeOutRightBig { 1678 | from { 1679 | opacity: 1; 1680 | } 1681 | 1682 | to { 1683 | opacity: 0; 1684 | -webkit-transform: translate3d(2000px, 0, 0); 1685 | transform: translate3d(2000px, 0, 0); 1686 | } 1687 | } 1688 | 1689 | @keyframes fadeOutRightBig { 1690 | from { 1691 | opacity: 1; 1692 | } 1693 | 1694 | to { 1695 | opacity: 0; 1696 | -webkit-transform: translate3d(2000px, 0, 0); 1697 | transform: translate3d(2000px, 0, 0); 1698 | } 1699 | } 1700 | 1701 | .fadeOutRightBig { 1702 | -webkit-animation-name: fadeOutRightBig; 1703 | animation-name: fadeOutRightBig; 1704 | } 1705 | 1706 | @-webkit-keyframes fadeOutUp { 1707 | from { 1708 | opacity: 1; 1709 | } 1710 | 1711 | to { 1712 | opacity: 0; 1713 | -webkit-transform: translate3d(0, -100%, 0); 1714 | transform: translate3d(0, -100%, 0); 1715 | } 1716 | } 1717 | 1718 | @keyframes fadeOutUp { 1719 | from { 1720 | opacity: 1; 1721 | } 1722 | 1723 | to { 1724 | opacity: 0; 1725 | -webkit-transform: translate3d(0, -100%, 0); 1726 | transform: translate3d(0, -100%, 0); 1727 | } 1728 | } 1729 | 1730 | .fadeOutUp { 1731 | -webkit-animation-name: fadeOutUp; 1732 | animation-name: fadeOutUp; 1733 | } 1734 | 1735 | @-webkit-keyframes fadeOutUpBig { 1736 | from { 1737 | opacity: 1; 1738 | } 1739 | 1740 | to { 1741 | opacity: 0; 1742 | -webkit-transform: translate3d(0, -2000px, 0); 1743 | transform: translate3d(0, -2000px, 0); 1744 | } 1745 | } 1746 | 1747 | @keyframes fadeOutUpBig { 1748 | from { 1749 | opacity: 1; 1750 | } 1751 | 1752 | to { 1753 | opacity: 0; 1754 | -webkit-transform: translate3d(0, -2000px, 0); 1755 | transform: translate3d(0, -2000px, 0); 1756 | } 1757 | } 1758 | 1759 | .fadeOutUpBig { 1760 | -webkit-animation-name: fadeOutUpBig; 1761 | animation-name: fadeOutUpBig; 1762 | } 1763 | 1764 | @-webkit-keyframes flip { 1765 | from { 1766 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1767 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1768 | -webkit-animation-timing-function: ease-out; 1769 | animation-timing-function: ease-out; 1770 | } 1771 | 1772 | 40% { 1773 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1774 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1775 | -webkit-animation-timing-function: ease-out; 1776 | animation-timing-function: ease-out; 1777 | } 1778 | 1779 | 50% { 1780 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1781 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1782 | -webkit-animation-timing-function: ease-in; 1783 | animation-timing-function: ease-in; 1784 | } 1785 | 1786 | 80% { 1787 | -webkit-transform: perspective(400px) scale3d(.95, .95, .95); 1788 | transform: perspective(400px) scale3d(.95, .95, .95); 1789 | -webkit-animation-timing-function: ease-in; 1790 | animation-timing-function: ease-in; 1791 | } 1792 | 1793 | to { 1794 | -webkit-transform: perspective(400px); 1795 | transform: perspective(400px); 1796 | -webkit-animation-timing-function: ease-in; 1797 | animation-timing-function: ease-in; 1798 | } 1799 | } 1800 | 1801 | @keyframes flip { 1802 | from { 1803 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1804 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1805 | -webkit-animation-timing-function: ease-out; 1806 | animation-timing-function: ease-out; 1807 | } 1808 | 1809 | 40% { 1810 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1811 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1812 | -webkit-animation-timing-function: ease-out; 1813 | animation-timing-function: ease-out; 1814 | } 1815 | 1816 | 50% { 1817 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1818 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1819 | -webkit-animation-timing-function: ease-in; 1820 | animation-timing-function: ease-in; 1821 | } 1822 | 1823 | 80% { 1824 | -webkit-transform: perspective(400px) scale3d(.95, .95, .95); 1825 | transform: perspective(400px) scale3d(.95, .95, .95); 1826 | -webkit-animation-timing-function: ease-in; 1827 | animation-timing-function: ease-in; 1828 | } 1829 | 1830 | to { 1831 | -webkit-transform: perspective(400px); 1832 | transform: perspective(400px); 1833 | -webkit-animation-timing-function: ease-in; 1834 | animation-timing-function: ease-in; 1835 | } 1836 | } 1837 | 1838 | .animated.flip { 1839 | -webkit-backface-visibility: visible; 1840 | backface-visibility: visible; 1841 | -webkit-animation-name: flip; 1842 | animation-name: flip; 1843 | } 1844 | 1845 | @-webkit-keyframes flipInX { 1846 | from { 1847 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1848 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1849 | -webkit-animation-timing-function: ease-in; 1850 | animation-timing-function: ease-in; 1851 | opacity: 0; 1852 | } 1853 | 1854 | 40% { 1855 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1856 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1857 | -webkit-animation-timing-function: ease-in; 1858 | animation-timing-function: ease-in; 1859 | } 1860 | 1861 | 60% { 1862 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1863 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1864 | opacity: 1; 1865 | } 1866 | 1867 | 80% { 1868 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1869 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1870 | } 1871 | 1872 | to { 1873 | -webkit-transform: perspective(400px); 1874 | transform: perspective(400px); 1875 | } 1876 | } 1877 | 1878 | @keyframes flipInX { 1879 | from { 1880 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1881 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1882 | -webkit-animation-timing-function: ease-in; 1883 | animation-timing-function: ease-in; 1884 | opacity: 0; 1885 | } 1886 | 1887 | 40% { 1888 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1889 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1890 | -webkit-animation-timing-function: ease-in; 1891 | animation-timing-function: ease-in; 1892 | } 1893 | 1894 | 60% { 1895 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1896 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1897 | opacity: 1; 1898 | } 1899 | 1900 | 80% { 1901 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1902 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1903 | } 1904 | 1905 | to { 1906 | -webkit-transform: perspective(400px); 1907 | transform: perspective(400px); 1908 | } 1909 | } 1910 | 1911 | .flipInX { 1912 | -webkit-backface-visibility: visible !important; 1913 | backface-visibility: visible !important; 1914 | -webkit-animation-name: flipInX; 1915 | animation-name: flipInX; 1916 | } 1917 | 1918 | @-webkit-keyframes flipInY { 1919 | from { 1920 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1921 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1922 | -webkit-animation-timing-function: ease-in; 1923 | animation-timing-function: ease-in; 1924 | opacity: 0; 1925 | } 1926 | 1927 | 40% { 1928 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1929 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1930 | -webkit-animation-timing-function: ease-in; 1931 | animation-timing-function: ease-in; 1932 | } 1933 | 1934 | 60% { 1935 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1936 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1937 | opacity: 1; 1938 | } 1939 | 1940 | 80% { 1941 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1942 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1943 | } 1944 | 1945 | to { 1946 | -webkit-transform: perspective(400px); 1947 | transform: perspective(400px); 1948 | } 1949 | } 1950 | 1951 | @keyframes flipInY { 1952 | from { 1953 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1954 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1955 | -webkit-animation-timing-function: ease-in; 1956 | animation-timing-function: ease-in; 1957 | opacity: 0; 1958 | } 1959 | 1960 | 40% { 1961 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1962 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1963 | -webkit-animation-timing-function: ease-in; 1964 | animation-timing-function: ease-in; 1965 | } 1966 | 1967 | 60% { 1968 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1969 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1970 | opacity: 1; 1971 | } 1972 | 1973 | 80% { 1974 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1975 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1976 | } 1977 | 1978 | to { 1979 | -webkit-transform: perspective(400px); 1980 | transform: perspective(400px); 1981 | } 1982 | } 1983 | 1984 | .flipInY { 1985 | -webkit-backface-visibility: visible !important; 1986 | backface-visibility: visible !important; 1987 | -webkit-animation-name: flipInY; 1988 | animation-name: flipInY; 1989 | } 1990 | 1991 | @-webkit-keyframes flipOutX { 1992 | from { 1993 | -webkit-transform: perspective(400px); 1994 | transform: perspective(400px); 1995 | } 1996 | 1997 | 30% { 1998 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1999 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 2000 | opacity: 1; 2001 | } 2002 | 2003 | to { 2004 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 2005 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 2006 | opacity: 0; 2007 | } 2008 | } 2009 | 2010 | @keyframes flipOutX { 2011 | from { 2012 | -webkit-transform: perspective(400px); 2013 | transform: perspective(400px); 2014 | } 2015 | 2016 | 30% { 2017 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 2018 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 2019 | opacity: 1; 2020 | } 2021 | 2022 | to { 2023 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 2024 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 2025 | opacity: 0; 2026 | } 2027 | } 2028 | 2029 | .flipOutX { 2030 | -webkit-animation-name: flipOutX; 2031 | animation-name: flipOutX; 2032 | -webkit-backface-visibility: visible !important; 2033 | backface-visibility: visible !important; 2034 | } 2035 | 2036 | @-webkit-keyframes flipOutY { 2037 | from { 2038 | -webkit-transform: perspective(400px); 2039 | transform: perspective(400px); 2040 | } 2041 | 2042 | 30% { 2043 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 2044 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 2045 | opacity: 1; 2046 | } 2047 | 2048 | to { 2049 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 2050 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 2051 | opacity: 0; 2052 | } 2053 | } 2054 | 2055 | @keyframes flipOutY { 2056 | from { 2057 | -webkit-transform: perspective(400px); 2058 | transform: perspective(400px); 2059 | } 2060 | 2061 | 30% { 2062 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 2063 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 2064 | opacity: 1; 2065 | } 2066 | 2067 | to { 2068 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 2069 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 2070 | opacity: 0; 2071 | } 2072 | } 2073 | 2074 | .flipOutY { 2075 | -webkit-backface-visibility: visible !important; 2076 | backface-visibility: visible !important; 2077 | -webkit-animation-name: flipOutY; 2078 | animation-name: flipOutY; 2079 | } 2080 | 2081 | @-webkit-keyframes lightSpeedIn { 2082 | from { 2083 | -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); 2084 | transform: translate3d(100%, 0, 0) skewX(-30deg); 2085 | opacity: 0; 2086 | } 2087 | 2088 | 60% { 2089 | -webkit-transform: skewX(20deg); 2090 | transform: skewX(20deg); 2091 | opacity: 1; 2092 | } 2093 | 2094 | 80% { 2095 | -webkit-transform: skewX(-5deg); 2096 | transform: skewX(-5deg); 2097 | opacity: 1; 2098 | } 2099 | 2100 | to { 2101 | -webkit-transform: none; 2102 | transform: none; 2103 | opacity: 1; 2104 | } 2105 | } 2106 | 2107 | @keyframes lightSpeedIn { 2108 | from { 2109 | -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); 2110 | transform: translate3d(100%, 0, 0) skewX(-30deg); 2111 | opacity: 0; 2112 | } 2113 | 2114 | 60% { 2115 | -webkit-transform: skewX(20deg); 2116 | transform: skewX(20deg); 2117 | opacity: 1; 2118 | } 2119 | 2120 | 80% { 2121 | -webkit-transform: skewX(-5deg); 2122 | transform: skewX(-5deg); 2123 | opacity: 1; 2124 | } 2125 | 2126 | to { 2127 | -webkit-transform: none; 2128 | transform: none; 2129 | opacity: 1; 2130 | } 2131 | } 2132 | 2133 | .lightSpeedIn { 2134 | -webkit-animation-name: lightSpeedIn; 2135 | animation-name: lightSpeedIn; 2136 | -webkit-animation-timing-function: ease-out; 2137 | animation-timing-function: ease-out; 2138 | } 2139 | 2140 | @-webkit-keyframes lightSpeedOut { 2141 | from { 2142 | opacity: 1; 2143 | } 2144 | 2145 | to { 2146 | -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); 2147 | transform: translate3d(100%, 0, 0) skewX(30deg); 2148 | opacity: 0; 2149 | } 2150 | } 2151 | 2152 | @keyframes lightSpeedOut { 2153 | from { 2154 | opacity: 1; 2155 | } 2156 | 2157 | to { 2158 | -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); 2159 | transform: translate3d(100%, 0, 0) skewX(30deg); 2160 | opacity: 0; 2161 | } 2162 | } 2163 | 2164 | .lightSpeedOut { 2165 | -webkit-animation-name: lightSpeedOut; 2166 | animation-name: lightSpeedOut; 2167 | -webkit-animation-timing-function: ease-in; 2168 | animation-timing-function: ease-in; 2169 | } 2170 | 2171 | @-webkit-keyframes rotateIn { 2172 | from { 2173 | -webkit-transform-origin: center; 2174 | transform-origin: center; 2175 | -webkit-transform: rotate3d(0, 0, 1, -200deg); 2176 | transform: rotate3d(0, 0, 1, -200deg); 2177 | opacity: 0; 2178 | } 2179 | 2180 | to { 2181 | -webkit-transform-origin: center; 2182 | transform-origin: center; 2183 | -webkit-transform: none; 2184 | transform: none; 2185 | opacity: 1; 2186 | } 2187 | } 2188 | 2189 | @keyframes rotateIn { 2190 | from { 2191 | -webkit-transform-origin: center; 2192 | transform-origin: center; 2193 | -webkit-transform: rotate3d(0, 0, 1, -200deg); 2194 | transform: rotate3d(0, 0, 1, -200deg); 2195 | opacity: 0; 2196 | } 2197 | 2198 | to { 2199 | -webkit-transform-origin: center; 2200 | transform-origin: center; 2201 | -webkit-transform: none; 2202 | transform: none; 2203 | opacity: 1; 2204 | } 2205 | } 2206 | 2207 | .rotateIn { 2208 | -webkit-animation-name: rotateIn; 2209 | animation-name: rotateIn; 2210 | } 2211 | 2212 | @-webkit-keyframes rotateInDownLeft { 2213 | from { 2214 | -webkit-transform-origin: left bottom; 2215 | transform-origin: left bottom; 2216 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2217 | transform: rotate3d(0, 0, 1, -45deg); 2218 | opacity: 0; 2219 | } 2220 | 2221 | to { 2222 | -webkit-transform-origin: left bottom; 2223 | transform-origin: left bottom; 2224 | -webkit-transform: none; 2225 | transform: none; 2226 | opacity: 1; 2227 | } 2228 | } 2229 | 2230 | @keyframes rotateInDownLeft { 2231 | from { 2232 | -webkit-transform-origin: left bottom; 2233 | transform-origin: left bottom; 2234 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2235 | transform: rotate3d(0, 0, 1, -45deg); 2236 | opacity: 0; 2237 | } 2238 | 2239 | to { 2240 | -webkit-transform-origin: left bottom; 2241 | transform-origin: left bottom; 2242 | -webkit-transform: none; 2243 | transform: none; 2244 | opacity: 1; 2245 | } 2246 | } 2247 | 2248 | .rotateInDownLeft { 2249 | -webkit-animation-name: rotateInDownLeft; 2250 | animation-name: rotateInDownLeft; 2251 | } 2252 | 2253 | @-webkit-keyframes rotateInDownRight { 2254 | from { 2255 | -webkit-transform-origin: right bottom; 2256 | transform-origin: right bottom; 2257 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2258 | transform: rotate3d(0, 0, 1, 45deg); 2259 | opacity: 0; 2260 | } 2261 | 2262 | to { 2263 | -webkit-transform-origin: right bottom; 2264 | transform-origin: right bottom; 2265 | -webkit-transform: none; 2266 | transform: none; 2267 | opacity: 1; 2268 | } 2269 | } 2270 | 2271 | @keyframes rotateInDownRight { 2272 | from { 2273 | -webkit-transform-origin: right bottom; 2274 | transform-origin: right bottom; 2275 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2276 | transform: rotate3d(0, 0, 1, 45deg); 2277 | opacity: 0; 2278 | } 2279 | 2280 | to { 2281 | -webkit-transform-origin: right bottom; 2282 | transform-origin: right bottom; 2283 | -webkit-transform: none; 2284 | transform: none; 2285 | opacity: 1; 2286 | } 2287 | } 2288 | 2289 | .rotateInDownRight { 2290 | -webkit-animation-name: rotateInDownRight; 2291 | animation-name: rotateInDownRight; 2292 | } 2293 | 2294 | @-webkit-keyframes rotateInUpLeft { 2295 | from { 2296 | -webkit-transform-origin: left bottom; 2297 | transform-origin: left bottom; 2298 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2299 | transform: rotate3d(0, 0, 1, 45deg); 2300 | opacity: 0; 2301 | } 2302 | 2303 | to { 2304 | -webkit-transform-origin: left bottom; 2305 | transform-origin: left bottom; 2306 | -webkit-transform: none; 2307 | transform: none; 2308 | opacity: 1; 2309 | } 2310 | } 2311 | 2312 | @keyframes rotateInUpLeft { 2313 | from { 2314 | -webkit-transform-origin: left bottom; 2315 | transform-origin: left bottom; 2316 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2317 | transform: rotate3d(0, 0, 1, 45deg); 2318 | opacity: 0; 2319 | } 2320 | 2321 | to { 2322 | -webkit-transform-origin: left bottom; 2323 | transform-origin: left bottom; 2324 | -webkit-transform: none; 2325 | transform: none; 2326 | opacity: 1; 2327 | } 2328 | } 2329 | 2330 | .rotateInUpLeft { 2331 | -webkit-animation-name: rotateInUpLeft; 2332 | animation-name: rotateInUpLeft; 2333 | } 2334 | 2335 | @-webkit-keyframes rotateInUpRight { 2336 | from { 2337 | -webkit-transform-origin: right bottom; 2338 | transform-origin: right bottom; 2339 | -webkit-transform: rotate3d(0, 0, 1, -90deg); 2340 | transform: rotate3d(0, 0, 1, -90deg); 2341 | opacity: 0; 2342 | } 2343 | 2344 | to { 2345 | -webkit-transform-origin: right bottom; 2346 | transform-origin: right bottom; 2347 | -webkit-transform: none; 2348 | transform: none; 2349 | opacity: 1; 2350 | } 2351 | } 2352 | 2353 | @keyframes rotateInUpRight { 2354 | from { 2355 | -webkit-transform-origin: right bottom; 2356 | transform-origin: right bottom; 2357 | -webkit-transform: rotate3d(0, 0, 1, -90deg); 2358 | transform: rotate3d(0, 0, 1, -90deg); 2359 | opacity: 0; 2360 | } 2361 | 2362 | to { 2363 | -webkit-transform-origin: right bottom; 2364 | transform-origin: right bottom; 2365 | -webkit-transform: none; 2366 | transform: none; 2367 | opacity: 1; 2368 | } 2369 | } 2370 | 2371 | .rotateInUpRight { 2372 | -webkit-animation-name: rotateInUpRight; 2373 | animation-name: rotateInUpRight; 2374 | } 2375 | 2376 | @-webkit-keyframes rotateOut { 2377 | from { 2378 | -webkit-transform-origin: center; 2379 | transform-origin: center; 2380 | opacity: 1; 2381 | } 2382 | 2383 | to { 2384 | -webkit-transform-origin: center; 2385 | transform-origin: center; 2386 | -webkit-transform: rotate3d(0, 0, 1, 200deg); 2387 | transform: rotate3d(0, 0, 1, 200deg); 2388 | opacity: 0; 2389 | } 2390 | } 2391 | 2392 | @keyframes rotateOut { 2393 | from { 2394 | -webkit-transform-origin: center; 2395 | transform-origin: center; 2396 | opacity: 1; 2397 | } 2398 | 2399 | to { 2400 | -webkit-transform-origin: center; 2401 | transform-origin: center; 2402 | -webkit-transform: rotate3d(0, 0, 1, 200deg); 2403 | transform: rotate3d(0, 0, 1, 200deg); 2404 | opacity: 0; 2405 | } 2406 | } 2407 | 2408 | .rotateOut { 2409 | -webkit-animation-name: rotateOut; 2410 | animation-name: rotateOut; 2411 | } 2412 | 2413 | @-webkit-keyframes rotateOutDownLeft { 2414 | from { 2415 | -webkit-transform-origin: left bottom; 2416 | transform-origin: left bottom; 2417 | opacity: 1; 2418 | } 2419 | 2420 | to { 2421 | -webkit-transform-origin: left bottom; 2422 | transform-origin: left bottom; 2423 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2424 | transform: rotate3d(0, 0, 1, 45deg); 2425 | opacity: 0; 2426 | } 2427 | } 2428 | 2429 | @keyframes rotateOutDownLeft { 2430 | from { 2431 | -webkit-transform-origin: left bottom; 2432 | transform-origin: left bottom; 2433 | opacity: 1; 2434 | } 2435 | 2436 | to { 2437 | -webkit-transform-origin: left bottom; 2438 | transform-origin: left bottom; 2439 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2440 | transform: rotate3d(0, 0, 1, 45deg); 2441 | opacity: 0; 2442 | } 2443 | } 2444 | 2445 | .rotateOutDownLeft { 2446 | -webkit-animation-name: rotateOutDownLeft; 2447 | animation-name: rotateOutDownLeft; 2448 | } 2449 | 2450 | @-webkit-keyframes rotateOutDownRight { 2451 | from { 2452 | -webkit-transform-origin: right bottom; 2453 | transform-origin: right bottom; 2454 | opacity: 1; 2455 | } 2456 | 2457 | to { 2458 | -webkit-transform-origin: right bottom; 2459 | transform-origin: right bottom; 2460 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2461 | transform: rotate3d(0, 0, 1, -45deg); 2462 | opacity: 0; 2463 | } 2464 | } 2465 | 2466 | @keyframes rotateOutDownRight { 2467 | from { 2468 | -webkit-transform-origin: right bottom; 2469 | transform-origin: right bottom; 2470 | opacity: 1; 2471 | } 2472 | 2473 | to { 2474 | -webkit-transform-origin: right bottom; 2475 | transform-origin: right bottom; 2476 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2477 | transform: rotate3d(0, 0, 1, -45deg); 2478 | opacity: 0; 2479 | } 2480 | } 2481 | 2482 | .rotateOutDownRight { 2483 | -webkit-animation-name: rotateOutDownRight; 2484 | animation-name: rotateOutDownRight; 2485 | } 2486 | 2487 | @-webkit-keyframes rotateOutUpLeft { 2488 | from { 2489 | -webkit-transform-origin: left bottom; 2490 | transform-origin: left bottom; 2491 | opacity: 1; 2492 | } 2493 | 2494 | to { 2495 | -webkit-transform-origin: left bottom; 2496 | transform-origin: left bottom; 2497 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2498 | transform: rotate3d(0, 0, 1, -45deg); 2499 | opacity: 0; 2500 | } 2501 | } 2502 | 2503 | @keyframes rotateOutUpLeft { 2504 | from { 2505 | -webkit-transform-origin: left bottom; 2506 | transform-origin: left bottom; 2507 | opacity: 1; 2508 | } 2509 | 2510 | to { 2511 | -webkit-transform-origin: left bottom; 2512 | transform-origin: left bottom; 2513 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2514 | transform: rotate3d(0, 0, 1, -45deg); 2515 | opacity: 0; 2516 | } 2517 | } 2518 | 2519 | .rotateOutUpLeft { 2520 | -webkit-animation-name: rotateOutUpLeft; 2521 | animation-name: rotateOutUpLeft; 2522 | } 2523 | 2524 | @-webkit-keyframes rotateOutUpRight { 2525 | from { 2526 | -webkit-transform-origin: right bottom; 2527 | transform-origin: right bottom; 2528 | opacity: 1; 2529 | } 2530 | 2531 | to { 2532 | -webkit-transform-origin: right bottom; 2533 | transform-origin: right bottom; 2534 | -webkit-transform: rotate3d(0, 0, 1, 90deg); 2535 | transform: rotate3d(0, 0, 1, 90deg); 2536 | opacity: 0; 2537 | } 2538 | } 2539 | 2540 | @keyframes rotateOutUpRight { 2541 | from { 2542 | -webkit-transform-origin: right bottom; 2543 | transform-origin: right bottom; 2544 | opacity: 1; 2545 | } 2546 | 2547 | to { 2548 | -webkit-transform-origin: right bottom; 2549 | transform-origin: right bottom; 2550 | -webkit-transform: rotate3d(0, 0, 1, 90deg); 2551 | transform: rotate3d(0, 0, 1, 90deg); 2552 | opacity: 0; 2553 | } 2554 | } 2555 | 2556 | .rotateOutUpRight { 2557 | -webkit-animation-name: rotateOutUpRight; 2558 | animation-name: rotateOutUpRight; 2559 | } 2560 | 2561 | @-webkit-keyframes hinge { 2562 | 0% { 2563 | -webkit-transform-origin: top left; 2564 | transform-origin: top left; 2565 | -webkit-animation-timing-function: ease-in-out; 2566 | animation-timing-function: ease-in-out; 2567 | } 2568 | 2569 | 20%, 60% { 2570 | -webkit-transform: rotate3d(0, 0, 1, 80deg); 2571 | transform: rotate3d(0, 0, 1, 80deg); 2572 | -webkit-transform-origin: top left; 2573 | transform-origin: top left; 2574 | -webkit-animation-timing-function: ease-in-out; 2575 | animation-timing-function: ease-in-out; 2576 | } 2577 | 2578 | 40%, 80% { 2579 | -webkit-transform: rotate3d(0, 0, 1, 60deg); 2580 | transform: rotate3d(0, 0, 1, 60deg); 2581 | -webkit-transform-origin: top left; 2582 | transform-origin: top left; 2583 | -webkit-animation-timing-function: ease-in-out; 2584 | animation-timing-function: ease-in-out; 2585 | opacity: 1; 2586 | } 2587 | 2588 | to { 2589 | -webkit-transform: translate3d(0, 700px, 0); 2590 | transform: translate3d(0, 700px, 0); 2591 | opacity: 0; 2592 | } 2593 | } 2594 | 2595 | @keyframes hinge { 2596 | 0% { 2597 | -webkit-transform-origin: top left; 2598 | transform-origin: top left; 2599 | -webkit-animation-timing-function: ease-in-out; 2600 | animation-timing-function: ease-in-out; 2601 | } 2602 | 2603 | 20%, 60% { 2604 | -webkit-transform: rotate3d(0, 0, 1, 80deg); 2605 | transform: rotate3d(0, 0, 1, 80deg); 2606 | -webkit-transform-origin: top left; 2607 | transform-origin: top left; 2608 | -webkit-animation-timing-function: ease-in-out; 2609 | animation-timing-function: ease-in-out; 2610 | } 2611 | 2612 | 40%, 80% { 2613 | -webkit-transform: rotate3d(0, 0, 1, 60deg); 2614 | transform: rotate3d(0, 0, 1, 60deg); 2615 | -webkit-transform-origin: top left; 2616 | transform-origin: top left; 2617 | -webkit-animation-timing-function: ease-in-out; 2618 | animation-timing-function: ease-in-out; 2619 | opacity: 1; 2620 | } 2621 | 2622 | to { 2623 | -webkit-transform: translate3d(0, 700px, 0); 2624 | transform: translate3d(0, 700px, 0); 2625 | opacity: 0; 2626 | } 2627 | } 2628 | 2629 | .hinge { 2630 | -webkit-animation-name: hinge; 2631 | animation-name: hinge; 2632 | } 2633 | 2634 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2635 | 2636 | @-webkit-keyframes rollIn { 2637 | from { 2638 | opacity: 0; 2639 | -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2640 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2641 | } 2642 | 2643 | to { 2644 | opacity: 1; 2645 | -webkit-transform: none; 2646 | transform: none; 2647 | } 2648 | } 2649 | 2650 | @keyframes rollIn { 2651 | from { 2652 | opacity: 0; 2653 | -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2654 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2655 | } 2656 | 2657 | to { 2658 | opacity: 1; 2659 | -webkit-transform: none; 2660 | transform: none; 2661 | } 2662 | } 2663 | 2664 | .rollIn { 2665 | -webkit-animation-name: rollIn; 2666 | animation-name: rollIn; 2667 | } 2668 | 2669 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2670 | 2671 | @-webkit-keyframes rollOut { 2672 | from { 2673 | opacity: 1; 2674 | } 2675 | 2676 | to { 2677 | opacity: 0; 2678 | -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2679 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2680 | } 2681 | } 2682 | 2683 | @keyframes rollOut { 2684 | from { 2685 | opacity: 1; 2686 | } 2687 | 2688 | to { 2689 | opacity: 0; 2690 | -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2691 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2692 | } 2693 | } 2694 | 2695 | .rollOut { 2696 | -webkit-animation-name: rollOut; 2697 | animation-name: rollOut; 2698 | } 2699 | 2700 | @-webkit-keyframes zoomIn { 2701 | from { 2702 | opacity: 0; 2703 | -webkit-transform: scale3d(.3, .3, .3); 2704 | transform: scale3d(.3, .3, .3); 2705 | } 2706 | 2707 | 50% { 2708 | opacity: 1; 2709 | } 2710 | } 2711 | 2712 | @keyframes zoomIn { 2713 | from { 2714 | opacity: 0; 2715 | -webkit-transform: scale3d(.3, .3, .3); 2716 | transform: scale3d(.3, .3, .3); 2717 | } 2718 | 2719 | 50% { 2720 | opacity: 1; 2721 | } 2722 | } 2723 | 2724 | .zoomIn { 2725 | -webkit-animation-name: zoomIn; 2726 | animation-name: zoomIn; 2727 | } 2728 | 2729 | @-webkit-keyframes zoomInDown { 2730 | from { 2731 | opacity: 0; 2732 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2733 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2734 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2735 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2736 | } 2737 | 2738 | 60% { 2739 | opacity: 1; 2740 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2741 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2742 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2743 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2744 | } 2745 | } 2746 | 2747 | @keyframes zoomInDown { 2748 | from { 2749 | opacity: 0; 2750 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2751 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2752 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2753 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2754 | } 2755 | 2756 | 60% { 2757 | opacity: 1; 2758 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2759 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2760 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2761 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2762 | } 2763 | } 2764 | 2765 | .zoomInDown { 2766 | -webkit-animation-name: zoomInDown; 2767 | animation-name: zoomInDown; 2768 | } 2769 | 2770 | @-webkit-keyframes zoomInLeft { 2771 | from { 2772 | opacity: 0; 2773 | -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2774 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2775 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2776 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2777 | } 2778 | 2779 | 60% { 2780 | opacity: 1; 2781 | -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2782 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2783 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2784 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2785 | } 2786 | } 2787 | 2788 | @keyframes zoomInLeft { 2789 | from { 2790 | opacity: 0; 2791 | -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2792 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2793 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2794 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2795 | } 2796 | 2797 | 60% { 2798 | opacity: 1; 2799 | -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2800 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2801 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2802 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2803 | } 2804 | } 2805 | 2806 | .zoomInLeft { 2807 | -webkit-animation-name: zoomInLeft; 2808 | animation-name: zoomInLeft; 2809 | } 2810 | 2811 | @-webkit-keyframes zoomInRight { 2812 | from { 2813 | opacity: 0; 2814 | -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2815 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2816 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2817 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2818 | } 2819 | 2820 | 60% { 2821 | opacity: 1; 2822 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2823 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2824 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2825 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2826 | } 2827 | } 2828 | 2829 | @keyframes zoomInRight { 2830 | from { 2831 | opacity: 0; 2832 | -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2833 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2834 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2835 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2836 | } 2837 | 2838 | 60% { 2839 | opacity: 1; 2840 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2841 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2842 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2843 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2844 | } 2845 | } 2846 | 2847 | .zoomInRight { 2848 | -webkit-animation-name: zoomInRight; 2849 | animation-name: zoomInRight; 2850 | } 2851 | 2852 | @-webkit-keyframes zoomInUp { 2853 | from { 2854 | opacity: 0; 2855 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2856 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2857 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2858 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2859 | } 2860 | 2861 | 60% { 2862 | opacity: 1; 2863 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2864 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2865 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2866 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2867 | } 2868 | } 2869 | 2870 | @keyframes zoomInUp { 2871 | from { 2872 | opacity: 0; 2873 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2874 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2875 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2876 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2877 | } 2878 | 2879 | 60% { 2880 | opacity: 1; 2881 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2882 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2883 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2884 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2885 | } 2886 | } 2887 | 2888 | .zoomInUp { 2889 | -webkit-animation-name: zoomInUp; 2890 | animation-name: zoomInUp; 2891 | } 2892 | 2893 | @-webkit-keyframes zoomOut { 2894 | from { 2895 | opacity: 1; 2896 | } 2897 | 2898 | 50% { 2899 | opacity: 0; 2900 | -webkit-transform: scale3d(.3, .3, .3); 2901 | transform: scale3d(.3, .3, .3); 2902 | } 2903 | 2904 | to { 2905 | opacity: 0; 2906 | } 2907 | } 2908 | 2909 | @keyframes zoomOut { 2910 | from { 2911 | opacity: 1; 2912 | } 2913 | 2914 | 50% { 2915 | opacity: 0; 2916 | -webkit-transform: scale3d(.3, .3, .3); 2917 | transform: scale3d(.3, .3, .3); 2918 | } 2919 | 2920 | to { 2921 | opacity: 0; 2922 | } 2923 | } 2924 | 2925 | .zoomOut { 2926 | -webkit-animation-name: zoomOut; 2927 | animation-name: zoomOut; 2928 | } 2929 | 2930 | @-webkit-keyframes zoomOutDown { 2931 | 40% { 2932 | opacity: 1; 2933 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2934 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2935 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2936 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2937 | } 2938 | 2939 | to { 2940 | opacity: 0; 2941 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2942 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2943 | -webkit-transform-origin: center bottom; 2944 | transform-origin: center bottom; 2945 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2946 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2947 | } 2948 | } 2949 | 2950 | @keyframes zoomOutDown { 2951 | 40% { 2952 | opacity: 1; 2953 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2954 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2955 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2956 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2957 | } 2958 | 2959 | to { 2960 | opacity: 0; 2961 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2962 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2963 | -webkit-transform-origin: center bottom; 2964 | transform-origin: center bottom; 2965 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2966 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2967 | } 2968 | } 2969 | 2970 | .zoomOutDown { 2971 | -webkit-animation-name: zoomOutDown; 2972 | animation-name: zoomOutDown; 2973 | } 2974 | 2975 | @-webkit-keyframes zoomOutLeft { 2976 | 40% { 2977 | opacity: 1; 2978 | -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2979 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2980 | } 2981 | 2982 | to { 2983 | opacity: 0; 2984 | -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); 2985 | transform: scale(.1) translate3d(-2000px, 0, 0); 2986 | -webkit-transform-origin: left center; 2987 | transform-origin: left center; 2988 | } 2989 | } 2990 | 2991 | @keyframes zoomOutLeft { 2992 | 40% { 2993 | opacity: 1; 2994 | -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2995 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2996 | } 2997 | 2998 | to { 2999 | opacity: 0; 3000 | -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); 3001 | transform: scale(.1) translate3d(-2000px, 0, 0); 3002 | -webkit-transform-origin: left center; 3003 | transform-origin: left center; 3004 | } 3005 | } 3006 | 3007 | .zoomOutLeft { 3008 | -webkit-animation-name: zoomOutLeft; 3009 | animation-name: zoomOutLeft; 3010 | } 3011 | 3012 | @-webkit-keyframes zoomOutRight { 3013 | 40% { 3014 | opacity: 1; 3015 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 3016 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 3017 | } 3018 | 3019 | to { 3020 | opacity: 0; 3021 | -webkit-transform: scale(.1) translate3d(2000px, 0, 0); 3022 | transform: scale(.1) translate3d(2000px, 0, 0); 3023 | -webkit-transform-origin: right center; 3024 | transform-origin: right center; 3025 | } 3026 | } 3027 | 3028 | @keyframes zoomOutRight { 3029 | 40% { 3030 | opacity: 1; 3031 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 3032 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 3033 | } 3034 | 3035 | to { 3036 | opacity: 0; 3037 | -webkit-transform: scale(.1) translate3d(2000px, 0, 0); 3038 | transform: scale(.1) translate3d(2000px, 0, 0); 3039 | -webkit-transform-origin: right center; 3040 | transform-origin: right center; 3041 | } 3042 | } 3043 | 3044 | .zoomOutRight { 3045 | -webkit-animation-name: zoomOutRight; 3046 | animation-name: zoomOutRight; 3047 | } 3048 | 3049 | @-webkit-keyframes zoomOutUp { 3050 | 40% { 3051 | opacity: 1; 3052 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 3053 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 3054 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 3055 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 3056 | } 3057 | 3058 | to { 3059 | opacity: 0; 3060 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 3061 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 3062 | -webkit-transform-origin: center bottom; 3063 | transform-origin: center bottom; 3064 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 3065 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 3066 | } 3067 | } 3068 | 3069 | @keyframes zoomOutUp { 3070 | 40% { 3071 | opacity: 1; 3072 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 3073 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 3074 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 3075 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 3076 | } 3077 | 3078 | to { 3079 | opacity: 0; 3080 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 3081 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 3082 | -webkit-transform-origin: center bottom; 3083 | transform-origin: center bottom; 3084 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 3085 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 3086 | } 3087 | } 3088 | 3089 | .zoomOutUp { 3090 | -webkit-animation-name: zoomOutUp; 3091 | animation-name: zoomOutUp; 3092 | } 3093 | 3094 | @-webkit-keyframes slideInDown { 3095 | from { 3096 | -webkit-transform: translate3d(0, -100%, 0); 3097 | transform: translate3d(0, -100%, 0); 3098 | visibility: visible; 3099 | } 3100 | 3101 | to { 3102 | -webkit-transform: translate3d(0, 0, 0); 3103 | transform: translate3d(0, 0, 0); 3104 | } 3105 | } 3106 | 3107 | @keyframes slideInDown { 3108 | from { 3109 | -webkit-transform: translate3d(0, -100%, 0); 3110 | transform: translate3d(0, -100%, 0); 3111 | visibility: visible; 3112 | } 3113 | 3114 | to { 3115 | -webkit-transform: translate3d(0, 0, 0); 3116 | transform: translate3d(0, 0, 0); 3117 | } 3118 | } 3119 | 3120 | .slideInDown { 3121 | -webkit-animation-name: slideInDown; 3122 | animation-name: slideInDown; 3123 | } 3124 | 3125 | @-webkit-keyframes slideInLeft { 3126 | from { 3127 | -webkit-transform: translate3d(-100%, 0, 0); 3128 | transform: translate3d(-100%, 0, 0); 3129 | visibility: visible; 3130 | } 3131 | 3132 | to { 3133 | -webkit-transform: translate3d(0, 0, 0); 3134 | transform: translate3d(0, 0, 0); 3135 | } 3136 | } 3137 | 3138 | @keyframes slideInLeft { 3139 | from { 3140 | -webkit-transform: translate3d(-100%, 0, 0); 3141 | transform: translate3d(-100%, 0, 0); 3142 | visibility: visible; 3143 | } 3144 | 3145 | to { 3146 | -webkit-transform: translate3d(0, 0, 0); 3147 | transform: translate3d(0, 0, 0); 3148 | } 3149 | } 3150 | 3151 | .slideInLeft { 3152 | -webkit-animation-name: slideInLeft; 3153 | animation-name: slideInLeft; 3154 | } 3155 | 3156 | @-webkit-keyframes slideInRight { 3157 | from { 3158 | -webkit-transform: translate3d(100%, 0, 0); 3159 | transform: translate3d(100%, 0, 0); 3160 | visibility: visible; 3161 | } 3162 | 3163 | to { 3164 | -webkit-transform: translate3d(0, 0, 0); 3165 | transform: translate3d(0, 0, 0); 3166 | } 3167 | } 3168 | 3169 | @keyframes slideInRight { 3170 | from { 3171 | -webkit-transform: translate3d(100%, 0, 0); 3172 | transform: translate3d(100%, 0, 0); 3173 | visibility: visible; 3174 | } 3175 | 3176 | to { 3177 | -webkit-transform: translate3d(0, 0, 0); 3178 | transform: translate3d(0, 0, 0); 3179 | } 3180 | } 3181 | 3182 | .slideInRight { 3183 | -webkit-animation-name: slideInRight; 3184 | animation-name: slideInRight; 3185 | } 3186 | 3187 | @-webkit-keyframes slideInUp { 3188 | from { 3189 | -webkit-transform: translate3d(0, 100%, 0); 3190 | transform: translate3d(0, 100%, 0); 3191 | visibility: visible; 3192 | } 3193 | 3194 | to { 3195 | -webkit-transform: translate3d(0, 0, 0); 3196 | transform: translate3d(0, 0, 0); 3197 | } 3198 | } 3199 | 3200 | @keyframes slideInUp { 3201 | from { 3202 | -webkit-transform: translate3d(0, 100%, 0); 3203 | transform: translate3d(0, 100%, 0); 3204 | visibility: visible; 3205 | } 3206 | 3207 | to { 3208 | -webkit-transform: translate3d(0, 0, 0); 3209 | transform: translate3d(0, 0, 0); 3210 | } 3211 | } 3212 | 3213 | .slideInUp { 3214 | -webkit-animation-name: slideInUp; 3215 | animation-name: slideInUp; 3216 | } 3217 | 3218 | @-webkit-keyframes slideOutDown { 3219 | from { 3220 | -webkit-transform: translate3d(0, 0, 0); 3221 | transform: translate3d(0, 0, 0); 3222 | } 3223 | 3224 | to { 3225 | visibility: hidden; 3226 | -webkit-transform: translate3d(0, 100%, 0); 3227 | transform: translate3d(0, 100%, 0); 3228 | } 3229 | } 3230 | 3231 | @keyframes slideOutDown { 3232 | from { 3233 | -webkit-transform: translate3d(0, 0, 0); 3234 | transform: translate3d(0, 0, 0); 3235 | } 3236 | 3237 | to { 3238 | visibility: hidden; 3239 | -webkit-transform: translate3d(0, 100%, 0); 3240 | transform: translate3d(0, 100%, 0); 3241 | } 3242 | } 3243 | 3244 | .slideOutDown { 3245 | -webkit-animation-name: slideOutDown; 3246 | animation-name: slideOutDown; 3247 | } 3248 | 3249 | @-webkit-keyframes slideOutLeft { 3250 | from { 3251 | -webkit-transform: translate3d(0, 0, 0); 3252 | transform: translate3d(0, 0, 0); 3253 | } 3254 | 3255 | to { 3256 | visibility: hidden; 3257 | -webkit-transform: translate3d(-100%, 0, 0); 3258 | transform: translate3d(-100%, 0, 0); 3259 | } 3260 | } 3261 | 3262 | @keyframes slideOutLeft { 3263 | from { 3264 | -webkit-transform: translate3d(0, 0, 0); 3265 | transform: translate3d(0, 0, 0); 3266 | } 3267 | 3268 | to { 3269 | visibility: hidden; 3270 | -webkit-transform: translate3d(-100%, 0, 0); 3271 | transform: translate3d(-100%, 0, 0); 3272 | } 3273 | } 3274 | 3275 | .slideOutLeft { 3276 | -webkit-animation-name: slideOutLeft; 3277 | animation-name: slideOutLeft; 3278 | } 3279 | 3280 | @-webkit-keyframes slideOutRight { 3281 | from { 3282 | -webkit-transform: translate3d(0, 0, 0); 3283 | transform: translate3d(0, 0, 0); 3284 | } 3285 | 3286 | to { 3287 | visibility: hidden; 3288 | -webkit-transform: translate3d(100%, 0, 0); 3289 | transform: translate3d(100%, 0, 0); 3290 | } 3291 | } 3292 | 3293 | @keyframes slideOutRight { 3294 | from { 3295 | -webkit-transform: translate3d(0, 0, 0); 3296 | transform: translate3d(0, 0, 0); 3297 | } 3298 | 3299 | to { 3300 | visibility: hidden; 3301 | -webkit-transform: translate3d(100%, 0, 0); 3302 | transform: translate3d(100%, 0, 0); 3303 | } 3304 | } 3305 | 3306 | .slideOutRight { 3307 | -webkit-animation-name: slideOutRight; 3308 | animation-name: slideOutRight; 3309 | } 3310 | 3311 | @-webkit-keyframes slideOutUp { 3312 | from { 3313 | -webkit-transform: translate3d(0, 0, 0); 3314 | transform: translate3d(0, 0, 0); 3315 | } 3316 | 3317 | to { 3318 | visibility: hidden; 3319 | -webkit-transform: translate3d(0, -100%, 0); 3320 | transform: translate3d(0, -100%, 0); 3321 | } 3322 | } 3323 | 3324 | @keyframes slideOutUp { 3325 | from { 3326 | -webkit-transform: translate3d(0, 0, 0); 3327 | transform: translate3d(0, 0, 0); 3328 | } 3329 | 3330 | to { 3331 | visibility: hidden; 3332 | -webkit-transform: translate3d(0, -100%, 0); 3333 | transform: translate3d(0, -100%, 0); 3334 | } 3335 | } 3336 | 3337 | .slideOutUp { 3338 | -webkit-animation-name: slideOutUp; 3339 | animation-name: slideOutUp; 3340 | } 3341 | --------------------------------------------------------------------------------