├── .gitattributes
├── .gitignore
├── LICENSE
├── README.md
├── assets
    ├── animate.css
    ├── jquery.fittext.js
    ├── jquery.lettering.js
    └── style.css
├── bower.json
├── index.html
├── jquery.textillate.js
└── package.json


/.gitattributes:
--------------------------------------------------------------------------------
1 | index.html linguist-vendored
2 | assets/* linguist-vendored
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (C) 2014 Jordan Schroter
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is
 8 | furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in
11 | all copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19 | THE SOFTWARE.
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Textillate.js v0.4.1  [![JS.ORG](https://img.shields.io/badge/js.org-textillate-ffb400.svg?style=flat-square)](http://js.org)
  2 | 
  3 | See a live demo [here](http://textillate.js.org/).
  4 | 
  5 | Textillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS3 animations to any text.
  6 | 
  7 | ## Usage
  8 | 
  9 | Let's start with the basic markup:
 10 | 
 11 | ```html
 12 | <h1 class="tlt">My Title</h1>
 13 | ```
 14 | 
 15 | And your JavaScript should look like this:
 16 | 
 17 | ```js
 18 | $(function () {
 19 | 	$('.tlt').textillate();
 20 | })
 21 | ```
 22 | 
 23 | This will animate using the default options. To change the defaults, you can either use the html data api:
 24 | 
 25 | ```html
 26 | <h1 class="tlt" data-in-effect="rollIn">Title</h1>
 27 | ```
 28 | 
 29 | or pass in options on initialization (see full list of options below):
 30 | 
 31 | ```js
 32 | $('.tlt').textillate({ in: { effect: 'rollIn' } });
 33 | ```
 34 | 
 35 | You can also tell textillate.js to animate a list with the following markup:
 36 | 
 37 | ```html
 38 | <h1 class="tlt">
 39 | 	<ul class="texts">
 40 | 		<li data-out-effect="fadeOut" data-out-shuffle="true">Some Title</li>
 41 | 		<li data-in-effect="fadeIn">Another Title</li>
 42 | 	</ul>
 43 | </h1>
 44 | ```
 45 | 
 46 | ```js
 47 | $('.tlt').textillate();
 48 | ```
 49 | 
 50 | Notice that you can control the animation parameters on each text (`<li>`) using the data api.
 51 | 
 52 | ## Dependencies
 53 | To start using textillate.js, you will need the following:
 54 | 
 55 | * [jQuery](http://jquery.com/download/)
 56 | * [lettering.js](https://github.com/davatron5000/Lettering.js)
 57 | * [animate.css](https://github.com/daneden/animate.css)
 58 | 
 59 | 
 60 | ## Options
 61 | 
 62 | ```js
 63 | $('.tlt').textillate({
 64 |   // the default selector to use when detecting multiple texts to animate
 65 |   selector: '.texts',
 66 | 
 67 |   // enable looping
 68 |   loop: false,
 69 | 
 70 |   // sets the minimum display time for each text before it is replaced
 71 |   minDisplayTime: 2000,
 72 | 
 73 |   // sets the initial delay before starting the animation
 74 |   // (note that depending on the in effect you may need to manually apply
 75 |   // visibility: hidden to the element before running this plugin)
 76 |   initialDelay: 0,
 77 | 
 78 |   // set whether or not to automatically start animating
 79 |   autoStart: true,
 80 | 
 81 |   // custom set of 'in' effects. This effects whether or not the
 82 |   // character is shown/hidden before or after an animation
 83 |   inEffects: [],
 84 | 
 85 |   // custom set of 'out' effects
 86 |   outEffects: [ 'hinge' ],
 87 | 
 88 |   // in animation settings
 89 |   in: {
 90 |   	// set the effect name
 91 |     effect: 'fadeInLeftBig',
 92 | 
 93 |     // set the delay factor applied to each consecutive character
 94 |     delayScale: 1.5,
 95 | 
 96 |     // set the delay between each character
 97 |     delay: 50,
 98 | 
 99 |     // set to true to animate all the characters at the same time
100 |     sync: false,
101 | 
102 |     // randomize the character sequence
103 |     // (note that shuffle doesn't make sense with sync = true)
104 |     shuffle: false,
105 | 
106 |     // reverse the character sequence
107 |     // (note that reverse doesn't make sense with sync = true)
108 |     reverse: false,
109 | 
110 |     // callback that executes once the animation has finished
111 |     callback: function () {}
112 |   },
113 | 
114 |   // out animation settings.
115 |   out: {
116 |     effect: 'hinge',
117 |     delayScale: 1.5,
118 |     delay: 50,
119 |     sync: false,
120 |     shuffle: false,
121 |     reverse: false,
122 |     callback: function () {}
123 |   },
124 | 
125 |   // callback that executes once textillate has finished
126 |   callback: function () {},
127 | 
128 |   // set the type of token to animate (available types: 'char' and 'word')
129 |   type: 'char'
130 | });
131 | ```
132 | 
133 | ## Events
134 | 
135 | Textillate triggers the following events:
136 | 
137 | * `start.tlt` - triggered when textillate starts
138 | * `inAnimationBegin.tlt` - triggered when the in animation begins
139 | * `inAnimationEnd.tlt` - triggered when the in animation ends
140 | * `outAnimationBegin.tlt` - triggered when the out animation begins
141 | * `outAnimationEnd.tlt` - triggered when the out animation ends
142 | * `end.tlt` - triggered when textillate ends
143 | 
144 | ```js
145 | $('.tlt').on('inAnimationBegin.tlt', function () {
146 |   // do something
147 | });
148 | ```
149 | 
150 | ## Methods
151 | 
152 | * `$element.textillate('start')` - Manually start/restart textillate
153 | * `$element.textillate('stop')` - Manually pause/stop textillate
154 | * `$element.textillate('in')` - Trigger the current text's in animation
155 | * `$element.textillate('out')` - Trigger the current text's out animation
156 | 
157 | ## Code Samples
158 | * [textillate.js + bounce.js](http://codepen.io/jschr/pen/GaJCi)
159 | 


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


--------------------------------------------------------------------------------
/assets/jquery.fittext.js:
--------------------------------------------------------------------------------
 1 | /*global jQuery */
 2 | /*!	
 3 | * FitText.js 1.1
 4 | *
 5 | * Copyright 2011, Dave Rupert http://daverupert.com
 6 | * Released under the WTFPL license 
 7 | * http://sam.zoy.org/wtfpl/
 8 | *
 9 | * Date: Thu May 05 14:23:00 2011 -0600
10 | */
11 | 
12 | (function( $ ){
13 | 	
14 |   $.fn.fitText = function( kompressor, options ) {
15 | 	   
16 |     // Setup options
17 |     var compressor = kompressor || 1,
18 |         settings = $.extend({
19 |           'minFontSize' : Number.NEGATIVE_INFINITY,
20 |           'maxFontSize' : Number.POSITIVE_INFINITY
21 |         }, options);
22 | 	
23 |     return this.each(function(){
24 | 
25 |       // Store the object
26 |       var $this = $(this); 
27 |         
28 |       // Resizer() resizes items based on the object width divided by the compressor * 10
29 |       var resizer = function () {
30 |         $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
31 |       };
32 | 
33 |       // Call once to set.
34 |       resizer();
35 | 				
36 |       // Call on resize. Opera debounces their resize by default. 
37 |       $(window).on('resize', resizer);
38 |       	
39 |     });
40 | 
41 |   };
42 | 
43 | })( jQuery );


--------------------------------------------------------------------------------
/assets/jquery.lettering.js:
--------------------------------------------------------------------------------
 1 | /*global jQuery */
 2 | /*!	
 3 | * Lettering.JS 0.6.1
 4 | *
 5 | * Copyright 2010, Dave Rupert http://daverupert.com
 6 | * Released under the WTFPL license 
 7 | * http://sam.zoy.org/wtfpl/
 8 | *
 9 | * Thanks to Paul Irish - http://paulirish.com - for the feedback.
10 | *
11 | * Date: Mon Sep 20 17:14:00 2010 -0600
12 | */
13 | (function($){
14 | 	function injector(t, splitter, klass, after) {
15 | 		var a = t.text().split(splitter), inject = '';
16 | 		if (a.length) {
17 | 			$(a).each(function(i, item) {
18 | 				inject += '<span class="'+klass+(i+1)+'">'+item+'</span>'+after;
19 | 			});	
20 | 			t.empty().append(inject);
21 | 		}
22 | 	}
23 | 	
24 | 	var methods = {
25 | 		init : function() {
26 | 
27 | 			return this.each(function() {
28 | 				injector($(this), '', 'char', '');
29 | 			});
30 | 
31 | 		},
32 | 
33 | 		words : function() {
34 | 
35 | 			return this.each(function() {
36 | 				injector($(this), ' ', 'word', ' ');
37 | 			});
38 | 
39 | 		},
40 | 		
41 | 		lines : function() {
42 | 
43 | 			return this.each(function() {
44 | 				var r = "eefec303079ad17405c889e092e105b0";
45 | 				// Because it's hard to split a <br/> tag consistently across browsers,
46 | 				// (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash 
47 | 				// (of the word "split").  If you're trying to use this plugin on that 
48 | 				// md5 hash string, it will fail because you're being ridiculous.
49 | 				injector($(this).children("br").replaceWith(r).end(), r, 'line', '');
50 | 			});
51 | 
52 | 		}
53 | 	};
54 | 
55 | 	$.fn.lettering = function( method ) {
56 | 		// Method calling logic
57 | 		if ( method && methods[method] ) {
58 | 			return methods[ method ].apply( this, [].slice.call( arguments, 1 ));
59 | 		} else if ( method === 'letters' || ! method ) {
60 | 			return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array
61 | 		}
62 | 		$.error( 'Method ' +  method + ' does not exist on jQuery.lettering' );
63 | 		return this;
64 | 	};
65 | 
66 | })(jQuery);


--------------------------------------------------------------------------------
/assets/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   -webkit-box-sizing: border-box;
  3 |   -moz-box-sizing: border-box;
  4 |   box-sizing: border-box;
  5 | }
  6 | 
  7 | body {
  8 |   margin: 0;
  9 |   background: #282828;
 10 |   color: #eee;
 11 |   font-family: 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
 12 |   font-size: 14px;
 13 | }
 14 | 
 15 | h1, h2, h3, h4, h5, h6 {
 16 |   margin: 10px 0;
 17 |   font-weight: 200;
 18 | }
 19 | 
 20 | h2 {
 21 |   font-size: 1.8em;
 22 |   font-weight: 200;
 23 |   color: #888;
 24 |   letter-spacing: 1px;
 25 | } 
 26 | 
 27 | section {
 28 |   margin-bottom: 20px;
 29 | }
 30 | 
 31 | p {
 32 |   margin: 0;
 33 |   line-height: 1.5;
 34 |   font-weight: 200;
 35 | }
 36 | 
 37 | a {
 38 |   color: #00aaee;
 39 |   text-decoration: none;
 40 | }
 41 | 
 42 | a:hover {
 43 |   color: #0077a2;
 44 |   text-decoration: underline;
 45 | }
 46 | 
 47 | .hide {
 48 |   display: none;
 49 | }
 50 | 
 51 | .decal {
 52 |   height: 2px;
 53 |   background-color: #000;
 54 |   border-bottom: 1px solid #333;
 55 | }
 56 | 
 57 | .container {
 58 |   max-width: 940px;
 59 |   margin-right: auto;
 60 |   margin-left: auto;
 61 | }
 62 | 
 63 | /* EFFECTS
 64 | ***************/
 65 | 
 66 | .glow {
 67 |   text-shadow: 0 0 0 rgba(0, 0, 0, 0);
 68 |     -webkit-transition: text-shadow 1s linear;
 69 |        -moz-transition: text-shadow 1s linear;
 70 |          -o-transition: text-shadow 1s linear;
 71 |             transition: text-shadow 1s linear;
 72 | }
 73 | 
 74 | .glow.in {
 75 |   text-shadow: 
 76 |     0.025em 0.025em 0.025em rgba(0, 0, 0, 0.8),
 77 |     0 0 0.5em rgba(255, 255, 255, 0.3);
 78 | }
 79 | 
 80 | .fade {
 81 |   opacity: 0;
 82 |     -webkit-transition: opacity 1s linear;
 83 |        -moz-transition: opacity 1s linear;
 84 |          -o-transition: opacity 1s linear;
 85 |             transition: opacity 1s linear;
 86 | }
 87 | 
 88 | .fade.in {
 89 |   opacity: 1;
 90 | }
 91 | 
 92 | /* BUTTONS
 93 | ***************/
 94 | 
 95 | .btn {
 96 |   color: #fff;
 97 |   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 98 |   display: inline-block;
 99 |   text-decoration: none;
100 |   font-weight: 200;
101 |   text-align: center;
102 |   vertical-align: middle;
103 |   cursor: pointer;
104 |   border-radius: 0.5em;
105 |   padding: 0.8em 1.2em;
106 |   background-color: #ED303C;
107 |   background-image: -moz-linear-gradient(top, #ED303C, #8D121A);
108 |   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ED303C), to(#8D121A));
109 |   background-image: -webkit-linear-gradient(top, #ED303C, #8D121A);
110 |   background-image: -o-linear-gradient(top, #ED303C, #8D121A);
111 |   background-image: linear-gradient(to bottom, #ED303C, #8D121A);
112 |   background-repeat: repeat-x;
113 |   -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
114 |      -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
115 |           box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
116 | }
117 | 
118 | .btn:hover,
119 | .btn-primary:active,
120 | .btn-primary.active,
121 | .btn-primary.disabled,
122 | .btn-primary[disabled] {
123 |   text-decoration: none;
124 |   color: #ddd;
125 |   background-color: #8D121A;
126 |   background-position: 0 -15px;
127 |   -webkit-transition: background-position 0.1s linear;
128 |      -moz-transition: background-position 0.1s linear;
129 |        -o-transition: background-position 0.1s linear;
130 |           transition: background-position 0.1s linear;
131 | }
132 | 
133 | .btn.active,
134 | .btn:active {
135 |   background-image: none;
136 |   outline: 0;
137 |   -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
138 |      -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
139 |           box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
140 | }
141 | 
142 | /* MARKETING
143 | ***************/
144 | 
145 | .jumbotron {
146 |   position: relative;
147 |   padding: 3em 0;
148 |   text-align: center;
149 |   background: #242424;
150 | }
151 | 
152 | .jumbotron h1 {
153 |   color: #fff;
154 |   font-family: Rokkitt;
155 |   font-size: 13em;
156 |   font-weight: 200;
157 |   text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.8);
158 |   visibility: hidden;
159 | }
160 | 
161 | .jumbotron h1 .char11 {
162 |   color: #ED303C;
163 | }
164 | 
165 | .jumbotron p {
166 |   margin-top: -1em;
167 |   letter-spacing: 0.15em;
168 |   color: #ccc;
169 |   font-size: 1.25em;
170 |   font-weight: 200;
171 |   text-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.8);
172 |   visibility: hidden;
173 |   text-align: center;
174 | }
175 | 
176 | .jumbotron .btn {
177 |   margin-top: 2em;
178 |   margin-bottom: 2em;
179 |   font-size: 1.6em;
180 | }
181 | 
182 | .about {
183 |   margin-top: 1em;
184 | }
185 | 
186 | .about p {
187 |   font-size: 1.2em;
188 | }
189 | 
190 | .playground {
191 |   background: #242424;
192 |   border-radius: 4px;
193 |   border: 1px solid #333;
194 |   margin-bottom: 10px;
195 | }
196 | 
197 | .playground .controls {
198 |   margin-bottom: 0;
199 |   background: #282828;
200 |   border-radius: 0 0 4px 4px;
201 |   border: 1px solid #0c0c0c;
202 |   border-top: 1px solid #333;
203 | }
204 | 
205 | .playground .controls form {
206 |   margin-bottom: 0;
207 |   padding-bottom: 8px;
208 | }
209 | 
210 | .playground .controls select {
211 |   width: 48%;
212 |   margin-right: 4px;
213 | }
214 | 
215 | @media (max-width: 480px) {
216 |   .playground .controls select {
217 |     width: 100%;
218 |     margin-right: 0;
219 |   }
220 | }
221 | 
222 | .playground .viewport {
223 |   display: table;
224 |   min-height: 10em;
225 |   padding: 20px;
226 |   border-radius: 4px 4px 0 0;
227 |   border: 1px solid #0c0c0c;
228 |   overflow: hidden;
229 |   -webkit-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5);
230 |      -moz-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5);
231 |           box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5);
232 | }
233 | 
234 | .playground .viewport .tlt {
235 |   color: #fff;
236 |   font-size: 1.5em;
237 |   font-weight: 200;
238 |   letter-spacing: 1px;
239 |   padding: 20px 0;
240 |   display: inline-block;
241 |   vertical-align: middle;
242 |   display: table-cell;
243 |   text-align: center;
244 |   /*visibility: hidden;*/
245 | }
246 | 
247 | .deps {
248 |   font-size: 1.2em;
249 | }
250 | 
251 | .deps ul {
252 |   list-style-type: square;
253 |   margin: 0;
254 | }
255 | 
256 | .deps ul li {
257 |   line-height: 1.5em
258 |   font-weight: 200;
259 | }
260 | 
261 | /* GRID 
262 | ***************/ 
263 | 
264 | .grid:after {
265 |   content: "";
266 |   display: table;
267 |   clear: both;
268 | }
269 | 
270 | [class*='col-'] {
271 |   float: left;
272 |   padding-right: 20px;
273 | }
274 | .grid [class*='col-']:last-of-type {
275 |   padding-right: 0;
276 | }
277 | 
278 | .col-1-1 {
279 |   width: 100%;
280 | }
281 | 
282 | .col-2-3 {
283 |   width: 66.66%;
284 | }
285 | 
286 | .col-1-3 {
287 |   width: 33.33%;
288 | }
289 | 
290 | .col-1-2 {
291 |   width: 50%;
292 | }
293 | 
294 | .col-1-4 {
295 |   width: 25%;
296 | }
297 | 
298 | .col-3-4 {
299 |   width: 75%;
300 | }
301 | 
302 | .col-4-5 {
303 |   width: 80%;
304 | }
305 | 
306 | .col-1-6 {
307 |   width: 16.66%;
308 | }
309 | 
310 | .col-1-8 {
311 |   width: 12.5%;
312 | }
313 | 
314 | .grid-pad {
315 |   padding-left: 20px
316 | }
317 | 
318 | .grid-pad [class*='col-'] {
319 |   padding-top: 20px;
320 |   padding-top: 20px;
321 | }
322 | 
323 | .grid-pad [class*='col-']:last-of-type {
324 |   padding-right: 20px;
325 | }
326 | 
327 | @media (max-width: 767px) {
328 |   [class*='col-'] {
329 |     width: 100%;
330 |   }
331 | }
332 | 
333 | /* FORM
334 | *********/
335 | 
336 | form .control {
337 |   margin-bottom: 5px;
338 | }
339 | 
340 | select,
341 | input[type="text"] {
342 |   width: 100%;
343 |   display: inline-block;
344 |   height: 30px;
345 |   padding: 4px 6px;
346 |   margin-bottom: 10px;
347 |   font-size: 14px;
348 |   line-height: 20px;
349 |   color: #555555;
350 |   vertical-align: middle;
351 |   -webkit-border-radius: 4px;
352 |      -moz-border-radius: 4px;
353 |           border-radius: 4px;
354 | }
355 | 
356 | input[type="text"] {
357 |   background-color: #ddd;
358 |   border: 1px solid #ccc;
359 |   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
360 |      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
361 |           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
362 |   -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
363 |      -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
364 |        -o-transition: border linear 0.2s, box-shadow linear 0.2s;
365 |           transition: border linear 0.2s, box-shadow linear 0.2s;
366 | }
367 | 
368 | input[type="text"]:focus {
369 |   background-color: #fff;
370 |   border-color: #8D121A;
371 |   outline: 0;
372 |   -webkit-box-shadow: inset 0 1px 1px #8D121A, 0 0 8px #ED303C;
373 |      -moz-box-shadow: inset 0 1px 1px #8D121A, 0 0 8px #ED303C;
374 |           box-shadow: inset 0 1px 1px #8D121A, 0 0 8px #ED303C;
375 | }
376 | 
377 | label {
378 |   display: block;
379 |   margin-bottom: 5px;
380 | }
381 | 
382 | label.inline {
383 |   display: inline-block;
384 | }
385 | 
386 | label.checkbox {
387 |   padding: 4px 0;
388 |   margin-right: 10px;
389 |   white-space: nowrap;
390 |   vertical-align: top;
391 | }
392 | 
393 | /* CODE 
394 | **************/
395 | 
396 | pre code {
397 |   background: transparent;
398 | }


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "textillate",
 3 |   "version": "0.4.1",
 4 |   "homepage": "https://github.com/jschr/textillate",
 5 |   "authors": [
 6 |     "Jordan Schroter <jordan.schroter@gmail.com>"
 7 |   ],
 8 |   "description": "A simple plugin for CSS3 text animations",
 9 |   "main": "jquery.textillate.js",
10 |   "keywords": [
11 |     "textillate",
12 |     "css3",
13 |     "animation",
14 |     "text",
15 |     "lettering"
16 |   ],
17 |   "license": "MIT",
18 |   "ignore": [
19 |     "**/.*",
20 |     "node_modules",
21 |     "bower_components",
22 |     "test",
23 |     "tests"
24 |   ],
25 |   "dependencies": {
26 |     "jquery": ">= 1.6.2",
27 |     "letteringjs": ">= 0.6.1",
28 |     "animate.css": ">= 3.0.0"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 |   <meta charset="utf-8">
  4 |   <meta http-equiv="X-UA-Compatible" content="chrome=1">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <title>Textillate.js</title>
  7 |   <link href="assets/animate.css" rel="stylesheet">
  8 |   <link href="assets/style.css" rel="stylesheet">
  9 |   <link href='http://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css'>
 10 |   <body>
 11 |     <div class="decal"></div>
 12 | 		<div class="jumbotron">
 13 | 			<div class="container">
 14 |   		  <h1 class="glow in tlt">textillate.js</h1>
 15 |   		  <p class="tlt" data-in-effect="bounceInDown">
 16 |   		  	A simple plugin for CSS3 text animations.
 17 |   		  </p>
 18 |         <div>
 19 |           <a href="https://github.com/jschr/textillate" class="btn fade in">Download on Github</a>
 20 |         </div>
 21 |         <div>
 22 |           <a
 23 |             class="twitter-share-button"
 24 |             href="https://twitter.com/share"
 25 |             data-text="Textillate.js - A simple plugin for CSS3 text animations"
 26 |             data-url="http://textillate.js.org"
 27 |             data-via="_jschr">
 28 |             Tweet
 29 |           </a>&nbsp;&nbsp;
 30 |           <iframe
 31 |             src="https://ghbtns.com/github-btn.html?user=jschr&repo=textillate&type=star&count=true&v=2"
 32 |             frameborder="0"
 33 |             scrolling="0"
 34 |             width="100px"
 35 |             height="20px">
 36 |           </iframe>
 37 |           <iframe
 38 |             src="https://ghbtns.com/github-btn.html?user=jschr&repo=textillate&type=fork&count=true"
 39 |             frameborder="0"
 40 |             scrolling="0"
 41 |             width="90px"
 42 |             height="20px">
 43 |           </iframe>
 44 |         </div>
 45 |   		</div>
 46 |   	</div>
 47 |     <div class="decal"></div>
 48 |   	<div class="container fade in">
 49 |       <div class="about">
 50 |         <div class="grid grid-pad">
 51 |           <section class="col-1-3">
 52 |             <h2>About</h2>
 53 |             <p>Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text.</p>
 54 |           </section>
 55 |           <section class="col-1-3">
 56 |             <h2>Usage</h2>
 57 |             <p>Simply include textillate.js and it's dependencies in your project to start creating unqiue effects.</p>
 58 |           </section>
 59 |           <section class="col-1-3">
 60 |             <h2>Credits</h2>
 61 |             <p>Textillate.js is built on top of the simple, yet amazingly powerful <a href="http://daneden.me/animate">animate.css</a> and <a href="http://letteringjs.com">lettering.js</a> libraries.</p>
 62 |           </section>
 63 |         </div>
 64 |       </div>
 65 |       <!--<div class="grid grid-pad">
 66 |         <section class="col-1-1">
 67 |           <h2>Examples</h2>
 68 |           <pre><code class="xml"><span id="example">Some Text</span></code></pre>
 69 |           <pre><code class="javascript">$('#example').textillate()</code></pre>
 70 |         </section>
 71 |       </div>-->
 72 |       <div class="grid grid-pad">
 73 |         <section class="col-1-1">
 74 |             <h2>Playground</h2>
 75 |             <div class="playground grid">
 76 |               <div class="col-1-1 viewport">
 77 |                   <div class="tlt">
 78 |                     <ul class="texts" style="display: none">
 79 |                       <li data-id="wizard">Grumpy wizards make toxic brew for the evil Queen and Jack.</li>
 80 |                       <li data-id="fox">The quick brown fox jumps over the lazy dog.</li>
 81 |                     </ul>
 82 |                   </div>
 83 |               </div>
 84 |               <div class="col-1-1 controls" style="padding-right: 0">
 85 |                 <form class="grid grid-pad">
 86 |                   <div class="control col-1-2">
 87 |                     <label>In Animation</label>
 88 |                     <select data-key="effect" data-type="in"></select>
 89 |                     <select data-key="type" data-type="in">
 90 |                       <option value="">sequence</option>
 91 |                       <option value="reverse">reverse</option>
 92 |                       <option value="sync">sync</option>
 93 |                       <option value="shuffle">shuffle</option>
 94 |                     </select>
 95 |                   </div>
 96 |                   <div class="control col-1-2">
 97 |                     <label>Out Animation</label>
 98 |                     <select data-key="effect" data-type="out"></select>
 99 |                     <select data-key="type" data-type="out">
100 |                       <option value="">sequence</option>
101 |                       <option value="reverse">reverse</option>
102 |                       <option value="sync">sync</option>
103 |                       <option selected="selected" value="shuffle">shuffle</option>
104 |                     </select>
105 |                   </div>
106 |                 </form>
107 |               </div>
108 |             </div>
109 |         </section>
110 |       </div>
111 |       <div class="grid grid-pad">
112 |         <section class="col-1-1 deps">
113 |             <h2>Dependencies</h2>
114 |             <p>Textillate.js depends on the following libraries: </p>
115 |             <div>
116 |               <ul>
117 |                 <li><a href="http://jquery.com/">jQuery</a></li>
118 |                 <li><a href="http://daneden.me/animate/">animate.css</a>, by Daniel Eden</li>
119 |                 <li><a href="http://letteringjs.com/">lettering.js</a>, by Dave Rupert</li>
120 |               </ul>
121 |             </div>
122 |         </section>
123 |       </div>
124 |   	</div>
125 | 
126 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
127 | <script src="assets/jquery.fittext.js"></script>
128 | <script src="assets/jquery.lettering.js"></script>
129 | <script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
130 | <script src="jquery.textillate.js"></script>
131 | <script>hljs.initHighlightingOnLoad();</script>
132 | <script>
133 |   $(function (){
134 |     var log = function (msg) {
135 |       return function () {
136 |         if (console) console.log(msg);
137 |       }
138 |     }
139 |     $('code').each(function () {
140 |       var $this = $(this);
141 |       $this.text($this.html());
142 |     })
143 | 
144 |     var animateClasses = 'flash bounce shake tada swing wobble pulse flip flipInX flipOutX flipInY flipOutY fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight hinge rollIn rollOut';
145 | 
146 |     var $form = $('.playground form')
147 |       , $viewport = $('.playground .viewport');
148 | 
149 |     var getFormData = function () {
150 |       var data = {
151 |         loop: true,
152 |         in: { callback: log('in callback called.') },
153 |         out: { callback: log('out callback called.') }
154 |       };
155 | 
156 |       $form.find('[data-key="effect"]').each(function () {
157 |         var $this = $(this)
158 |           , key = $this.data('key')
159 |           , type = $this.data('type');
160 | 
161 |           data[type][key] = $this.val();
162 |       });
163 | 
164 |       $form.find('[data-key="type"]').each(function () {
165 |         var $this = $(this)
166 |           , key = $this.data('key')
167 |           , type = $this.data('type')
168 |           , val = $this.val();
169 | 
170 |           data[type].shuffle = (val === 'shuffle');
171 |           data[type].reverse = (val === 'reverse');
172 |           data[type].sync = (val === 'sync');
173 |       });
174 | 
175 |       return data;
176 |     };
177 | 
178 |     $.each(animateClasses.split(' '), function (i, value) {
179 |       var type = '[data-type]'
180 |         , option = '<option value="' + value + '">' + value + '</option>';
181 | 
182 |       if (/Out/.test(value) || value === 'hinge') {
183 |         type = '[data-type="out"]';
184 |       } else if (/In/.test(value)) {
185 |         type = '[data-type="in"]';
186 |       }
187 | 
188 |       if (type) {
189 |         $form.find('[data-key="effect"]' + type).append(option);
190 |       }
191 |     });
192 | 
193 |     $form.find('[data-key="effect"][data-type="in"]').val('fadeInLeftBig');
194 |     $form.find('[data-key="effect"][data-type="out"]').val('hinge');
195 | 
196 |     $('.jumbotron h1')
197 |       .fitText(0.5)
198 |       .textillate({ in: { effect: 'flipInY' }});
199 | 
200 |     $('.jumbotron p')
201 |       .fitText(3.2, { maxFontSize: 18 })
202 |       .textillate({ initialDelay: 1000, in: { delay: 3, shuffle: true } });
203 | 
204 |     setTimeout(function () {
205 |         $('.fade').addClass('in');
206 |     }, 250);
207 | 
208 |     setTimeout(function () {
209 |       $('h1.glow').removeClass('in');
210 |     }, 2000);
211 | 
212 |     var $tlt = $viewport.find('.tlt')
213 |       .on('start.tlt', log('start.tlt triggered.'))
214 |       .on('inAnimationBegin.tlt', log('inAnimationBegin.tlt triggered.'))
215 |       .on('inAnimationEnd.tlt', log('inAnimationEnd.tlt triggered.'))
216 |       .on('outAnimationBegin.tlt', log('outAnimationBegin.tlt triggered.'))
217 |       .on('outAnimationEnd.tlt', log('outAnimationEnd.tlt triggered.'))
218 |       .on('end.tlt', log('end.tlt'));
219 | 
220 |     $form.on('change', function () {
221 |       var obj = getFormData();
222 |       $tlt.textillate(obj);
223 |     }).trigger('change');
224 | 
225 |   });
226 | 
227 | 	</script>
228 |   <script>
229 |     window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));
230 |   </script>
231 |   </body>
232 | </html>
233 | 


--------------------------------------------------------------------------------
/jquery.textillate.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * textillate.js
  3 |  * http://jschr.github.com/textillate
  4 |  * MIT licensed
  5 |  *
  6 |  * Copyright (C) 2012-2013 Jordan Schroter
  7 |  */
  8 | 
  9 | (function ($) {
 10 |   "use strict";
 11 | 
 12 |   function isInEffect (effect) {
 13 |     return /In/.test(effect) || $.inArray(effect, $.fn.textillate.defaults.inEffects) >= 0;
 14 |   };
 15 | 
 16 |   function isOutEffect (effect) {
 17 |     return /Out/.test(effect) || $.inArray(effect, $.fn.textillate.defaults.outEffects) >= 0;
 18 |   };
 19 | 
 20 | 
 21 |   function stringToBoolean(str) {
 22 |     if (str !== "true" && str !== "false") return str;
 23 |     return (str === "true");
 24 |   };
 25 | 
 26 |   // custom get data api method
 27 |   function getData (node) {
 28 |     var attrs = node.attributes || []
 29 |       , data = {};
 30 | 
 31 |     if (!attrs.length) return data;
 32 | 
 33 |     $.each(attrs, function (i, attr) {
 34 |       var nodeName = attr.nodeName.replace(/delayscale/, 'delayScale');
 35 |       if (/^data-in-*/.test(nodeName)) {
 36 |         data.in = data.in || {};
 37 |         data.in[nodeName.replace(/data-in-/, '')] = stringToBoolean(attr.nodeValue);
 38 |       } else if (/^data-out-*/.test(nodeName)) {
 39 |         data.out = data.out || {};
 40 |         data.out[nodeName.replace(/data-out-/, '')] =stringToBoolean(attr.nodeValue);
 41 |       } else if (/^data-*/.test(nodeName)) {
 42 |         data[nodeName.replace(/data-/, '')] = stringToBoolean(attr.nodeValue);
 43 |       }
 44 |     })
 45 | 
 46 |     return data;
 47 |   }
 48 | 
 49 |   function shuffle (o) {
 50 |       for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
 51 |       return o;
 52 |   }
 53 | 
 54 |   function animate ($t, effect, cb) {
 55 |     $t.addClass('animated ' + effect)
 56 |       .css('visibility', 'visible')
 57 |       .show();
 58 | 
 59 |     $t.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
 60 |         $t.removeClass('animated ' + effect);
 61 |         cb && cb();
 62 |     });
 63 |   }
 64 | 
 65 |   function animateTokens ($tokens, options, cb) {
 66 |     var that = this
 67 |       , count = $tokens.length;
 68 | 
 69 |     if (!count) {
 70 |       cb && cb();
 71 |       return;
 72 |     }
 73 | 
 74 |     if (options.shuffle) $tokens = shuffle($tokens);
 75 |     if (options.reverse) $tokens = $tokens.toArray().reverse();
 76 | 
 77 |     $.each($tokens, function (i, t) {
 78 |       var $token = $(t);
 79 | 
 80 |       function complete () {
 81 |         if (isInEffect(options.effect)) {
 82 |           $token.css('visibility', 'visible');
 83 |         } else if (isOutEffect(options.effect)) {
 84 |           $token.css('visibility', 'hidden');
 85 |         }
 86 |         count -= 1;
 87 |         if (!count && cb) cb();
 88 |       }
 89 | 
 90 |       var delay = options.sync ? options.delay : options.delay * i * options.delayScale;
 91 | 
 92 |       $token.text() ?
 93 |         setTimeout(function () { animate($token, options.effect, complete) }, delay) :
 94 |         complete();
 95 |     });
 96 |   };
 97 | 
 98 |   var Textillate = function (element, options) {
 99 |     var base = this
100 |       , $element = $(element);
101 | 
102 |     base.init = function () {
103 |       base.$texts = $element.find(options.selector);
104 | 
105 |       if (!base.$texts.length) {
106 |         base.$texts = $('<ul class="texts"><li>' + $element.html() + '</li></ul>');
107 |         $element.html(base.$texts);
108 |       }
109 | 
110 |       base.$texts.hide();
111 | 
112 |       base.$current = $('<span>')
113 |         .html(base.$texts.find(':first-child').html())
114 |         .prependTo($element);
115 | 
116 |       if (isInEffect(options.in.effect)) {
117 |         base.$current.css('visibility', 'hidden');
118 |       } else if (isOutEffect(options.out.effect)) {
119 |         base.$current.css('visibility', 'visible');
120 |       }
121 | 
122 |       base.setOptions(options);
123 | 
124 |       base.timeoutRun = null;
125 | 
126 |       setTimeout(function () {
127 |         base.options.autoStart && base.start();
128 |       }, base.options.initialDelay)
129 |     };
130 | 
131 |     base.setOptions = function (options) {
132 |       base.options = options;
133 |     };
134 | 
135 |     base.triggerEvent = function (name) {
136 |       var e = $.Event(name + '.tlt');
137 |       $element.trigger(e, base);
138 |       return e;
139 |     };
140 | 
141 |     base.in = function (index, cb) {
142 |       index = index || 0;
143 | 
144 |       var $elem = base.$texts.find(':nth-child(' + ((index||0) + 1) + ')')
145 |         , options = $.extend(true, {}, base.options, $elem.length ? getData($elem[0]) : {})
146 |         , $tokens;
147 | 
148 |       $elem.addClass('current');
149 | 
150 |       base.triggerEvent('inAnimationBegin');
151 |       $element.attr('data-active', $elem.data('id'));
152 | 
153 |       base.$current
154 |         .html($elem.html())
155 |         .lettering('words');
156 | 
157 |       // split words to individual characters if token type is set to 'char'
158 |       if (base.options.type == "char") {
159 |         base.$current.find('[class^="word"]')
160 |             .css({
161 |               'display': 'inline-block',
162 |               // fix for poor ios performance
163 |               '-webkit-transform': 'translate3d(0,0,0)',
164 |               '-moz-transform': 'translate3d(0,0,0)',
165 |               '-o-transform': 'translate3d(0,0,0)',
166 |               'transform': 'translate3d(0,0,0)'
167 |             })
168 |             .each(function () { $(this).lettering() });
169 |       }
170 | 
171 |       $tokens = base.$current
172 |         .find('[class^="' + base.options.type + '"]')
173 |         .css('display', 'inline-block');
174 | 
175 |       if (isInEffect(options.in.effect)) {
176 |         $tokens.css('visibility', 'hidden');
177 |       } else if (isOutEffect(options.in.effect)) {
178 |         $tokens.css('visibility', 'visible');
179 |       }
180 | 
181 |       base.currentIndex = index;
182 | 
183 |       animateTokens($tokens, options.in, function () {
184 |         base.triggerEvent('inAnimationEnd');
185 |         if (options.in.callback) options.in.callback();
186 |         if (cb) cb(base);
187 |       });
188 |     };
189 | 
190 |     base.out = function (cb) {
191 |       var $elem = base.$texts.find(':nth-child(' + ((base.currentIndex||0) + 1) + ')')
192 |         , $tokens = base.$current.find('[class^="' + base.options.type + '"]')
193 |         , options = $.extend(true, {}, base.options, $elem.length ? getData($elem[0]) : {})
194 | 
195 |       base.triggerEvent('outAnimationBegin');
196 | 
197 |       animateTokens($tokens, options.out, function () {
198 |         $elem.removeClass('current');
199 |         base.triggerEvent('outAnimationEnd');
200 |         $element.removeAttr('data-active');
201 |         if (options.out.callback) options.out.callback();
202 |         if (cb) cb(base);
203 |       });
204 |     };
205 | 
206 |     base.start = function (index) {
207 |       setTimeout(function () {
208 |         base.triggerEvent('start');
209 | 
210 |         (function run (index) {
211 |           base.in(index, function () {
212 |             var length = base.$texts.children().length;
213 | 
214 |             index += 1;
215 | 
216 |             if (!base.options.loop && index >= length) {
217 |               if (base.options.callback) base.options.callback();
218 |               base.triggerEvent('end');
219 |             } else {
220 |               index = index % length;
221 | 
222 |               base.timeoutRun = setTimeout(function () {
223 |                 base.out(function () {
224 |                   run(index)
225 |                 });
226 |               }, base.options.minDisplayTime);
227 |             }
228 |           });
229 |         }(index || 0));
230 |       }, base.options.initialDelay);
231 |     };
232 | 
233 |     base.stop = function () {
234 |       if (base.timeoutRun) {
235 |         clearInterval(base.timeoutRun);
236 |         base.timeoutRun = null;
237 |       }
238 |     };
239 | 
240 |     base.init();
241 |   }
242 | 
243 |   $.fn.textillate = function (settings, args) {
244 |     return this.each(function () {
245 |       var $this = $(this)
246 |         , data = $this.data('textillate')
247 |         , options = $.extend(true, {}, $.fn.textillate.defaults, getData(this), typeof settings == 'object' && settings);
248 | 
249 |       if (!data) {
250 |         $this.data('textillate', (data = new Textillate(this, options)));
251 |       } else if (typeof settings == 'string') {
252 |         data[settings].apply(data, [].concat(args));
253 |       } else {
254 |         data.setOptions.call(data, options);
255 |       }
256 |     })
257 |   };
258 | 
259 |   $.fn.textillate.defaults = {
260 |     selector: '.texts',
261 |     loop: false,
262 |     minDisplayTime: 2000,
263 |     initialDelay: 0,
264 |     in: {
265 |       effect: 'fadeInLeftBig',
266 |       delayScale: 1.5,
267 |       delay: 50,
268 |       sync: false,
269 |       reverse: false,
270 |       shuffle: false,
271 |       callback: function () {}
272 |     },
273 |     out: {
274 |       effect: 'hinge',
275 |       delayScale: 1.5,
276 |       delay: 50,
277 |       sync: false,
278 |       reverse: false,
279 |       shuffle: false,
280 |       callback: function () {}
281 |     },
282 |     autoStart: true,
283 |     inEffects: [],
284 |     outEffects: [ 'hinge' ],
285 |     callback: function () {},
286 |     type: 'char'
287 |   };
288 | 
289 | }(jQuery));
290 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "textillate",
 3 |   "version": "0.4.1",
 4 |   "homepage": "https://github.com/jschr/textillate",
 5 |   "authors": [
 6 |     "Jordan Schroter <jordan.schroter@gmail.com>"
 7 |   ],
 8 |   "description": "A simple plugin for CSS3 text animations",
 9 |   "main": "jquery.textillate.js",
10 |   "keywords": [
11 |     "textillate",
12 |     "css3",
13 |     "animation",
14 |     "text",
15 |     "lettering"
16 |   ],
17 |   "license": "MIT",
18 |   "ignore": [
19 |     "**/.*",
20 |     "node_modules",
21 |     "bower_components",
22 |     "test",
23 |     "tests"
24 |   ],
25 |   "dependencies": {
26 |     "jquery": ">= 1.6.2",
27 |     "letteringjs": ">= 0.6.1",
28 |     "animate.css": ">= 3.0.0"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------