├── .gitignore ├── package.json ├── readme.md ├── src ├── app.wpy ├── assets │ ├── animate.wxss │ └── img │ │ ├── ic-error.png │ │ ├── index_bg.jpg │ │ ├── log.png │ │ └── tabbar │ │ ├── tabBar_ic_index.png │ │ ├── tabBar_ic_index_active.png │ │ ├── tabBar_ic_translate.png │ │ └── tabBar_ic_translate_active.png ├── components │ ├── backTop.wpy │ ├── dialog.wpy │ ├── discContainer.wpy │ ├── firstScreen.wpy │ ├── interfaceContent.wpy │ └── sound.wpy ├── index.template.html ├── pages │ ├── index.wpy │ └── translate.wpy └── utils │ ├── Base64.js │ ├── MD5.js │ ├── api.js │ ├── av-weapp-min.js │ └── config.js └── wepy.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/* 2 | dist/* 3 | .idea/* 4 | /.editorconfig 5 | /.eslintignore 6 | /.npmignore 7 | /.wepycache 8 | /.wepyignore 9 | /package-lock.json 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wx_iciba", 3 | "version": "1.2.8", 4 | "description": "", 5 | "main": "dist/app.js", 6 | "scripts": { 7 | "dev": "wepy build --watch", 8 | "build": "cross-env NODE_ENV=production wepy build --no-cache", 9 | "test": "echo \"Error: no test specified\" && exit 1" 10 | }, 11 | "author": "", 12 | "license": "MIT", 13 | "dependencies": { 14 | "promise-polyfill": "^7.0.2", 15 | "wepy": "^1.6.0", 16 | "wepy-async-function": "^1.4.4", 17 | "wepy-com-toast": "^1.0.2", 18 | "wepy-compiler-sass": "^1.3.7" 19 | }, 20 | "devDependencies": { 21 | "babel-eslint": "^7.2.1", 22 | "babel-plugin-transform-class-properties": "^6.24.1", 23 | "babel-plugin-transform-decorators-legacy": "^1.3.4", 24 | "babel-plugin-transform-export-extensions": "^6.22.0", 25 | "babel-plugin-transform-object-rest-spread": "^6.26.0", 26 | "babel-preset-env": "^1.6.1", 27 | "cross-env": "^5.1.3", 28 | "eslint": "^3.18.0", 29 | "eslint-config-standard": "^7.1.0", 30 | "eslint-friendly-formatter": "^2.0.7", 31 | "eslint-plugin-html": "^2.0.1", 32 | "eslint-plugin-promise": "^3.5.0", 33 | "eslint-plugin-standard": "^2.0.1", 34 | "wepy-compiler-babel": "^1.5.1", 35 | "wepy-compiler-less": "^1.3.10", 36 | "wepy-compiler-sass": "^1.3.7", 37 | "wepy-eslint": "^1.5.3" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ## wechat-weapp-iciba 2 | 3 | >微信小程序基于wepy框架开发-金山词霸 4 | 5 | ### 项目运行与预览 6 | 7 | #### 项目运行 8 | 9 | //克隆本项目 10 | git clone https://github.com/Anonlyy/wx_iciba.git 11 | //进入目录并安装依赖包 12 | cd wx_iciba 13 | npm install 14 | //启动项目(生成dist文件夹) 15 | npm run dev 16 | 17 | #### 项目预览 18 | 19 | 1. 下载微信开发工具 20 | 2. 导入项目(只选中dist文件夹,而不是整个项目目录) 21 | 3. [配置微信开发工具](https://tencent.github.io/wepy/document.html#/?id=%e5%8f%82%e8%80%83%e5%bb%ba%e8%ae%ae)(**非常重要,不配置会导致报错**) 22 | ![](http://p53ff6x0c.bkt.clouddn.com/18-3-7/62394854.jpg) 23 | 4. 预览项目 24 | 25 | 26 | ### 效果预览 27 | #### 查词页 28 | 29 | ![](http://p53ff6x0c.bkt.clouddn.com/18-3-8/16774431.jpg) 30 | 31 | #### 翻译页 32 | 33 | ![](http://p53ff6x0c.bkt.clouddn.com/18-3-8/13251170.jpg) 34 | 35 | 36 | 37 | ### 感谢与支持 38 | - **wepy**:https://tencent.github.io/wepy/ 39 | - **金山词典API**:https://github.com/jokermonn/-Api/blob/master/KingsoftDic.md 40 | - **有道智云翻译 API**:http://ai.youdao.com/docs/doc-trans-api.s#p01 41 | - **百度文字识别OCR API**:https://cloud.baidu.com/doc/OCR/OCR-API.html#.E8.AF.B7.E6.B1.82.E8.AF.B4.E6.98.8E 42 | - **每日一句API**:http://open.iciba.com/?c=api 43 | 44 | 45 | 46 | ### 开发中的功能 47 | - 每日一句 48 | - 用户上传图片翻译功能 49 | - 界面优化 50 | 51 | 52 | 53 | 54 | --- 55 | 56 | ### 更新日志 57 | 58 | - Jan 30, 2018 59 | - 完成主页基本样式布局 60 | - 实现查词联想功能 61 | - 完成翻译页面基本样式布局 62 | - Feb 5, 2018 63 | - 完成释义具体数据的渲染 64 | - 完成音频组件播放功能 65 | - 增加折叠面板展开特效 66 | - 增加回到顶部组件,并增加动画 67 | - Feb 12, 2018 68 | - 完善诸多细节,将主页部分代码进行抽离,形成各自的组件 69 | - 增加再次修改单词请求释义的情况,并新增释义组件 70 | - Mar 2, 2018 71 | - 翻译界面的进一步样式编写,以及翻译API更改(有道) 72 | - 完成文本翻译功能 73 | - Mar 6, 2018 74 | - 修复MD5加密问题导致的API请求参数错误的bug问题 75 | - 全局增加请求错误和加载中的toast提示 76 | - 增加选择源翻译语言和翻译后语言的功能 77 | - Mar 7, 2018 78 | - 增加上传图片LeanCloud存储并返回网络图片url功能 79 | - 增加上传图片文字识别功能,识别成功返回识别结果 80 | - 显示识别结果并翻译的功能,还可以复制识别结果 81 | - Mar 8, 2018 82 | - 完成每日一句的功能 83 | 84 | - Mar 9, 2018 85 | - 完善每日一句的显示和隐藏效果 86 | - 修复查词再次搜索时输入框不更新的bug问题 87 | 88 | - 正在更新中.... 89 | -------------------------------------------------------------------------------- /src/app.wpy: -------------------------------------------------------------------------------- 1 | 48 | 49 | 111 | -------------------------------------------------------------------------------- /src/assets/animate.wxss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*! 3 | Animate.css - http://daneden.me/animate 4 | Licensed under the MIT license 5 | 6 | Copyright (c) 2013 Daniel 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 | .animated { 15 | -webkit-animation-duration:.4s; 16 | animation-duration: .4s; 17 | -webkit-animation-fill-mode: both; 18 | animation-fill-mode: both 19 | } 20 | 21 | .animated.infinite { 22 | -webkit-animation-iteration-count: infinite; 23 | animation-iteration-count: infinite 24 | } 25 | 26 | .animated.hinge { 27 | -webkit-animation-duration: 2s; 28 | animation-duration: 2s 29 | } 30 | 31 | @-webkit-keyframes bounce { 32 | 0%, 100%, 20%, 50%, 80% { 33 | -webkit-transform: translateY(0); 34 | transform: translateY(0) 35 | } 36 | 40% { 37 | -webkit-transform: translateY(-30px); 38 | transform: translateY(-30px) 39 | } 40 | 60% { 41 | -webkit-transform: translateY(-15px); 42 | transform: translateY(-15px) 43 | } 44 | } 45 | 46 | @keyframes bounce { 47 | 0%, 100%, 20%, 50%, 80% { 48 | -webkit-transform: translateY(0); 49 | -ms-transform: translateY(0); 50 | transform: translateY(0) 51 | } 52 | 40% { 53 | -webkit-transform: translateY(-30px); 54 | -ms-transform: translateY(-30px); 55 | transform: translateY(-30px) 56 | } 57 | 60% { 58 | -webkit-transform: translateY(-15px); 59 | -ms-transform: translateY(-15px); 60 | transform: translateY(-15px) 61 | } 62 | } 63 | 64 | .bounce { 65 | -webkit-animation-name: bounce; 66 | animation-name: bounce 67 | } 68 | 69 | @-webkit-keyframes flash { 70 | 0%, 100%, 50% { 71 | opacity: 1 72 | } 73 | 25%, 75% { 74 | opacity: 0 75 | } 76 | } 77 | 78 | @keyframes flash { 79 | 0%, 100%, 50% { 80 | opacity: 1 81 | } 82 | 25%, 75% { 83 | opacity: 0 84 | } 85 | } 86 | 87 | .flash { 88 | -webkit-animation-name: flash; 89 | animation-name: flash 90 | } 91 | 92 | @-webkit-keyframes pulse { 93 | 0% { 94 | -webkit-transform: scale(1); 95 | transform: scale(1) 96 | } 97 | 50% { 98 | -webkit-transform: scale(1.1); 99 | transform: scale(1.1) 100 | } 101 | 100% { 102 | -webkit-transform: scale(1); 103 | transform: scale(1) 104 | } 105 | } 106 | 107 | @keyframes pulse { 108 | 0% { 109 | -webkit-transform: scale(1); 110 | -ms-transform: scale(1); 111 | transform: scale(1) 112 | } 113 | 50% { 114 | -webkit-transform: scale(1.1); 115 | -ms-transform: scale(1.1); 116 | transform: scale(1.1) 117 | } 118 | 100% { 119 | -webkit-transform: scale(1); 120 | -ms-transform: scale(1); 121 | transform: scale(1) 122 | } 123 | } 124 | 125 | .pulse { 126 | -webkit-animation-name: pulse; 127 | animation-name: pulse 128 | } 129 | 130 | @-webkit-keyframes rubberBand { 131 | 0% { 132 | -webkit-transform: scale(1); 133 | transform: scale(1) 134 | } 135 | 30% { 136 | -webkit-transform: scaleX(1.25) scaleY(0.75); 137 | transform: scaleX(1.25) scaleY(0.75) 138 | } 139 | 40% { 140 | -webkit-transform: scaleX(0.75) scaleY(1.25); 141 | transform: scaleX(0.75) scaleY(1.25) 142 | } 143 | 60% { 144 | -webkit-transform: scaleX(1.15) scaleY(0.85); 145 | transform: scaleX(1.15) scaleY(0.85) 146 | } 147 | 100% { 148 | -webkit-transform: scale(1); 149 | transform: scale(1) 150 | } 151 | } 152 | 153 | @keyframes rubberBand { 154 | 0% { 155 | -webkit-transform: scale(1); 156 | -ms-transform: scale(1); 157 | transform: scale(1) 158 | } 159 | 30% { 160 | -webkit-transform: scaleX(1.25) scaleY(0.75); 161 | -ms-transform: scaleX(1.25) scaleY(0.75); 162 | transform: scaleX(1.25) scaleY(0.75) 163 | } 164 | 40% { 165 | -webkit-transform: scaleX(0.75) scaleY(1.25); 166 | -ms-transform: scaleX(0.75) scaleY(1.25); 167 | transform: scaleX(0.75) scaleY(1.25) 168 | } 169 | 60% { 170 | -webkit-transform: scaleX(1.15) scaleY(0.85); 171 | -ms-transform: scaleX(1.15) scaleY(0.85); 172 | transform: scaleX(1.15) scaleY(0.85) 173 | } 174 | 100% { 175 | -webkit-transform: scale(1); 176 | -ms-transform: scale(1); 177 | transform: scale(1) 178 | } 179 | } 180 | 181 | .rubberBand { 182 | -webkit-animation-name: rubberBand; 183 | animation-name: rubberBand 184 | } 185 | 186 | @-webkit-keyframes shake { 187 | 0%, 100% { 188 | -webkit-transform: translateX(0); 189 | transform: translateX(0) 190 | } 191 | 10%, 30%, 50%, 70%, 90% { 192 | -webkit-transform: translateX(-10px); 193 | transform: translateX(-10px) 194 | } 195 | 20%, 40%, 60%, 80% { 196 | -webkit-transform: translateX(10px); 197 | transform: translateX(10px) 198 | } 199 | } 200 | 201 | @keyframes shake { 202 | 0%, 100% { 203 | -webkit-transform: translateX(0); 204 | -ms-transform: translateX(0); 205 | transform: translateX(0) 206 | } 207 | 10%, 30%, 50%, 70%, 90% { 208 | -webkit-transform: translateX(-10px); 209 | -ms-transform: translateX(-10px); 210 | transform: translateX(-10px) 211 | } 212 | 20%, 40%, 60%, 80% { 213 | -webkit-transform: translateX(10px); 214 | -ms-transform: translateX(10px); 215 | transform: translateX(10px) 216 | } 217 | } 218 | 219 | .shake { 220 | -webkit-animation-name: shake; 221 | animation-name: shake 222 | } 223 | 224 | @-webkit-keyframes swing { 225 | 20% { 226 | -webkit-transform: rotate(15deg); 227 | transform: rotate(15deg) 228 | } 229 | 40% { 230 | -webkit-transform: rotate(-10deg); 231 | transform: rotate(-10deg) 232 | } 233 | 60% { 234 | -webkit-transform: rotate(5deg); 235 | transform: rotate(5deg) 236 | } 237 | 80% { 238 | -webkit-transform: rotate(-5deg); 239 | transform: rotate(-5deg) 240 | } 241 | 100% { 242 | -webkit-transform: rotate(0deg); 243 | transform: rotate(0deg) 244 | } 245 | } 246 | 247 | @keyframes swing { 248 | 20% { 249 | -webkit-transform: rotate(15deg); 250 | -ms-transform: rotate(15deg); 251 | transform: rotate(15deg) 252 | } 253 | 40% { 254 | -webkit-transform: rotate(-10deg); 255 | -ms-transform: rotate(-10deg); 256 | transform: rotate(-10deg) 257 | } 258 | 60% { 259 | -webkit-transform: rotate(5deg); 260 | -ms-transform: rotate(5deg); 261 | transform: rotate(5deg) 262 | } 263 | 80% { 264 | -webkit-transform: rotate(-5deg); 265 | -ms-transform: rotate(-5deg); 266 | transform: rotate(-5deg) 267 | } 268 | 100% { 269 | -webkit-transform: rotate(0deg); 270 | -ms-transform: rotate(0deg); 271 | transform: rotate(0deg) 272 | } 273 | } 274 | 275 | .swing { 276 | -webkit-transform-origin: top center; 277 | -ms-transform-origin: top center; 278 | transform-origin: top center; 279 | -webkit-animation-name: swing; 280 | animation-name: swing 281 | } 282 | 283 | @-webkit-keyframes tada { 284 | 0% { 285 | -webkit-transform: scale(1); 286 | transform: scale(1) 287 | } 288 | 10%, 20% { 289 | -webkit-transform: scale(0.9) rotate(-3deg); 290 | transform: scale(0.9) rotate(-3deg) 291 | } 292 | 30%, 50%, 70%, 90% { 293 | -webkit-transform: scale(1.1) rotate(3deg); 294 | transform: scale(1.1) rotate(3deg) 295 | } 296 | 40%, 60%, 80% { 297 | -webkit-transform: scale(1.1) rotate(-3deg); 298 | transform: scale(1.1) rotate(-3deg) 299 | } 300 | 100% { 301 | -webkit-transform: scale(1) rotate(0); 302 | transform: scale(1) rotate(0) 303 | } 304 | } 305 | 306 | @keyframes tada { 307 | 0% { 308 | -webkit-transform: scale(1); 309 | -ms-transform: scale(1); 310 | transform: scale(1) 311 | } 312 | 10%, 20% { 313 | -webkit-transform: scale(0.9) rotate(-3deg); 314 | -ms-transform: scale(0.9) rotate(-3deg); 315 | transform: scale(0.9) rotate(-3deg) 316 | } 317 | 30%, 50%, 70%, 90% { 318 | -webkit-transform: scale(1.1) rotate(3deg); 319 | -ms-transform: scale(1.1) rotate(3deg); 320 | transform: scale(1.1) rotate(3deg) 321 | } 322 | 40%, 60%, 80% { 323 | -webkit-transform: scale(1.1) rotate(-3deg); 324 | -ms-transform: scale(1.1) rotate(-3deg); 325 | transform: scale(1.1) rotate(-3deg) 326 | } 327 | 100% { 328 | -webkit-transform: scale(1) rotate(0); 329 | -ms-transform: scale(1) rotate(0); 330 | transform: scale(1) rotate(0) 331 | } 332 | } 333 | 334 | .tada { 335 | -webkit-animation-name: tada; 336 | animation-name: tada 337 | } 338 | 339 | @-webkit-keyframes wobble { 340 | 0% { 341 | -webkit-transform: translateX(0%); 342 | transform: translateX(0%) 343 | } 344 | 15% { 345 | -webkit-transform: translateX(-25%) rotate(-5deg); 346 | transform: translateX(-25%) rotate(-5deg) 347 | } 348 | 30% { 349 | -webkit-transform: translateX(20%) rotate(3deg); 350 | transform: translateX(20%) rotate(3deg) 351 | } 352 | 45% { 353 | -webkit-transform: translateX(-15%) rotate(-3deg); 354 | transform: translateX(-15%) rotate(-3deg) 355 | } 356 | 60% { 357 | -webkit-transform: translateX(10%) rotate(2deg); 358 | transform: translateX(10%) rotate(2deg) 359 | } 360 | 75% { 361 | -webkit-transform: translateX(-5%) rotate(-1deg); 362 | transform: translateX(-5%) rotate(-1deg) 363 | } 364 | 100% { 365 | -webkit-transform: translateX(0%); 366 | transform: translateX(0%) 367 | } 368 | } 369 | 370 | @keyframes wobble { 371 | 0% { 372 | -webkit-transform: translateX(0%); 373 | -ms-transform: translateX(0%); 374 | transform: translateX(0%) 375 | } 376 | 15% { 377 | -webkit-transform: translateX(-25%) rotate(-5deg); 378 | -ms-transform: translateX(-25%) rotate(-5deg); 379 | transform: translateX(-25%) rotate(-5deg) 380 | } 381 | 30% { 382 | -webkit-transform: translateX(20%) rotate(3deg); 383 | -ms-transform: translateX(20%) rotate(3deg); 384 | transform: translateX(20%) rotate(3deg) 385 | } 386 | 45% { 387 | -webkit-transform: translateX(-15%) rotate(-3deg); 388 | -ms-transform: translateX(-15%) rotate(-3deg); 389 | transform: translateX(-15%) rotate(-3deg) 390 | } 391 | 60% { 392 | -webkit-transform: translateX(10%) rotate(2deg); 393 | -ms-transform: translateX(10%) rotate(2deg); 394 | transform: translateX(10%) rotate(2deg) 395 | } 396 | 75% { 397 | -webkit-transform: translateX(-5%) rotate(-1deg); 398 | -ms-transform: translateX(-5%) rotate(-1deg); 399 | transform: translateX(-5%) rotate(-1deg) 400 | } 401 | 100% { 402 | -webkit-transform: translateX(0%); 403 | -ms-transform: translateX(0%); 404 | transform: translateX(0%) 405 | } 406 | } 407 | 408 | .wobble { 409 | -webkit-animation-name: wobble; 410 | animation-name: wobble 411 | } 412 | 413 | @-webkit-keyframes bounceIn { 414 | 0% { 415 | opacity: 0; 416 | -webkit-transform: scale(.3); 417 | transform: scale(.3) 418 | } 419 | 50% { 420 | opacity: 1; 421 | -webkit-transform: scale(1.05); 422 | transform: scale(1.05) 423 | } 424 | 70% { 425 | -webkit-transform: scale(.9); 426 | transform: scale(.9) 427 | } 428 | 100% { 429 | opacity: 1; 430 | -webkit-transform: scale(1); 431 | transform: scale(1) 432 | } 433 | } 434 | 435 | @keyframes bounceIn { 436 | 0% { 437 | opacity: 0; 438 | -webkit-transform: scale(.3); 439 | -ms-transform: scale(.3); 440 | transform: scale(.3) 441 | } 442 | 50% { 443 | opacity: 1; 444 | -webkit-transform: scale(1.05); 445 | -ms-transform: scale(1.05); 446 | transform: scale(1.05) 447 | } 448 | 70% { 449 | -webkit-transform: scale(.9); 450 | -ms-transform: scale(.9); 451 | transform: scale(.9) 452 | } 453 | 100% { 454 | opacity: 1; 455 | -webkit-transform: scale(1); 456 | -ms-transform: scale(1); 457 | transform: scale(1) 458 | } 459 | } 460 | 461 | .bounceIn { 462 | -webkit-animation-name: bounceIn; 463 | animation-name: bounceIn 464 | } 465 | 466 | @-webkit-keyframes bounceInDown { 467 | 0% { 468 | opacity: 0; 469 | -webkit-transform: translateY(-2000px); 470 | transform: translateY(-2000px) 471 | } 472 | 60% { 473 | opacity: 1; 474 | -webkit-transform: translateY(30px); 475 | transform: translateY(30px) 476 | } 477 | 80% { 478 | -webkit-transform: translateY(-10px); 479 | transform: translateY(-10px) 480 | } 481 | 100% { 482 | -webkit-transform: translateY(0); 483 | transform: translateY(0) 484 | } 485 | } 486 | 487 | @keyframes bounceInDown { 488 | 0% { 489 | opacity: 0; 490 | -webkit-transform: translateY(-2000px); 491 | -ms-transform: translateY(-2000px); 492 | transform: translateY(-2000px) 493 | } 494 | 60% { 495 | opacity: 1; 496 | -webkit-transform: translateY(30px); 497 | -ms-transform: translateY(30px); 498 | transform: translateY(30px) 499 | } 500 | 80% { 501 | -webkit-transform: translateY(-10px); 502 | -ms-transform: translateY(-10px); 503 | transform: translateY(-10px) 504 | } 505 | 100% { 506 | -webkit-transform: translateY(0); 507 | -ms-transform: translateY(0); 508 | transform: translateY(0) 509 | } 510 | } 511 | 512 | .bounceInDown { 513 | -webkit-animation-name: bounceInDown; 514 | animation-name: bounceInDown 515 | } 516 | 517 | @-webkit-keyframes bounceInLeft { 518 | 0% { 519 | opacity: 0; 520 | -webkit-transform: translateX(-2000px); 521 | transform: translateX(-2000px) 522 | } 523 | 60% { 524 | opacity: 1; 525 | -webkit-transform: translateX(30px); 526 | transform: translateX(30px) 527 | } 528 | 80% { 529 | -webkit-transform: translateX(-10px); 530 | transform: translateX(-10px) 531 | } 532 | 100% { 533 | -webkit-transform: translateX(0); 534 | transform: translateX(0) 535 | } 536 | } 537 | 538 | @keyframes bounceInLeft { 539 | 0% { 540 | opacity: 0; 541 | -webkit-transform: translateX(-2000px); 542 | -ms-transform: translateX(-2000px); 543 | transform: translateX(-2000px) 544 | } 545 | 60% { 546 | opacity: 1; 547 | -webkit-transform: translateX(30px); 548 | -ms-transform: translateX(30px); 549 | transform: translateX(30px) 550 | } 551 | 80% { 552 | -webkit-transform: translateX(-10px); 553 | -ms-transform: translateX(-10px); 554 | transform: translateX(-10px) 555 | } 556 | 100% { 557 | -webkit-transform: translateX(0); 558 | -ms-transform: translateX(0); 559 | transform: translateX(0) 560 | } 561 | } 562 | 563 | .bounceInLeft { 564 | -webkit-animation-name: bounceInLeft; 565 | animation-name: bounceInLeft 566 | } 567 | 568 | @-webkit-keyframes bounceInRight { 569 | 0% { 570 | opacity: 0; 571 | -webkit-transform: translateX(2000px); 572 | transform: translateX(2000px) 573 | } 574 | 60% { 575 | opacity: 1; 576 | -webkit-transform: translateX(-30px); 577 | transform: translateX(-30px) 578 | } 579 | 80% { 580 | -webkit-transform: translateX(10px); 581 | transform: translateX(10px) 582 | } 583 | 100% { 584 | -webkit-transform: translateX(0); 585 | transform: translateX(0) 586 | } 587 | } 588 | 589 | @keyframes bounceInRight { 590 | 0% { 591 | opacity: 0; 592 | -webkit-transform: translateX(2000px); 593 | -ms-transform: translateX(2000px); 594 | transform: translateX(2000px) 595 | } 596 | 60% { 597 | opacity: 1; 598 | -webkit-transform: translateX(-30px); 599 | -ms-transform: translateX(-30px); 600 | transform: translateX(-30px) 601 | } 602 | 80% { 603 | -webkit-transform: translateX(10px); 604 | -ms-transform: translateX(10px); 605 | transform: translateX(10px) 606 | } 607 | 100% { 608 | -webkit-transform: translateX(0); 609 | -ms-transform: translateX(0); 610 | transform: translateX(0) 611 | } 612 | } 613 | 614 | .bounceInRight { 615 | -webkit-animation-name: bounceInRight; 616 | animation-name: bounceInRight 617 | } 618 | 619 | @-webkit-keyframes bounceInUp { 620 | 0% { 621 | opacity: 0; 622 | -webkit-transform: translateY(2000px); 623 | transform: translateY(2000px) 624 | } 625 | 60% { 626 | opacity: 1; 627 | -webkit-transform: translateY(-30px); 628 | transform: translateY(-30px) 629 | } 630 | 80% { 631 | -webkit-transform: translateY(10px); 632 | transform: translateY(10px) 633 | } 634 | 100% { 635 | -webkit-transform: translateY(0); 636 | transform: translateY(0) 637 | } 638 | } 639 | 640 | @keyframes bounceInUp { 641 | 0% { 642 | opacity: 0; 643 | -webkit-transform: translateY(2000px); 644 | -ms-transform: translateY(2000px); 645 | transform: translateY(2000px) 646 | } 647 | 60% { 648 | opacity: 1; 649 | -webkit-transform: translateY(-30px); 650 | -ms-transform: translateY(-30px); 651 | transform: translateY(-30px) 652 | } 653 | 80% { 654 | -webkit-transform: translateY(10px); 655 | -ms-transform: translateY(10px); 656 | transform: translateY(10px) 657 | } 658 | 100% { 659 | -webkit-transform: translateY(0); 660 | -ms-transform: translateY(0); 661 | transform: translateY(0) 662 | } 663 | } 664 | 665 | .bounceInUp { 666 | -webkit-animation-name: bounceInUp; 667 | animation-name: bounceInUp 668 | } 669 | 670 | @-webkit-keyframes bounceOut { 671 | 0% { 672 | -webkit-transform: scale(1); 673 | transform: scale(1) 674 | } 675 | 25% { 676 | -webkit-transform: scale(.95); 677 | transform: scale(.95) 678 | } 679 | 50% { 680 | opacity: 1; 681 | -webkit-transform: scale(1.1); 682 | transform: scale(1.1) 683 | } 684 | 100% { 685 | opacity: 0; 686 | -webkit-transform: scale(.3); 687 | transform: scale(.3) 688 | } 689 | } 690 | 691 | @keyframes bounceOut { 692 | 0% { 693 | -webkit-transform: scale(1); 694 | -ms-transform: scale(1); 695 | transform: scale(1) 696 | } 697 | 25% { 698 | -webkit-transform: scale(.95); 699 | -ms-transform: scale(.95); 700 | transform: scale(.95) 701 | } 702 | 50% { 703 | opacity: 1; 704 | -webkit-transform: scale(1.1); 705 | -ms-transform: scale(1.1); 706 | transform: scale(1.1) 707 | } 708 | 100% { 709 | opacity: 0; 710 | -webkit-transform: scale(.3); 711 | -ms-transform: scale(.3); 712 | transform: scale(.3) 713 | } 714 | } 715 | 716 | .bounceOut { 717 | -webkit-animation-name: bounceOut; 718 | animation-name: bounceOut 719 | } 720 | 721 | @-webkit-keyframes bounceOutDown { 722 | 0% { 723 | -webkit-transform: translateY(0); 724 | transform: translateY(0) 725 | } 726 | 20% { 727 | opacity: 1; 728 | -webkit-transform: translateY(-20px); 729 | transform: translateY(-20px) 730 | } 731 | 100% { 732 | opacity: 0; 733 | -webkit-transform: translateY(2000px); 734 | transform: translateY(2000px) 735 | } 736 | } 737 | 738 | @keyframes bounceOutDown { 739 | 0% { 740 | -webkit-transform: translateY(0); 741 | -ms-transform: translateY(0); 742 | transform: translateY(0) 743 | } 744 | 20% { 745 | opacity: 1; 746 | -webkit-transform: translateY(-20px); 747 | -ms-transform: translateY(-20px); 748 | transform: translateY(-20px) 749 | } 750 | 100% { 751 | opacity: 0; 752 | -webkit-transform: translateY(2000px); 753 | -ms-transform: translateY(2000px); 754 | transform: translateY(2000px) 755 | } 756 | } 757 | 758 | .bounceOutDown { 759 | -webkit-animation-name: bounceOutDown; 760 | animation-name: bounceOutDown 761 | } 762 | 763 | @-webkit-keyframes bounceOutLeft { 764 | 0% { 765 | -webkit-transform: translateX(0); 766 | transform: translateX(0) 767 | } 768 | 20% { 769 | opacity: 1; 770 | -webkit-transform: translateX(20px); 771 | transform: translateX(20px) 772 | } 773 | 100% { 774 | opacity: 0; 775 | -webkit-transform: translateX(-2000px); 776 | transform: translateX(-2000px) 777 | } 778 | } 779 | 780 | @keyframes bounceOutLeft { 781 | 0% { 782 | -webkit-transform: translateX(0); 783 | -ms-transform: translateX(0); 784 | transform: translateX(0) 785 | } 786 | 20% { 787 | opacity: 1; 788 | -webkit-transform: translateX(20px); 789 | -ms-transform: translateX(20px); 790 | transform: translateX(20px) 791 | } 792 | 100% { 793 | opacity: 0; 794 | -webkit-transform: translateX(-2000px); 795 | -ms-transform: translateX(-2000px); 796 | transform: translateX(-2000px) 797 | } 798 | } 799 | 800 | .bounceOutLeft { 801 | -webkit-animation-name: bounceOutLeft; 802 | animation-name: bounceOutLeft 803 | } 804 | 805 | @-webkit-keyframes bounceOutRight { 806 | 0% { 807 | -webkit-transform: translateX(0); 808 | transform: translateX(0) 809 | } 810 | 20% { 811 | opacity: 1; 812 | -webkit-transform: translateX(-20px); 813 | transform: translateX(-20px) 814 | } 815 | 100% { 816 | opacity: 0; 817 | -webkit-transform: translateX(2000px); 818 | transform: translateX(2000px) 819 | } 820 | } 821 | 822 | @keyframes bounceOutRight { 823 | 0% { 824 | -webkit-transform: translateX(0); 825 | -ms-transform: translateX(0); 826 | transform: translateX(0) 827 | } 828 | 20% { 829 | opacity: 1; 830 | -webkit-transform: translateX(-20px); 831 | -ms-transform: translateX(-20px); 832 | transform: translateX(-20px) 833 | } 834 | 100% { 835 | opacity: 0; 836 | -webkit-transform: translateX(2000px); 837 | -ms-transform: translateX(2000px); 838 | transform: translateX(2000px) 839 | } 840 | } 841 | 842 | .bounceOutRight { 843 | -webkit-animation-name: bounceOutRight; 844 | animation-name: bounceOutRight 845 | } 846 | 847 | @-webkit-keyframes bounceOutUp { 848 | 0% { 849 | -webkit-transform: translateY(0); 850 | transform: translateY(0) 851 | } 852 | 20% { 853 | opacity: 1; 854 | -webkit-transform: translateY(20px); 855 | transform: translateY(20px) 856 | } 857 | 100% { 858 | opacity: 0; 859 | -webkit-transform: translateY(-2000px); 860 | transform: translateY(-2000px) 861 | } 862 | } 863 | 864 | @keyframes bounceOutUp { 865 | 0% { 866 | -webkit-transform: translateY(0); 867 | -ms-transform: translateY(0); 868 | transform: translateY(0) 869 | } 870 | 20% { 871 | opacity: 1; 872 | -webkit-transform: translateY(20px); 873 | -ms-transform: translateY(20px); 874 | transform: translateY(20px) 875 | } 876 | 100% { 877 | opacity: 0; 878 | -webkit-transform: translateY(-2000px); 879 | -ms-transform: translateY(-2000px); 880 | transform: translateY(-2000px) 881 | } 882 | } 883 | 884 | .bounceOutUp { 885 | -webkit-animation-name: bounceOutUp; 886 | animation-name: bounceOutUp 887 | } 888 | 889 | @-webkit-keyframes fadeIn { 890 | 0% { 891 | opacity: 0 892 | } 893 | 100% { 894 | opacity: 1 895 | } 896 | } 897 | 898 | @keyframes fadeIn { 899 | 0% { 900 | opacity: 0 901 | } 902 | 100% { 903 | opacity: 1 904 | } 905 | } 906 | 907 | .fadeIn { 908 | -webkit-animation-name: fadeIn; 909 | animation-name: fadeIn 910 | } 911 | 912 | @-webkit-keyframes fadeInDown { 913 | 0% { 914 | opacity: 0; 915 | -webkit-transform: translateY(-20px); 916 | transform: translateY(-20px) 917 | } 918 | 100% { 919 | opacity: 1; 920 | -webkit-transform: translateY(0); 921 | transform: translateY(0) 922 | } 923 | } 924 | 925 | @keyframes fadeInDown { 926 | 0% { 927 | opacity: 0; 928 | -webkit-transform: translateY(-20px); 929 | -ms-transform: translateY(-20px); 930 | transform: translateY(-20px) 931 | } 932 | 100% { 933 | opacity: 1; 934 | -webkit-transform: translateY(0); 935 | -ms-transform: translateY(0); 936 | transform: translateY(0) 937 | } 938 | } 939 | 940 | .fadeInDown { 941 | -webkit-animation-name: fadeInDown; 942 | animation-name: fadeInDown 943 | } 944 | 945 | @-webkit-keyframes fadeInDownBig { 946 | 0% { 947 | opacity: 0; 948 | -webkit-transform: translateY(-2000px); 949 | transform: translateY(-2000px) 950 | } 951 | 100% { 952 | opacity: 1; 953 | -webkit-transform: translateY(0); 954 | transform: translateY(0) 955 | } 956 | } 957 | 958 | @keyframes fadeInDownBig { 959 | 0% { 960 | opacity: 0; 961 | -webkit-transform: translateY(-2000px); 962 | -ms-transform: translateY(-2000px); 963 | transform: translateY(-2000px) 964 | } 965 | 100% { 966 | opacity: 1; 967 | -webkit-transform: translateY(0); 968 | -ms-transform: translateY(0); 969 | transform: translateY(0) 970 | } 971 | } 972 | 973 | .fadeInDownBig { 974 | -webkit-animation-name: fadeInDownBig; 975 | animation-name: fadeInDownBig 976 | } 977 | 978 | @-webkit-keyframes fadeInLeft { 979 | 0% { 980 | opacity: 0; 981 | -webkit-transform: translateX(-20px); 982 | transform: translateX(-20px) 983 | } 984 | 100% { 985 | opacity: 1; 986 | -webkit-transform: translateX(0); 987 | transform: translateX(0) 988 | } 989 | } 990 | 991 | @keyframes fadeInLeft { 992 | 0% { 993 | opacity: 0; 994 | -webkit-transform: translateX(-20px); 995 | -ms-transform: translateX(-20px); 996 | transform: translateX(-20px) 997 | } 998 | 100% { 999 | opacity: 1; 1000 | -webkit-transform: translateX(0); 1001 | -ms-transform: translateX(0); 1002 | transform: translateX(0) 1003 | } 1004 | } 1005 | 1006 | .fadeInLeft { 1007 | -webkit-animation-name: fadeInLeft; 1008 | animation-name: fadeInLeft 1009 | } 1010 | 1011 | @-webkit-keyframes fadeInLeftBig { 1012 | 0% { 1013 | opacity: 0; 1014 | -webkit-transform: translateX(-2000px); 1015 | transform: translateX(-2000px) 1016 | } 1017 | 100% { 1018 | opacity: 1; 1019 | -webkit-transform: translateX(0); 1020 | transform: translateX(0) 1021 | } 1022 | } 1023 | 1024 | @keyframes fadeInLeftBig { 1025 | 0% { 1026 | opacity: 0; 1027 | -webkit-transform: translateX(-2000px); 1028 | -ms-transform: translateX(-2000px); 1029 | transform: translateX(-2000px) 1030 | } 1031 | 100% { 1032 | opacity: 1; 1033 | -webkit-transform: translateX(0); 1034 | -ms-transform: translateX(0); 1035 | transform: translateX(0) 1036 | } 1037 | } 1038 | 1039 | .fadeInLeftBig { 1040 | -webkit-animation-name: fadeInLeftBig; 1041 | animation-name: fadeInLeftBig 1042 | } 1043 | 1044 | @-webkit-keyframes fadeInRight { 1045 | 0% { 1046 | opacity: 0; 1047 | -webkit-transform: translateX(20px); 1048 | transform: translateX(20px) 1049 | } 1050 | 100% { 1051 | opacity: 1; 1052 | -webkit-transform: translateX(0); 1053 | transform: translateX(0) 1054 | } 1055 | } 1056 | 1057 | @keyframes fadeInRight { 1058 | 0% { 1059 | opacity: 0; 1060 | -webkit-transform: translateX(20px); 1061 | -ms-transform: translateX(20px); 1062 | transform: translateX(20px) 1063 | } 1064 | 100% { 1065 | opacity: 1; 1066 | -webkit-transform: translateX(0); 1067 | -ms-transform: translateX(0); 1068 | transform: translateX(0) 1069 | } 1070 | } 1071 | 1072 | .fadeInRight { 1073 | -webkit-animation-name: fadeInRight; 1074 | animation-name: fadeInRight 1075 | } 1076 | 1077 | @-webkit-keyframes fadeInRightBig { 1078 | 0% { 1079 | opacity: 0; 1080 | -webkit-transform: translateX(2000px); 1081 | transform: translateX(2000px) 1082 | } 1083 | 100% { 1084 | opacity: 1; 1085 | -webkit-transform: translateX(0); 1086 | transform: translateX(0) 1087 | } 1088 | } 1089 | 1090 | @keyframes fadeInRightBig { 1091 | 0% { 1092 | opacity: 0; 1093 | -webkit-transform: translateX(2000px); 1094 | -ms-transform: translateX(2000px); 1095 | transform: translateX(2000px) 1096 | } 1097 | 100% { 1098 | opacity: 1; 1099 | -webkit-transform: translateX(0); 1100 | -ms-transform: translateX(0); 1101 | transform: translateX(0) 1102 | } 1103 | } 1104 | 1105 | .fadeInRightBig { 1106 | -webkit-animation-name: fadeInRightBig; 1107 | animation-name: fadeInRightBig 1108 | } 1109 | 1110 | @-webkit-keyframes fadeInUp { 1111 | 0% { 1112 | opacity: 0; 1113 | -webkit-transform: translateY(20px); 1114 | transform: translateY(20px); 1115 | } 1116 | 100% { 1117 | display: block; 1118 | opacity: 1; 1119 | -webkit-transform: translateY(0); 1120 | transform: translateY(0); 1121 | } 1122 | } 1123 | 1124 | @keyframes fadeInUp { 1125 | 0% { 1126 | opacity: 0; 1127 | -webkit-transform: translateY(20px); 1128 | -ms-transform: translateY(20px); 1129 | transform: translateY(20px) 1130 | } 1131 | 100% { 1132 | opacity: 1; 1133 | -webkit-transform: translateY(0); 1134 | -ms-transform: translateY(0); 1135 | transform: translateY(0) 1136 | } 1137 | } 1138 | 1139 | .fadeInUp { 1140 | -webkit-animation-name: fadeInUp; 1141 | animation-name: fadeInUp 1142 | } 1143 | 1144 | @-webkit-keyframes fadeInUpBig { 1145 | 0% { 1146 | opacity: 0; 1147 | -webkit-transform: translateY(2000px); 1148 | transform: translateY(2000px) 1149 | } 1150 | 100% { 1151 | opacity: 1; 1152 | -webkit-transform: translateY(0); 1153 | transform: translateY(0) 1154 | } 1155 | } 1156 | 1157 | @keyframes fadeInUpBig { 1158 | 0% { 1159 | opacity: 0; 1160 | -webkit-transform: translateY(2000px); 1161 | -ms-transform: translateY(2000px); 1162 | transform: translateY(2000px) 1163 | } 1164 | 100% { 1165 | opacity: 1; 1166 | -webkit-transform: translateY(0); 1167 | -ms-transform: translateY(0); 1168 | transform: translateY(0) 1169 | } 1170 | } 1171 | 1172 | .fadeInUpBig { 1173 | -webkit-animation-name: fadeInUpBig; 1174 | animation-name: fadeInUpBig 1175 | } 1176 | 1177 | @-webkit-keyframes fadeOut { 1178 | 0% { 1179 | opacity: 1 1180 | } 1181 | 100% { 1182 | opacity: 0 1183 | } 1184 | } 1185 | 1186 | @keyframes fadeOut { 1187 | 0% { 1188 | opacity: 1 1189 | } 1190 | 100% { 1191 | opacity: 0 1192 | } 1193 | } 1194 | 1195 | .fadeOut { 1196 | -webkit-animation-name: fadeOut; 1197 | animation-name: fadeOut 1198 | } 1199 | 1200 | @-webkit-keyframes fadeOutDown { 1201 | 0% { 1202 | opacity: 1; 1203 | -webkit-transform: translateY(0); 1204 | transform: translateY(0) 1205 | } 1206 | 100% { 1207 | opacity: 0; 1208 | -webkit-transform: translateY(20px); 1209 | transform: translateY(20px) 1210 | } 1211 | } 1212 | 1213 | @keyframes fadeOutDown { 1214 | 0% { 1215 | opacity: 1; 1216 | -webkit-transform: translateY(0); 1217 | -ms-transform: translateY(0); 1218 | transform: translateY(0) 1219 | } 1220 | 100% { 1221 | opacity: 0; 1222 | -webkit-transform: translateY(20px); 1223 | -ms-transform: translateY(20px); 1224 | transform: translateY(20px) 1225 | } 1226 | } 1227 | 1228 | .fadeOutDown { 1229 | -webkit-animation-name: fadeOutDown; 1230 | animation-name: fadeOutDown 1231 | } 1232 | 1233 | @-webkit-keyframes fadeOutDownBig { 1234 | 0% { 1235 | opacity: 1; 1236 | -webkit-transform: translateY(0); 1237 | transform: translateY(0) 1238 | } 1239 | 100% { 1240 | opacity: 0; 1241 | -webkit-transform: translateY(2000px); 1242 | transform: translateY(2000px) 1243 | } 1244 | } 1245 | 1246 | @keyframes fadeOutDownBig { 1247 | 0% { 1248 | opacity: 1; 1249 | -webkit-transform: translateY(0); 1250 | -ms-transform: translateY(0); 1251 | transform: translateY(0) 1252 | } 1253 | 100% { 1254 | opacity: 0; 1255 | -webkit-transform: translateY(2000px); 1256 | -ms-transform: translateY(2000px); 1257 | transform: translateY(2000px) 1258 | } 1259 | } 1260 | 1261 | .fadeOutDownBig { 1262 | -webkit-animation-name: fadeOutDownBig; 1263 | animation-name: fadeOutDownBig 1264 | } 1265 | 1266 | @-webkit-keyframes fadeOutLeft { 1267 | 0% { 1268 | opacity: 1; 1269 | -webkit-transform: translateX(0); 1270 | transform: translateX(0) 1271 | } 1272 | 100% { 1273 | opacity: 0; 1274 | -webkit-transform: translateX(-20px); 1275 | transform: translateX(-20px) 1276 | } 1277 | } 1278 | 1279 | @keyframes fadeOutLeft { 1280 | 0% { 1281 | opacity: 1; 1282 | -webkit-transform: translateX(0); 1283 | -ms-transform: translateX(0); 1284 | transform: translateX(0) 1285 | } 1286 | 100% { 1287 | opacity: 0; 1288 | -webkit-transform: translateX(-20px); 1289 | -ms-transform: translateX(-20px); 1290 | transform: translateX(-20px) 1291 | } 1292 | } 1293 | 1294 | .fadeOutLeft { 1295 | -webkit-animation-name: fadeOutLeft; 1296 | animation-name: fadeOutLeft 1297 | } 1298 | 1299 | @-webkit-keyframes fadeOutLeftBig { 1300 | 0% { 1301 | opacity: 1; 1302 | -webkit-transform: translateX(0); 1303 | transform: translateX(0) 1304 | } 1305 | 100% { 1306 | opacity: 0; 1307 | -webkit-transform: translateX(-2000px); 1308 | transform: translateX(-2000px) 1309 | } 1310 | } 1311 | 1312 | @keyframes fadeOutLeftBig { 1313 | 0% { 1314 | opacity: 1; 1315 | -webkit-transform: translateX(0); 1316 | -ms-transform: translateX(0); 1317 | transform: translateX(0) 1318 | } 1319 | 100% { 1320 | opacity: 0; 1321 | -webkit-transform: translateX(-2000px); 1322 | -ms-transform: translateX(-2000px); 1323 | transform: translateX(-2000px) 1324 | } 1325 | } 1326 | 1327 | .fadeOutLeftBig { 1328 | -webkit-animation-name: fadeOutLeftBig; 1329 | animation-name: fadeOutLeftBig 1330 | } 1331 | 1332 | @-webkit-keyframes fadeOutRight { 1333 | 0% { 1334 | opacity: 1; 1335 | -webkit-transform: translateX(0); 1336 | transform: translateX(0) 1337 | } 1338 | 100% { 1339 | opacity: 0; 1340 | -webkit-transform: translateX(20px); 1341 | transform: translateX(20px) 1342 | } 1343 | } 1344 | 1345 | @keyframes fadeOutRight { 1346 | 0% { 1347 | opacity: 1; 1348 | -webkit-transform: translateX(0); 1349 | -ms-transform: translateX(0); 1350 | transform: translateX(0) 1351 | } 1352 | 100% { 1353 | opacity: 0; 1354 | -webkit-transform: translateX(20px); 1355 | -ms-transform: translateX(20px); 1356 | transform: translateX(20px) 1357 | } 1358 | } 1359 | 1360 | .fadeOutRight { 1361 | -webkit-animation-name: fadeOutRight; 1362 | animation-name: fadeOutRight 1363 | } 1364 | 1365 | @-webkit-keyframes fadeOutRightBig { 1366 | 0% { 1367 | opacity: 1; 1368 | -webkit-transform: translateX(0); 1369 | transform: translateX(0) 1370 | } 1371 | 100% { 1372 | opacity: 0; 1373 | -webkit-transform: translateX(2000px); 1374 | transform: translateX(2000px) 1375 | } 1376 | } 1377 | 1378 | @keyframes fadeOutRightBig { 1379 | 0% { 1380 | opacity: 1; 1381 | -webkit-transform: translateX(0); 1382 | -ms-transform: translateX(0); 1383 | transform: translateX(0) 1384 | } 1385 | 100% { 1386 | opacity: 0; 1387 | -webkit-transform: translateX(2000px); 1388 | -ms-transform: translateX(2000px); 1389 | transform: translateX(2000px) 1390 | } 1391 | } 1392 | 1393 | .fadeOutRightBig { 1394 | -webkit-animation-name: fadeOutRightBig; 1395 | animation-name: fadeOutRightBig 1396 | } 1397 | 1398 | @-webkit-keyframes fadeOutUp { 1399 | 0% { 1400 | opacity: 1; 1401 | -webkit-transform: translateY(0); 1402 | transform: translateY(0) 1403 | } 1404 | 100% { 1405 | opacity: 0; 1406 | -webkit-transform: translateY(-20px); 1407 | transform: translateY(-20px) 1408 | } 1409 | } 1410 | 1411 | @keyframes fadeOutUp { 1412 | 0% { 1413 | opacity: 1; 1414 | -webkit-transform: translateY(0); 1415 | -ms-transform: translateY(0); 1416 | transform: translateY(0) 1417 | } 1418 | 100% { 1419 | opacity: 0; 1420 | -webkit-transform: translateY(-20px); 1421 | -ms-transform: translateY(-20px); 1422 | transform: translateY(-20px) 1423 | } 1424 | } 1425 | 1426 | .fadeOutUp { 1427 | -webkit-animation-name: fadeOutUp; 1428 | animation-name: fadeOutUp 1429 | } 1430 | 1431 | @-webkit-keyframes fadeOutUpBig { 1432 | 0% { 1433 | opacity: 1; 1434 | -webkit-transform: translateY(0); 1435 | transform: translateY(0) 1436 | } 1437 | 100% { 1438 | opacity: 0; 1439 | -webkit-transform: translateY(-2000px); 1440 | transform: translateY(-2000px) 1441 | } 1442 | } 1443 | 1444 | @keyframes fadeOutUpBig { 1445 | 0% { 1446 | opacity: 1; 1447 | -webkit-transform: translateY(0); 1448 | -ms-transform: translateY(0); 1449 | transform: translateY(0) 1450 | } 1451 | 100% { 1452 | opacity: 0; 1453 | -webkit-transform: translateY(-2000px); 1454 | -ms-transform: translateY(-2000px); 1455 | transform: translateY(-2000px) 1456 | } 1457 | } 1458 | 1459 | .fadeOutUpBig { 1460 | -webkit-animation-name: fadeOutUpBig; 1461 | animation-name: fadeOutUpBig 1462 | } 1463 | 1464 | @-webkit-keyframes flip { 1465 | 0% { 1466 | -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1467 | transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1468 | -webkit-animation-timing-function: ease-out; 1469 | animation-timing-function: ease-out 1470 | } 1471 | 40% { 1472 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1473 | transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1474 | -webkit-animation-timing-function: ease-out; 1475 | animation-timing-function: ease-out 1476 | } 1477 | 50% { 1478 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1479 | transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1480 | -webkit-animation-timing-function: ease-in; 1481 | animation-timing-function: ease-in 1482 | } 1483 | 80% { 1484 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1485 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1486 | -webkit-animation-timing-function: ease-in; 1487 | animation-timing-function: ease-in 1488 | } 1489 | 100% { 1490 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1491 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1492 | -webkit-animation-timing-function: ease-in; 1493 | animation-timing-function: ease-in 1494 | } 1495 | } 1496 | 1497 | @keyframes flip { 1498 | 0% { 1499 | -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1500 | -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1501 | transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1502 | -webkit-animation-timing-function: ease-out; 1503 | animation-timing-function: ease-out 1504 | } 1505 | 40% { 1506 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1507 | -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1508 | transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1509 | -webkit-animation-timing-function: ease-out; 1510 | animation-timing-function: ease-out 1511 | } 1512 | 50% { 1513 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1514 | -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1515 | transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1516 | -webkit-animation-timing-function: ease-in; 1517 | animation-timing-function: ease-in 1518 | } 1519 | 80% { 1520 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1521 | -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1522 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1523 | -webkit-animation-timing-function: ease-in; 1524 | animation-timing-function: ease-in 1525 | } 1526 | 100% { 1527 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1528 | -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1529 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1530 | -webkit-animation-timing-function: ease-in; 1531 | animation-timing-function: ease-in 1532 | } 1533 | } 1534 | 1535 | .animated.flip { 1536 | -webkit-backface-visibility: visible; 1537 | -ms-backface-visibility: visible; 1538 | backface-visibility: visible; 1539 | -webkit-animation-name: flip; 1540 | animation-name: flip 1541 | } 1542 | 1543 | @-webkit-keyframes flipInX { 1544 | 0% { 1545 | -webkit-transform: perspective(400px) rotateX(90deg); 1546 | transform: perspective(400px) rotateX(90deg); 1547 | opacity: 0 1548 | } 1549 | 40% { 1550 | -webkit-transform: perspective(400px) rotateX(-10deg); 1551 | transform: perspective(400px) rotateX(-10deg) 1552 | } 1553 | 70% { 1554 | -webkit-transform: perspective(400px) rotateX(10deg); 1555 | transform: perspective(400px) rotateX(10deg) 1556 | } 1557 | 100% { 1558 | -webkit-transform: perspective(400px) rotateX(0deg); 1559 | transform: perspective(400px) rotateX(0deg); 1560 | opacity: 1 1561 | } 1562 | } 1563 | 1564 | @keyframes flipInX { 1565 | 0% { 1566 | -webkit-transform: perspective(400px) rotateX(90deg); 1567 | -ms-transform: perspective(400px) rotateX(90deg); 1568 | transform: perspective(400px) rotateX(90deg); 1569 | opacity: 0 1570 | } 1571 | 40% { 1572 | -webkit-transform: perspective(400px) rotateX(-10deg); 1573 | -ms-transform: perspective(400px) rotateX(-10deg); 1574 | transform: perspective(400px) rotateX(-10deg) 1575 | } 1576 | 70% { 1577 | -webkit-transform: perspective(400px) rotateX(10deg); 1578 | -ms-transform: perspective(400px) rotateX(10deg); 1579 | transform: perspective(400px) rotateX(10deg) 1580 | } 1581 | 100% { 1582 | -webkit-transform: perspective(400px) rotateX(0deg); 1583 | -ms-transform: perspective(400px) rotateX(0deg); 1584 | transform: perspective(400px) rotateX(0deg); 1585 | opacity: 1 1586 | } 1587 | } 1588 | 1589 | .flipInX { 1590 | -webkit-backface-visibility: visible !important; 1591 | -ms-backface-visibility: visible !important; 1592 | backface-visibility: visible !important; 1593 | -webkit-animation-name: flipInX; 1594 | animation-name: flipInX 1595 | } 1596 | 1597 | @-webkit-keyframes flipInY { 1598 | 0% { 1599 | -webkit-transform: perspective(400px) rotateY(90deg); 1600 | transform: perspective(400px) rotateY(90deg); 1601 | opacity: 0 1602 | } 1603 | 40% { 1604 | -webkit-transform: perspective(400px) rotateY(-10deg); 1605 | transform: perspective(400px) rotateY(-10deg) 1606 | } 1607 | 70% { 1608 | -webkit-transform: perspective(400px) rotateY(10deg); 1609 | transform: perspective(400px) rotateY(10deg) 1610 | } 1611 | 100% { 1612 | -webkit-transform: perspective(400px) rotateY(0deg); 1613 | transform: perspective(400px) rotateY(0deg); 1614 | opacity: 1 1615 | } 1616 | } 1617 | 1618 | @keyframes flipInY { 1619 | 0% { 1620 | -webkit-transform: perspective(400px) rotateY(90deg); 1621 | -ms-transform: perspective(400px) rotateY(90deg); 1622 | transform: perspective(400px) rotateY(90deg); 1623 | opacity: 0 1624 | } 1625 | 40% { 1626 | -webkit-transform: perspective(400px) rotateY(-10deg); 1627 | -ms-transform: perspective(400px) rotateY(-10deg); 1628 | transform: perspective(400px) rotateY(-10deg) 1629 | } 1630 | 70% { 1631 | -webkit-transform: perspective(400px) rotateY(10deg); 1632 | -ms-transform: perspective(400px) rotateY(10deg); 1633 | transform: perspective(400px) rotateY(10deg) 1634 | } 1635 | 100% { 1636 | -webkit-transform: perspective(400px) rotateY(0deg); 1637 | -ms-transform: perspective(400px) rotateY(0deg); 1638 | transform: perspective(400px) rotateY(0deg); 1639 | opacity: 1 1640 | } 1641 | } 1642 | 1643 | .flipInY { 1644 | -webkit-backface-visibility: visible !important; 1645 | -ms-backface-visibility: visible !important; 1646 | backface-visibility: visible !important; 1647 | -webkit-animation-name: flipInY; 1648 | animation-name: flipInY; 1649 | } 1650 | 1651 | @-webkit-keyframes flipOutX { 1652 | 0% { 1653 | -webkit-transform: perspective(400px) rotateX(0deg); 1654 | transform: perspective(400px) rotateX(0deg); 1655 | opacity: 1 1656 | } 1657 | 100% { 1658 | -webkit-transform: perspective(400px) rotateX(90deg); 1659 | transform: perspective(400px) rotateX(90deg); 1660 | opacity: 0 1661 | } 1662 | } 1663 | 1664 | @keyframes flipOutX { 1665 | 0% { 1666 | -webkit-transform: perspective(400px) rotateX(0deg); 1667 | -ms-transform: perspective(400px) rotateX(0deg); 1668 | transform: perspective(400px) rotateX(0deg); 1669 | opacity: 1 1670 | } 1671 | 100% { 1672 | -webkit-transform: perspective(400px) rotateX(90deg); 1673 | -ms-transform: perspective(400px) rotateX(90deg); 1674 | transform: perspective(400px) rotateX(90deg); 1675 | opacity: 0 1676 | } 1677 | } 1678 | 1679 | .flipOutX { 1680 | -webkit-animation-name: flipOutX; 1681 | animation-name: flipOutX; 1682 | -webkit-backface-visibility: visible !important; 1683 | -ms-backface-visibility: visible !important; 1684 | backface-visibility: visible !important 1685 | } 1686 | 1687 | @-webkit-keyframes flipOutY { 1688 | 0% { 1689 | -webkit-transform: perspective(400px) rotateY(0deg); 1690 | transform: perspective(400px) rotateY(0deg); 1691 | opacity: 1 1692 | } 1693 | 100% { 1694 | -webkit-transform: perspective(400px) rotateY(90deg); 1695 | transform: perspective(400px) rotateY(90deg); 1696 | opacity: 0 1697 | } 1698 | } 1699 | 1700 | @keyframes flipOutY { 1701 | 0% { 1702 | -webkit-transform: perspective(400px) rotateY(0deg); 1703 | -ms-transform: perspective(400px) rotateY(0deg); 1704 | transform: perspective(400px) rotateY(0deg); 1705 | opacity: 1 1706 | } 1707 | 100% { 1708 | -webkit-transform: perspective(400px) rotateY(90deg); 1709 | -ms-transform: perspective(400px) rotateY(90deg); 1710 | transform: perspective(400px) rotateY(90deg); 1711 | opacity: 0 1712 | } 1713 | } 1714 | 1715 | .flipOutY { 1716 | -webkit-backface-visibility: visible !important; 1717 | -ms-backface-visibility: visible !important; 1718 | backface-visibility: visible !important; 1719 | -webkit-animation-name: flipOutY; 1720 | animation-name: flipOutY 1721 | } 1722 | 1723 | @-webkit-keyframes lightSpeedIn { 1724 | 0% { 1725 | -webkit-transform: translateX(100%) skewX(-30deg); 1726 | transform: translateX(100%) skewX(-30deg); 1727 | opacity: 0 1728 | } 1729 | 60% { 1730 | -webkit-transform: translateX(-20%) skewX(30deg); 1731 | transform: translateX(-20%) skewX(30deg); 1732 | opacity: 1 1733 | } 1734 | 80% { 1735 | -webkit-transform: translateX(0%) skewX(-15deg); 1736 | transform: translateX(0%) skewX(-15deg); 1737 | opacity: 1 1738 | } 1739 | 100% { 1740 | -webkit-transform: translateX(0%) skewX(0deg); 1741 | transform: translateX(0%) skewX(0deg); 1742 | opacity: 1 1743 | } 1744 | } 1745 | 1746 | @keyframes lightSpeedIn { 1747 | 0% { 1748 | -webkit-transform: translateX(100%) skewX(-30deg); 1749 | -ms-transform: translateX(100%) skewX(-30deg); 1750 | transform: translateX(100%) skewX(-30deg); 1751 | opacity: 0 1752 | } 1753 | 60% { 1754 | -webkit-transform: translateX(-20%) skewX(30deg); 1755 | -ms-transform: translateX(-20%) skewX(30deg); 1756 | transform: translateX(-20%) skewX(30deg); 1757 | opacity: 1 1758 | } 1759 | 80% { 1760 | -webkit-transform: translateX(0%) skewX(-15deg); 1761 | -ms-transform: translateX(0%) skewX(-15deg); 1762 | transform: translateX(0%) skewX(-15deg); 1763 | opacity: 1 1764 | } 1765 | 100% { 1766 | -webkit-transform: translateX(0%) skewX(0deg); 1767 | -ms-transform: translateX(0%) skewX(0deg); 1768 | transform: translateX(0%) skewX(0deg); 1769 | opacity: 1 1770 | } 1771 | } 1772 | 1773 | .lightSpeedIn { 1774 | -webkit-animation-name: lightSpeedIn; 1775 | animation-name: lightSpeedIn; 1776 | -webkit-animation-timing-function: ease-out; 1777 | animation-timing-function: ease-out 1778 | } 1779 | 1780 | @-webkit-keyframes lightSpeedOut { 1781 | 0% { 1782 | -webkit-transform: translateX(0%) skewX(0deg); 1783 | transform: translateX(0%) skewX(0deg); 1784 | opacity: 1 1785 | } 1786 | 100% { 1787 | -webkit-transform: translateX(100%) skewX(-30deg); 1788 | transform: translateX(100%) skewX(-30deg); 1789 | opacity: 0 1790 | } 1791 | } 1792 | 1793 | @keyframes lightSpeedOut { 1794 | 0% { 1795 | -webkit-transform: translateX(0%) skewX(0deg); 1796 | -ms-transform: translateX(0%) skewX(0deg); 1797 | transform: translateX(0%) skewX(0deg); 1798 | opacity: 1 1799 | } 1800 | 100% { 1801 | -webkit-transform: translateX(100%) skewX(-30deg); 1802 | -ms-transform: translateX(100%) skewX(-30deg); 1803 | transform: translateX(100%) skewX(-30deg); 1804 | opacity: 0 1805 | } 1806 | } 1807 | 1808 | .lightSpeedOut { 1809 | -webkit-animation-name: lightSpeedOut; 1810 | animation-name: lightSpeedOut; 1811 | -webkit-animation-timing-function: ease-in; 1812 | animation-timing-function: ease-in 1813 | } 1814 | 1815 | @-webkit-keyframes rotateIn { 1816 | 0% { 1817 | -webkit-transform-origin: center center; 1818 | transform-origin: center center; 1819 | -webkit-transform: rotate(-200deg); 1820 | transform: rotate(-200deg); 1821 | opacity: 0 1822 | } 1823 | 100% { 1824 | -webkit-transform-origin: center center; 1825 | transform-origin: center center; 1826 | -webkit-transform: rotate(0); 1827 | transform: rotate(0); 1828 | opacity: 1 1829 | } 1830 | } 1831 | 1832 | @keyframes rotateIn { 1833 | 0% { 1834 | -webkit-transform-origin: center center; 1835 | -ms-transform-origin: center center; 1836 | transform-origin: center center; 1837 | -webkit-transform: rotate(-200deg); 1838 | -ms-transform: rotate(-200deg); 1839 | transform: rotate(-200deg); 1840 | opacity: 0 1841 | } 1842 | 100% { 1843 | -webkit-transform-origin: center center; 1844 | -ms-transform-origin: center center; 1845 | transform-origin: center center; 1846 | -webkit-transform: rotate(0); 1847 | -ms-transform: rotate(0); 1848 | transform: rotate(0); 1849 | opacity: 1 1850 | } 1851 | } 1852 | 1853 | .rotateIn { 1854 | -webkit-animation-name: rotateIn; 1855 | animation-name: rotateIn 1856 | } 1857 | 1858 | @-webkit-keyframes rotateInDownLeft { 1859 | 0% { 1860 | -webkit-transform-origin: left bottom; 1861 | transform-origin: left bottom; 1862 | -webkit-transform: rotate(-90deg); 1863 | transform: rotate(-90deg); 1864 | opacity: 0 1865 | } 1866 | 100% { 1867 | -webkit-transform-origin: left bottom; 1868 | transform-origin: left bottom; 1869 | -webkit-transform: rotate(0); 1870 | transform: rotate(0); 1871 | opacity: 1 1872 | } 1873 | } 1874 | 1875 | @keyframes rotateInDownLeft { 1876 | 0% { 1877 | -webkit-transform-origin: left bottom; 1878 | -ms-transform-origin: left bottom; 1879 | transform-origin: left bottom; 1880 | -webkit-transform: rotate(-90deg); 1881 | -ms-transform: rotate(-90deg); 1882 | transform: rotate(-90deg); 1883 | opacity: 0 1884 | } 1885 | 100% { 1886 | -webkit-transform-origin: left bottom; 1887 | -ms-transform-origin: left bottom; 1888 | transform-origin: left bottom; 1889 | -webkit-transform: rotate(0); 1890 | -ms-transform: rotate(0); 1891 | transform: rotate(0); 1892 | opacity: 1 1893 | } 1894 | } 1895 | 1896 | .rotateInDownLeft { 1897 | -webkit-animation-name: rotateInDownLeft; 1898 | animation-name: rotateInDownLeft 1899 | } 1900 | 1901 | @-webkit-keyframes rotateInDownRight { 1902 | 0% { 1903 | -webkit-transform-origin: right bottom; 1904 | transform-origin: right bottom; 1905 | -webkit-transform: rotate(90deg); 1906 | transform: rotate(90deg); 1907 | opacity: 0 1908 | } 1909 | 100% { 1910 | -webkit-transform-origin: right bottom; 1911 | transform-origin: right bottom; 1912 | -webkit-transform: rotate(0); 1913 | transform: rotate(0); 1914 | opacity: 1 1915 | } 1916 | } 1917 | 1918 | @keyframes rotateInDownRight { 1919 | 0% { 1920 | -webkit-transform-origin: right bottom; 1921 | -ms-transform-origin: right bottom; 1922 | transform-origin: right bottom; 1923 | -webkit-transform: rotate(90deg); 1924 | -ms-transform: rotate(90deg); 1925 | transform: rotate(90deg); 1926 | opacity: 0 1927 | } 1928 | 100% { 1929 | -webkit-transform-origin: right bottom; 1930 | -ms-transform-origin: right bottom; 1931 | transform-origin: right bottom; 1932 | -webkit-transform: rotate(0); 1933 | -ms-transform: rotate(0); 1934 | transform: rotate(0); 1935 | opacity: 1 1936 | } 1937 | } 1938 | 1939 | .rotateInDownRight { 1940 | -webkit-animation-name: rotateInDownRight; 1941 | animation-name: rotateInDownRight 1942 | } 1943 | 1944 | @-webkit-keyframes rotateInUpLeft { 1945 | 0% { 1946 | -webkit-transform-origin: left bottom; 1947 | transform-origin: left bottom; 1948 | -webkit-transform: rotate(90deg); 1949 | transform: rotate(90deg); 1950 | opacity: 0 1951 | } 1952 | 100% { 1953 | -webkit-transform-origin: left bottom; 1954 | transform-origin: left bottom; 1955 | -webkit-transform: rotate(0); 1956 | transform: rotate(0); 1957 | opacity: 1 1958 | } 1959 | } 1960 | 1961 | @keyframes rotateInUpLeft { 1962 | 0% { 1963 | -webkit-transform-origin: left bottom; 1964 | -ms-transform-origin: left bottom; 1965 | transform-origin: left bottom; 1966 | -webkit-transform: rotate(90deg); 1967 | -ms-transform: rotate(90deg); 1968 | transform: rotate(90deg); 1969 | opacity: 0 1970 | } 1971 | 100% { 1972 | -webkit-transform-origin: left bottom; 1973 | -ms-transform-origin: left bottom; 1974 | transform-origin: left bottom; 1975 | -webkit-transform: rotate(0); 1976 | -ms-transform: rotate(0); 1977 | transform: rotate(0); 1978 | opacity: 1 1979 | } 1980 | } 1981 | 1982 | .rotateInUpLeft { 1983 | -webkit-animation-name: rotateInUpLeft; 1984 | animation-name: rotateInUpLeft 1985 | } 1986 | 1987 | @-webkit-keyframes rotateInUpRight { 1988 | 0% { 1989 | -webkit-transform-origin: right bottom; 1990 | transform-origin: right bottom; 1991 | -webkit-transform: rotate(-90deg); 1992 | transform: rotate(-90deg); 1993 | opacity: 0 1994 | } 1995 | 100% { 1996 | -webkit-transform-origin: right bottom; 1997 | transform-origin: right bottom; 1998 | -webkit-transform: rotate(0); 1999 | transform: rotate(0); 2000 | opacity: 1 2001 | } 2002 | } 2003 | 2004 | @keyframes rotateInUpRight { 2005 | 0% { 2006 | -webkit-transform-origin: right bottom; 2007 | -ms-transform-origin: right bottom; 2008 | transform-origin: right bottom; 2009 | -webkit-transform: rotate(-90deg); 2010 | -ms-transform: rotate(-90deg); 2011 | transform: rotate(-90deg); 2012 | opacity: 0 2013 | } 2014 | 100% { 2015 | -webkit-transform-origin: right bottom; 2016 | -ms-transform-origin: right bottom; 2017 | transform-origin: right bottom; 2018 | -webkit-transform: rotate(0); 2019 | -ms-transform: rotate(0); 2020 | transform: rotate(0); 2021 | opacity: 1 2022 | } 2023 | } 2024 | 2025 | .rotateInUpRight { 2026 | -webkit-animation-name: rotateInUpRight; 2027 | animation-name: rotateInUpRight 2028 | } 2029 | 2030 | @-webkit-keyframes rotateOut { 2031 | 0% { 2032 | -webkit-transform-origin: center center; 2033 | transform-origin: center center; 2034 | -webkit-transform: rotate(0); 2035 | transform: rotate(0); 2036 | opacity: 1 2037 | } 2038 | 100% { 2039 | -webkit-transform-origin: center center; 2040 | transform-origin: center center; 2041 | -webkit-transform: rotate(200deg); 2042 | transform: rotate(200deg); 2043 | opacity: 0 2044 | } 2045 | } 2046 | 2047 | @keyframes rotateOut { 2048 | 0% { 2049 | -webkit-transform-origin: center center; 2050 | -ms-transform-origin: center center; 2051 | transform-origin: center center; 2052 | -webkit-transform: rotate(0); 2053 | -ms-transform: rotate(0); 2054 | transform: rotate(0); 2055 | opacity: 1 2056 | } 2057 | 100% { 2058 | -webkit-transform-origin: center center; 2059 | -ms-transform-origin: center center; 2060 | transform-origin: center center; 2061 | -webkit-transform: rotate(200deg); 2062 | -ms-transform: rotate(200deg); 2063 | transform: rotate(200deg); 2064 | opacity: 0 2065 | } 2066 | } 2067 | 2068 | .rotateOut { 2069 | -webkit-animation-name: rotateOut; 2070 | animation-name: rotateOut 2071 | } 2072 | 2073 | @-webkit-keyframes rotateOutDownLeft { 2074 | 0% { 2075 | -webkit-transform-origin: left bottom; 2076 | transform-origin: left bottom; 2077 | -webkit-transform: rotate(0); 2078 | transform: rotate(0); 2079 | opacity: 1 2080 | } 2081 | 100% { 2082 | -webkit-transform-origin: left bottom; 2083 | transform-origin: left bottom; 2084 | -webkit-transform: rotate(90deg); 2085 | transform: rotate(90deg); 2086 | opacity: 0 2087 | } 2088 | } 2089 | 2090 | @keyframes rotateOutDownLeft { 2091 | 0% { 2092 | -webkit-transform-origin: left bottom; 2093 | -ms-transform-origin: left bottom; 2094 | transform-origin: left bottom; 2095 | -webkit-transform: rotate(0); 2096 | -ms-transform: rotate(0); 2097 | transform: rotate(0); 2098 | opacity: 1 2099 | } 2100 | 100% { 2101 | -webkit-transform-origin: left bottom; 2102 | -ms-transform-origin: left bottom; 2103 | transform-origin: left bottom; 2104 | -webkit-transform: rotate(90deg); 2105 | -ms-transform: rotate(90deg); 2106 | transform: rotate(90deg); 2107 | opacity: 0 2108 | } 2109 | } 2110 | 2111 | .rotateOutDownLeft { 2112 | -webkit-animation-name: rotateOutDownLeft; 2113 | animation-name: rotateOutDownLeft 2114 | } 2115 | 2116 | @-webkit-keyframes rotateOutDownRight { 2117 | 0% { 2118 | -webkit-transform-origin: right bottom; 2119 | transform-origin: right bottom; 2120 | -webkit-transform: rotate(0); 2121 | transform: rotate(0); 2122 | opacity: 1 2123 | } 2124 | 100% { 2125 | -webkit-transform-origin: right bottom; 2126 | transform-origin: right bottom; 2127 | -webkit-transform: rotate(-90deg); 2128 | transform: rotate(-90deg); 2129 | opacity: 0 2130 | } 2131 | } 2132 | 2133 | @keyframes rotateOutDownRight { 2134 | 0% { 2135 | -webkit-transform-origin: right bottom; 2136 | -ms-transform-origin: right bottom; 2137 | transform-origin: right bottom; 2138 | -webkit-transform: rotate(0); 2139 | -ms-transform: rotate(0); 2140 | transform: rotate(0); 2141 | opacity: 1 2142 | } 2143 | 100% { 2144 | -webkit-transform-origin: right bottom; 2145 | -ms-transform-origin: right bottom; 2146 | transform-origin: right bottom; 2147 | -webkit-transform: rotate(-90deg); 2148 | -ms-transform: rotate(-90deg); 2149 | transform: rotate(-90deg); 2150 | opacity: 0 2151 | } 2152 | } 2153 | 2154 | .rotateOutDownRight { 2155 | -webkit-animation-name: rotateOutDownRight; 2156 | animation-name: rotateOutDownRight 2157 | } 2158 | 2159 | @-webkit-keyframes rotateOutUpLeft { 2160 | 0% { 2161 | -webkit-transform-origin: left bottom; 2162 | transform-origin: left bottom; 2163 | -webkit-transform: rotate(0); 2164 | transform: rotate(0); 2165 | opacity: 1 2166 | } 2167 | 100% { 2168 | -webkit-transform-origin: left bottom; 2169 | transform-origin: left bottom; 2170 | -webkit-transform: rotate(-90deg); 2171 | transform: rotate(-90deg); 2172 | opacity: 0 2173 | } 2174 | } 2175 | 2176 | @keyframes rotateOutUpLeft { 2177 | 0% { 2178 | -webkit-transform-origin: left bottom; 2179 | -ms-transform-origin: left bottom; 2180 | transform-origin: left bottom; 2181 | -webkit-transform: rotate(0); 2182 | -ms-transform: rotate(0); 2183 | transform: rotate(0); 2184 | opacity: 1 2185 | } 2186 | 100% { 2187 | -webkit-transform-origin: left bottom; 2188 | -ms-transform-origin: left bottom; 2189 | transform-origin: left bottom; 2190 | -webkit-transform: rotate(-90deg); 2191 | -ms-transform: rotate(-90deg); 2192 | transform: rotate(-90deg); 2193 | opacity: 0 2194 | } 2195 | } 2196 | 2197 | .rotateOutUpLeft { 2198 | -webkit-animation-name: rotateOutUpLeft; 2199 | animation-name: rotateOutUpLeft 2200 | } 2201 | 2202 | @-webkit-keyframes rotateOutUpRight { 2203 | 0% { 2204 | -webkit-transform-origin: right bottom; 2205 | transform-origin: right bottom; 2206 | -webkit-transform: rotate(0); 2207 | transform: rotate(0); 2208 | opacity: 1 2209 | } 2210 | 100% { 2211 | -webkit-transform-origin: right bottom; 2212 | transform-origin: right bottom; 2213 | -webkit-transform: rotate(90deg); 2214 | transform: rotate(90deg); 2215 | opacity: 0 2216 | } 2217 | } 2218 | 2219 | @keyframes rotateOutUpRight { 2220 | 0% { 2221 | -webkit-transform-origin: right bottom; 2222 | -ms-transform-origin: right bottom; 2223 | transform-origin: right bottom; 2224 | -webkit-transform: rotate(0); 2225 | -ms-transform: rotate(0); 2226 | transform: rotate(0); 2227 | opacity: 1 2228 | } 2229 | 100% { 2230 | -webkit-transform-origin: right bottom; 2231 | -ms-transform-origin: right bottom; 2232 | transform-origin: right bottom; 2233 | -webkit-transform: rotate(90deg); 2234 | -ms-transform: rotate(90deg); 2235 | transform: rotate(90deg); 2236 | opacity: 0 2237 | } 2238 | } 2239 | 2240 | .rotateOutUpRight { 2241 | -webkit-animation-name: rotateOutUpRight; 2242 | animation-name: rotateOutUpRight 2243 | } 2244 | 2245 | @-webkit-keyframes slideInDown { 2246 | 0% { 2247 | opacity: 0; 2248 | -webkit-transform: translateY(-2000px); 2249 | transform: translateY(-2000px) 2250 | } 2251 | 100% { 2252 | -webkit-transform: translateY(0); 2253 | transform: translateY(0) 2254 | } 2255 | } 2256 | 2257 | @keyframes slideInDown { 2258 | 0% { 2259 | opacity: 0; 2260 | -webkit-transform: translateY(-2000px); 2261 | -ms-transform: translateY(-2000px); 2262 | transform: translateY(-2000px) 2263 | } 2264 | 100% { 2265 | -webkit-transform: translateY(0); 2266 | -ms-transform: translateY(0); 2267 | transform: translateY(0) 2268 | } 2269 | } 2270 | 2271 | .slideInDown { 2272 | -webkit-animation-name: slideInDown; 2273 | animation-name: slideInDown 2274 | } 2275 | 2276 | @-webkit-keyframes slideInLeft { 2277 | 0% { 2278 | opacity: 0; 2279 | -webkit-transform: translateX(-2000px); 2280 | transform: translateX(-2000px) 2281 | } 2282 | 100% { 2283 | -webkit-transform: translateX(0); 2284 | transform: translateX(0) 2285 | } 2286 | } 2287 | 2288 | @keyframes slideInLeft { 2289 | 0% { 2290 | opacity: 0; 2291 | -webkit-transform: translateX(-2000px); 2292 | -ms-transform: translateX(-2000px); 2293 | transform: translateX(-2000px) 2294 | } 2295 | 100% { 2296 | -webkit-transform: translateX(0); 2297 | -ms-transform: translateX(0); 2298 | transform: translateX(0) 2299 | } 2300 | } 2301 | 2302 | .slideInLeft { 2303 | -webkit-animation-name: slideInLeft; 2304 | animation-name: slideInLeft 2305 | } 2306 | 2307 | @-webkit-keyframes slideInRight { 2308 | 0% { 2309 | opacity: 0; 2310 | -webkit-transform: translateX(2000px); 2311 | transform: translateX(2000px) 2312 | } 2313 | 100% { 2314 | -webkit-transform: translateX(0); 2315 | transform: translateX(0) 2316 | } 2317 | } 2318 | 2319 | @keyframes slideInRight { 2320 | 0% { 2321 | opacity: 0; 2322 | -webkit-transform: translateX(2000px); 2323 | -ms-transform: translateX(2000px); 2324 | transform: translateX(2000px) 2325 | } 2326 | 100% { 2327 | -webkit-transform: translateX(0); 2328 | -ms-transform: translateX(0); 2329 | transform: translateX(0) 2330 | } 2331 | } 2332 | 2333 | .slideInRight { 2334 | -webkit-animation-name: slideInRight; 2335 | animation-name: slideInRight 2336 | } 2337 | 2338 | @-webkit-keyframes slideOutLeft { 2339 | 0% { 2340 | -webkit-transform: translateX(0); 2341 | transform: translateX(0) 2342 | } 2343 | 100% { 2344 | opacity: 0; 2345 | -webkit-transform: translateX(-2000px); 2346 | transform: translateX(-2000px) 2347 | } 2348 | } 2349 | 2350 | @keyframes slideOutLeft { 2351 | 0% { 2352 | -webkit-transform: translateX(0); 2353 | -ms-transform: translateX(0); 2354 | transform: translateX(0) 2355 | } 2356 | 100% { 2357 | opacity: 0; 2358 | -webkit-transform: translateX(-2000px); 2359 | -ms-transform: translateX(-2000px); 2360 | transform: translateX(-2000px) 2361 | } 2362 | } 2363 | 2364 | .slideOutLeft { 2365 | -webkit-animation-name: slideOutLeft; 2366 | animation-name: slideOutLeft 2367 | } 2368 | 2369 | @-webkit-keyframes slideOutRight { 2370 | 0% { 2371 | -webkit-transform: translateX(0); 2372 | transform: translateX(0) 2373 | } 2374 | 100% { 2375 | opacity: 0; 2376 | -webkit-transform: translateX(2000px); 2377 | transform: translateX(2000px) 2378 | } 2379 | } 2380 | 2381 | @keyframes slideOutRight { 2382 | 0% { 2383 | -webkit-transform: translateX(0); 2384 | -ms-transform: translateX(0); 2385 | transform: translateX(0) 2386 | } 2387 | 100% { 2388 | opacity: 0; 2389 | -webkit-transform: translateX(2000px); 2390 | -ms-transform: translateX(2000px); 2391 | transform: translateX(2000px) 2392 | } 2393 | } 2394 | 2395 | .slideOutRight { 2396 | -webkit-animation-name: slideOutRight; 2397 | animation-name: slideOutRight 2398 | } 2399 | 2400 | @-webkit-keyframes slideOutUp { 2401 | 0% { 2402 | -webkit-transform: translateY(0); 2403 | transform: translateY(0) 2404 | } 2405 | 100% { 2406 | opacity: 0; 2407 | -webkit-transform: translateY(-2000px); 2408 | transform: translateY(-2000px) 2409 | } 2410 | } 2411 | 2412 | @keyframes slideOutUp { 2413 | 0% { 2414 | -webkit-transform: translateY(0); 2415 | -ms-transform: translateY(0); 2416 | transform: translateY(0) 2417 | } 2418 | 100% { 2419 | opacity: 0; 2420 | -webkit-transform: translateY(-2000px); 2421 | -ms-transform: translateY(-2000px); 2422 | transform: translateY(-2000px) 2423 | } 2424 | } 2425 | 2426 | .slideOutUp { 2427 | -webkit-animation-name: slideOutUp; 2428 | animation-name: slideOutUp 2429 | } 2430 | 2431 | @-webkit-keyframes slideInUp { 2432 | 0% { 2433 | opacity: 0; 2434 | -webkit-transform: translateY(2000px); 2435 | transform: translateY(2000px) 2436 | } 2437 | 100% { 2438 | opacity: 1; 2439 | -webkit-transform: translateY(0); 2440 | transform: translateY(0) 2441 | } 2442 | } 2443 | 2444 | @keyframes slideInUp { 2445 | 0% { 2446 | opacity: 0; 2447 | -webkit-transform: translateY(2000px); 2448 | -ms-transform: translateY(2000px); 2449 | transform: translateY(2000px) 2450 | } 2451 | 100% { 2452 | opacity: 1; 2453 | -webkit-transform: translateY(0); 2454 | -ms-transform: translateY(0); 2455 | transform: translateY(0) 2456 | } 2457 | } 2458 | 2459 | .slideInUp { 2460 | -webkit-animation-name: slideInUp; 2461 | animation-name: slideInUp 2462 | } 2463 | 2464 | @-webkit-keyframes slideOutDown { 2465 | 0% { 2466 | -webkit-transform: translateY(0); 2467 | transform: translateY(0) 2468 | } 2469 | 100% { 2470 | opacity: 0; 2471 | -webkit-transform: translateY(2000px); 2472 | transform: translateY(2000px) 2473 | } 2474 | } 2475 | 2476 | @keyframes slideOutDown { 2477 | 0% { 2478 | -webkit-transform: translateY(0); 2479 | -ms-transform: translateY(0); 2480 | transform: translateY(0) 2481 | } 2482 | 100% { 2483 | opacity: 0; 2484 | -webkit-transform: translateY(2000px); 2485 | -ms-transform: translateY(2000px); 2486 | transform: translateY(2000px) 2487 | } 2488 | } 2489 | 2490 | .slideOutDown { 2491 | -webkit-animation-name: slideOutDown; 2492 | animation-name: slideOutDown 2493 | } 2494 | 2495 | @-webkit-keyframes hinge { 2496 | 0% { 2497 | -webkit-transform: rotate(0); 2498 | transform: rotate(0); 2499 | -webkit-transform-origin: top left; 2500 | transform-origin: top left; 2501 | -webkit-animation-timing-function: ease-in-out; 2502 | animation-timing-function: ease-in-out 2503 | } 2504 | 20%, 60% { 2505 | -webkit-transform: rotate(80deg); 2506 | transform: rotate(80deg); 2507 | -webkit-transform-origin: top left; 2508 | transform-origin: top left; 2509 | -webkit-animation-timing-function: ease-in-out; 2510 | animation-timing-function: ease-in-out 2511 | } 2512 | 40% { 2513 | -webkit-transform: rotate(60deg); 2514 | transform: rotate(60deg); 2515 | -webkit-transform-origin: top left; 2516 | transform-origin: top left; 2517 | -webkit-animation-timing-function: ease-in-out; 2518 | animation-timing-function: ease-in-out 2519 | } 2520 | 80% { 2521 | -webkit-transform: rotate(60deg) translateY(0); 2522 | transform: rotate(60deg) translateY(0); 2523 | -webkit-transform-origin: top left; 2524 | transform-origin: top left; 2525 | -webkit-animation-timing-function: ease-in-out; 2526 | animation-timing-function: ease-in-out; 2527 | opacity: 1 2528 | } 2529 | 100% { 2530 | -webkit-transform: translateY(700px); 2531 | transform: translateY(700px); 2532 | opacity: 0 2533 | } 2534 | } 2535 | 2536 | @keyframes hinge { 2537 | 0% { 2538 | -webkit-transform: rotate(0); 2539 | -ms-transform: rotate(0); 2540 | transform: rotate(0); 2541 | -webkit-transform-origin: top left; 2542 | -ms-transform-origin: top left; 2543 | transform-origin: top left; 2544 | -webkit-animation-timing-function: ease-in-out; 2545 | animation-timing-function: ease-in-out 2546 | } 2547 | 20%, 60% { 2548 | -webkit-transform: rotate(80deg); 2549 | -ms-transform: rotate(80deg); 2550 | transform: rotate(80deg); 2551 | -webkit-transform-origin: top left; 2552 | -ms-transform-origin: top left; 2553 | transform-origin: top left; 2554 | -webkit-animation-timing-function: ease-in-out; 2555 | animation-timing-function: ease-in-out 2556 | } 2557 | 40% { 2558 | -webkit-transform: rotate(60deg); 2559 | -ms-transform: rotate(60deg); 2560 | transform: rotate(60deg); 2561 | -webkit-transform-origin: top left; 2562 | -ms-transform-origin: top left; 2563 | transform-origin: top left; 2564 | -webkit-animation-timing-function: ease-in-out; 2565 | animation-timing-function: ease-in-out 2566 | } 2567 | 80% { 2568 | -webkit-transform: rotate(60deg) translateY(0); 2569 | -ms-transform: rotate(60deg) translateY(0); 2570 | transform: rotate(60deg) translateY(0); 2571 | -webkit-transform-origin: top left; 2572 | -ms-transform-origin: top left; 2573 | transform-origin: top left; 2574 | -webkit-animation-timing-function: ease-in-out; 2575 | animation-timing-function: ease-in-out; 2576 | opacity: 1 2577 | } 2578 | 100% { 2579 | -webkit-transform: translateY(700px); 2580 | -ms-transform: translateY(700px); 2581 | transform: translateY(700px); 2582 | opacity: 0 2583 | } 2584 | } 2585 | 2586 | .hinge { 2587 | -webkit-animation-name: hinge; 2588 | animation-name: hinge 2589 | } 2590 | 2591 | @-webkit-keyframes rollIn { 2592 | 0% { 2593 | opacity: 0; 2594 | -webkit-transform: translateX(-100%) rotate(-120deg); 2595 | transform: translateX(-100%) rotate(-120deg) 2596 | } 2597 | 100% { 2598 | opacity: 1; 2599 | -webkit-transform: translateX(0px) rotate(0deg); 2600 | transform: translateX(0px) rotate(0deg) 2601 | } 2602 | } 2603 | 2604 | @keyframes rollIn { 2605 | 0% { 2606 | opacity: 0; 2607 | -webkit-transform: translateX(-100%) rotate(-120deg); 2608 | -ms-transform: translateX(-100%) rotate(-120deg); 2609 | transform: translateX(-100%) rotate(-120deg) 2610 | } 2611 | 100% { 2612 | opacity: 1; 2613 | -webkit-transform: translateX(0px) rotate(0deg); 2614 | -ms-transform: translateX(0px) rotate(0deg); 2615 | transform: translateX(0px) rotate(0deg) 2616 | } 2617 | } 2618 | 2619 | .rollIn { 2620 | -webkit-animation-name: rollIn; 2621 | animation-name: rollIn 2622 | } 2623 | 2624 | @-webkit-keyframes rollOut { 2625 | 0% { 2626 | opacity: 1; 2627 | -webkit-transform: translateX(0px) rotate(0deg); 2628 | transform: translateX(0px) rotate(0deg) 2629 | } 2630 | 100% { 2631 | opacity: 0; 2632 | -webkit-transform: translateX(100%) rotate(120deg); 2633 | transform: translateX(100%) rotate(120deg) 2634 | } 2635 | } 2636 | 2637 | @keyframes rollOut { 2638 | 0% { 2639 | opacity: 1; 2640 | -webkit-transform: translateX(0px) rotate(0deg); 2641 | -ms-transform: translateX(0px) rotate(0deg); 2642 | transform: translateX(0px) rotate(0deg) 2643 | } 2644 | 100% { 2645 | opacity: 0; 2646 | -webkit-transform: translateX(100%) rotate(120deg); 2647 | -ms-transform: translateX(100%) rotate(120deg); 2648 | transform: translateX(100%) rotate(120deg) 2649 | } 2650 | } 2651 | 2652 | .rollOut { 2653 | -webkit-animation-name: rollOut; 2654 | animation-name: rollOut 2655 | } 2656 | 2657 | @-webkit-keyframes zoomIn { 2658 | 0% { 2659 | opacity: 0; 2660 | -webkit-transform: scale(.3); 2661 | transform: scale(.3) 2662 | } 2663 | 50% { 2664 | opacity: 1 2665 | } 2666 | } 2667 | 2668 | @keyframes zoomIn { 2669 | 0% { 2670 | opacity: 0; 2671 | -webkit-transform: scale(.3); 2672 | -ms-transform: scale(.3); 2673 | transform: scale(.3) 2674 | } 2675 | 50% { 2676 | opacity: 1 2677 | } 2678 | } 2679 | 2680 | .zoomIn { 2681 | -webkit-animation-name: zoomIn; 2682 | animation-name: zoomIn 2683 | } 2684 | 2685 | @-webkit-keyframes zoomInDown { 2686 | 0% { 2687 | opacity: 0; 2688 | -webkit-transform: scale(.1) translateY(-2000px); 2689 | transform: scale(.1) translateY(-2000px); 2690 | -webkit-animation-timing-function: ease-in-out; 2691 | animation-timing-function: ease-in-out 2692 | } 2693 | 60% { 2694 | opacity: 1; 2695 | -webkit-transform: scale(.475) translateY(60px); 2696 | transform: scale(.475) translateY(60px); 2697 | -webkit-animation-timing-function: ease-out; 2698 | animation-timing-function: ease-out 2699 | } 2700 | } 2701 | 2702 | @keyframes zoomInDown { 2703 | 0% { 2704 | opacity: 0; 2705 | -webkit-transform: scale(.1) translateY(-2000px); 2706 | -ms-transform: scale(.1) translateY(-2000px); 2707 | transform: scale(.1) translateY(-2000px); 2708 | -webkit-animation-timing-function: ease-in-out; 2709 | animation-timing-function: ease-in-out 2710 | } 2711 | 60% { 2712 | opacity: 1; 2713 | -webkit-transform: scale(.475) translateY(60px); 2714 | -ms-transform: scale(.475) translateY(60px); 2715 | transform: scale(.475) translateY(60px); 2716 | -webkit-animation-timing-function: ease-out; 2717 | animation-timing-function: ease-out 2718 | } 2719 | } 2720 | 2721 | .zoomInDown { 2722 | -webkit-animation-name: zoomInDown; 2723 | animation-name: zoomInDown 2724 | } 2725 | 2726 | @-webkit-keyframes zoomInLeft { 2727 | 0% { 2728 | opacity: 0; 2729 | -webkit-transform: scale(.1) translateX(-2000px); 2730 | transform: scale(.1) translateX(-2000px); 2731 | -webkit-animation-timing-function: ease-in-out; 2732 | animation-timing-function: ease-in-out 2733 | } 2734 | 60% { 2735 | opacity: 1; 2736 | -webkit-transform: scale(.475) translateX(48px); 2737 | transform: scale(.475) translateX(48px); 2738 | -webkit-animation-timing-function: ease-out; 2739 | animation-timing-function: ease-out 2740 | } 2741 | } 2742 | 2743 | @keyframes zoomInLeft { 2744 | 0% { 2745 | opacity: 0; 2746 | -webkit-transform: scale(.1) translateX(-2000px); 2747 | -ms-transform: scale(.1) translateX(-2000px); 2748 | transform: scale(.1) translateX(-2000px); 2749 | -webkit-animation-timing-function: ease-in-out; 2750 | animation-timing-function: ease-in-out 2751 | } 2752 | 60% { 2753 | opacity: 1; 2754 | -webkit-transform: scale(.475) translateX(48px); 2755 | -ms-transform: scale(.475) translateX(48px); 2756 | transform: scale(.475) translateX(48px); 2757 | -webkit-animation-timing-function: ease-out; 2758 | animation-timing-function: ease-out 2759 | } 2760 | } 2761 | 2762 | .zoomInLeft { 2763 | -webkit-animation-name: zoomInLeft; 2764 | animation-name: zoomInLeft 2765 | } 2766 | 2767 | @-webkit-keyframes zoomInRight { 2768 | 0% { 2769 | opacity: 0; 2770 | -webkit-transform: scale(.1) translateX(2000px); 2771 | transform: scale(.1) translateX(2000px); 2772 | -webkit-animation-timing-function: ease-in-out; 2773 | animation-timing-function: ease-in-out 2774 | } 2775 | 60% { 2776 | opacity: 1; 2777 | -webkit-transform: scale(.475) translateX(-48px); 2778 | transform: scale(.475) translateX(-48px); 2779 | -webkit-animation-timing-function: ease-out; 2780 | animation-timing-function: ease-out 2781 | } 2782 | } 2783 | 2784 | @keyframes zoomInRight { 2785 | 0% { 2786 | opacity: 0; 2787 | -webkit-transform: scale(.1) translateX(2000px); 2788 | -ms-transform: scale(.1) translateX(2000px); 2789 | transform: scale(.1) translateX(2000px); 2790 | -webkit-animation-timing-function: ease-in-out; 2791 | animation-timing-function: ease-in-out 2792 | } 2793 | 60% { 2794 | opacity: 1; 2795 | -webkit-transform: scale(.475) translateX(-48px); 2796 | -ms-transform: scale(.475) translateX(-48px); 2797 | transform: scale(.475) translateX(-48px); 2798 | -webkit-animation-timing-function: ease-out; 2799 | animation-timing-function: ease-out 2800 | } 2801 | } 2802 | 2803 | .zoomInRight { 2804 | -webkit-animation-name: zoomInRight; 2805 | animation-name: zoomInRight 2806 | } 2807 | 2808 | @-webkit-keyframes zoomInUp { 2809 | 0% { 2810 | opacity: 0; 2811 | -webkit-transform: scale(.1) translateY(2000px); 2812 | transform: scale(.1) translateY(2000px); 2813 | -webkit-animation-timing-function: ease-in-out; 2814 | animation-timing-function: ease-in-out 2815 | } 2816 | 60% { 2817 | opacity: 1; 2818 | -webkit-transform: scale(.475) translateY(-60px); 2819 | transform: scale(.475) translateY(-60px); 2820 | -webkit-animation-timing-function: ease-out; 2821 | animation-timing-function: ease-out 2822 | } 2823 | } 2824 | 2825 | @keyframes zoomInUp { 2826 | 0% { 2827 | opacity: 0; 2828 | -webkit-transform: scale(.1) translateY(2000px); 2829 | -ms-transform: scale(.1) translateY(2000px); 2830 | transform: scale(.1) translateY(2000px); 2831 | -webkit-animation-timing-function: ease-in-out; 2832 | animation-timing-function: ease-in-out 2833 | } 2834 | 60% { 2835 | opacity: 1; 2836 | -webkit-transform: scale(.475) translateY(-60px); 2837 | -ms-transform: scale(.475) translateY(-60px); 2838 | transform: scale(.475) translateY(-60px); 2839 | -webkit-animation-timing-function: ease-out; 2840 | animation-timing-function: ease-out 2841 | } 2842 | } 2843 | 2844 | .zoomInUp { 2845 | -webkit-animation-name: zoomInUp; 2846 | animation-name: zoomInUp 2847 | } 2848 | 2849 | @-webkit-keyframes zoomOut { 2850 | 0% { 2851 | opacity: 1; 2852 | -webkit-transform: scale(1); 2853 | transform: scale(1) 2854 | } 2855 | 50% { 2856 | opacity: 0; 2857 | -webkit-transform: scale(.3); 2858 | transform: scale(.3) 2859 | } 2860 | 100% { 2861 | opacity: 0 2862 | } 2863 | } 2864 | 2865 | @keyframes zoomOut { 2866 | 0% { 2867 | opacity: 1; 2868 | -webkit-transform: scale(1); 2869 | -ms-transform: scale(1); 2870 | transform: scale(1) 2871 | } 2872 | 50% { 2873 | opacity: 0; 2874 | -webkit-transform: scale(.3); 2875 | -ms-transform: scale(.3); 2876 | transform: scale(.3) 2877 | } 2878 | 100% { 2879 | opacity: 0 2880 | } 2881 | } 2882 | 2883 | .zoomOut { 2884 | -webkit-animation-name: zoomOut; 2885 | animation-name: zoomOut 2886 | } 2887 | 2888 | @-webkit-keyframes zoomOutDown { 2889 | 40% { 2890 | opacity: 1; 2891 | -webkit-transform: scale(.475) translateY(-60px); 2892 | transform: scale(.475) translateY(-60px); 2893 | -webkit-animation-timing-function: linear; 2894 | animation-timing-function: linear 2895 | } 2896 | 100% { 2897 | opacity: 0; 2898 | -webkit-transform: scale(.1) translateY(2000px); 2899 | transform: scale(.1) translateY(2000px); 2900 | -webkit-transform-origin: center bottom; 2901 | transform-origin: center bottom 2902 | } 2903 | } 2904 | 2905 | @keyframes zoomOutDown { 2906 | 40% { 2907 | opacity: 1; 2908 | -webkit-transform: scale(.475) translateY(-60px); 2909 | -ms-transform: scale(.475) translateY(-60px); 2910 | transform: scale(.475) translateY(-60px); 2911 | -webkit-animation-timing-function: linear; 2912 | animation-timing-function: linear 2913 | } 2914 | 100% { 2915 | opacity: 0; 2916 | -webkit-transform: scale(.1) translateY(2000px); 2917 | -ms-transform: scale(.1) translateY(2000px); 2918 | transform: scale(.1) translateY(2000px); 2919 | -webkit-transform-origin: center bottom; 2920 | -ms-transform-origin: center bottom; 2921 | transform-origin: center bottom 2922 | } 2923 | } 2924 | 2925 | .zoomOutDown { 2926 | -webkit-animation-name: zoomOutDown; 2927 | animation-name: zoomOutDown 2928 | } 2929 | 2930 | @-webkit-keyframes zoomOutLeft { 2931 | 40% { 2932 | opacity: 1; 2933 | -webkit-transform: scale(.475) translateX(42px); 2934 | transform: scale(.475) translateX(42px); 2935 | -webkit-animation-timing-function: linear; 2936 | animation-timing-function: linear 2937 | } 2938 | 100% { 2939 | opacity: 0; 2940 | -webkit-transform: scale(.1) translateX(-2000px); 2941 | transform: scale(.1) translateX(-2000px); 2942 | -webkit-transform-origin: left center; 2943 | transform-origin: left center 2944 | } 2945 | } 2946 | 2947 | @keyframes zoomOutLeft { 2948 | 40% { 2949 | opacity: 1; 2950 | -webkit-transform: scale(.475) translateX(42px); 2951 | -ms-transform: scale(.475) translateX(42px); 2952 | transform: scale(.475) translateX(42px); 2953 | -webkit-animation-timing-function: linear; 2954 | animation-timing-function: linear 2955 | } 2956 | 100% { 2957 | opacity: 0; 2958 | -webkit-transform: scale(.1) translateX(-2000px); 2959 | -ms-transform: scale(.1) translateX(-2000px); 2960 | transform: scale(.1) translateX(-2000px); 2961 | -webkit-transform-origin: left center; 2962 | -ms-transform-origin: left center; 2963 | transform-origin: left center 2964 | } 2965 | } 2966 | 2967 | .zoomOutLeft { 2968 | -webkit-animation-name: zoomOutLeft; 2969 | animation-name: zoomOutLeft 2970 | } 2971 | 2972 | @-webkit-keyframes zoomOutRight { 2973 | 40% { 2974 | opacity: 1; 2975 | -webkit-transform: scale(.475) translateX(-42px); 2976 | transform: scale(.475) translateX(-42px); 2977 | -webkit-animation-timing-function: linear; 2978 | animation-timing-function: linear 2979 | } 2980 | 100% { 2981 | opacity: 0; 2982 | -webkit-transform: scale(.1) translateX(2000px); 2983 | transform: scale(.1) translateX(2000px); 2984 | -webkit-transform-origin: right center; 2985 | transform-origin: right center 2986 | } 2987 | } 2988 | 2989 | @keyframes zoomOutRight { 2990 | 40% { 2991 | opacity: 1; 2992 | -webkit-transform: scale(.475) translateX(-42px); 2993 | -ms-transform: scale(.475) translateX(-42px); 2994 | transform: scale(.475) translateX(-42px); 2995 | -webkit-animation-timing-function: linear; 2996 | animation-timing-function: linear 2997 | } 2998 | 100% { 2999 | opacity: 0; 3000 | -webkit-transform: scale(.1) translateX(2000px); 3001 | -ms-transform: scale(.1) translateX(2000px); 3002 | transform: scale(.1) translateX(2000px); 3003 | -webkit-transform-origin: right center; 3004 | -ms-transform-origin: right center; 3005 | transform-origin: right center 3006 | } 3007 | } 3008 | 3009 | .zoomOutRight { 3010 | -webkit-animation-name: zoomOutRight; 3011 | animation-name: zoomOutRight 3012 | } 3013 | 3014 | @-webkit-keyframes zoomOutUp { 3015 | 40% { 3016 | opacity: 1; 3017 | -webkit-transform: scale(.475) translateY(60px); 3018 | transform: scale(.475) translateY(60px); 3019 | -webkit-animation-timing-function: linear; 3020 | animation-timing-function: linear 3021 | } 3022 | 100% { 3023 | opacity: 0; 3024 | -webkit-transform: scale(.1) translateY(-2000px); 3025 | transform: scale(.1) translateY(-2000px); 3026 | -webkit-transform-origin: center top; 3027 | transform-origin: center top 3028 | } 3029 | } 3030 | 3031 | @keyframes zoomOutUp { 3032 | 40% { 3033 | opacity: 1; 3034 | -webkit-transform: scale(.475) translateY(60px); 3035 | -ms-transform: scale(.475) translateY(60px); 3036 | transform: scale(.475) translateY(60px); 3037 | -webkit-animation-timing-function: linear; 3038 | animation-timing-function: linear 3039 | } 3040 | 100% { 3041 | opacity: 0; 3042 | -webkit-transform: scale(.1) translateY(-2000px); 3043 | -ms-transform: scale(.1) translateY(-2000px); 3044 | transform: scale(.1) translateY(-2000px); 3045 | -webkit-transform-origin: center top; 3046 | -ms-transform-origin: center top; 3047 | transform-origin: center top 3048 | } 3049 | } 3050 | 3051 | .zoomOutUp { 3052 | -webkit-animation-name: zoomOutUp; 3053 | animation-name: zoomOutUp 3054 | } 3055 | -------------------------------------------------------------------------------- /src/assets/img/ic-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Anonlyy/wx_iciba/ce86905411fc42dbf4d697e55f506a0e2fe95424/src/assets/img/ic-error.png -------------------------------------------------------------------------------- /src/assets/img/index_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Anonlyy/wx_iciba/ce86905411fc42dbf4d697e55f506a0e2fe95424/src/assets/img/index_bg.jpg -------------------------------------------------------------------------------- /src/assets/img/log.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Anonlyy/wx_iciba/ce86905411fc42dbf4d697e55f506a0e2fe95424/src/assets/img/log.png -------------------------------------------------------------------------------- /src/assets/img/tabbar/tabBar_ic_index.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Anonlyy/wx_iciba/ce86905411fc42dbf4d697e55f506a0e2fe95424/src/assets/img/tabbar/tabBar_ic_index.png -------------------------------------------------------------------------------- /src/assets/img/tabbar/tabBar_ic_index_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Anonlyy/wx_iciba/ce86905411fc42dbf4d697e55f506a0e2fe95424/src/assets/img/tabbar/tabBar_ic_index_active.png -------------------------------------------------------------------------------- /src/assets/img/tabbar/tabBar_ic_translate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Anonlyy/wx_iciba/ce86905411fc42dbf4d697e55f506a0e2fe95424/src/assets/img/tabbar/tabBar_ic_translate.png -------------------------------------------------------------------------------- /src/assets/img/tabbar/tabBar_ic_translate_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Anonlyy/wx_iciba/ce86905411fc42dbf4d697e55f506a0e2fe95424/src/assets/img/tabbar/tabBar_ic_translate_active.png -------------------------------------------------------------------------------- /src/components/backTop.wpy: -------------------------------------------------------------------------------- 1 | 8 | 37 | 38 | 79 | -------------------------------------------------------------------------------- /src/components/dialog.wpy: -------------------------------------------------------------------------------- 1 | 22 | 74 | 75 | 146 | -------------------------------------------------------------------------------- /src/components/discContainer.wpy: -------------------------------------------------------------------------------- 1 | 182 | 310 | 311 | 539 | -------------------------------------------------------------------------------- /src/components/firstScreen.wpy: -------------------------------------------------------------------------------- 1 | 6 | 57 | 58 | 78 | -------------------------------------------------------------------------------- /src/components/interfaceContent.wpy: -------------------------------------------------------------------------------- 1 | 37 | 109 | 110 | 157 | -------------------------------------------------------------------------------- /src/components/sound.wpy: -------------------------------------------------------------------------------- 1 | 7 | 65 | 66 | 82 | -------------------------------------------------------------------------------- /src/index.template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 金山词霸 10 | 13 | 14 | 15 |
16 | 17 |
11111
18 | 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /src/pages/index.wpy: -------------------------------------------------------------------------------- 1 | 34 | 35 | 127 | 128 | 238 | -------------------------------------------------------------------------------- /src/pages/translate.wpy: -------------------------------------------------------------------------------- 1 | 39 | 234 | 235 | 358 | -------------------------------------------------------------------------------- /src/utils/Base64.js: -------------------------------------------------------------------------------- 1 | !function(e){function r(e){for(var r,t,n=String(e),i=o,f=0,a="",c=.75;!isNaN(r=n.charCodeAt(c))||63&f||(i="=",(c-.75)%1);c+=.75)if(r>127){(t=encodeURI(n.charAt(c)).split("%")).shift();for(var d,s=c%1;d=t[0|s];s+=.75)f=f<<8|parseInt(d,16),a+=i.charAt(63&f>>8-s%1*8);c=.75===c?0:c,c+=.75*t.length%1}else f=f<<8|r,a+=i.charAt(63&f>>8-c%1*8);return a}function t(e){var r,t=String(e),n=o.slice(0,-1),i=[6,4,2,0],f="",a=0,c=0,d="";try{for(var s=0;(r=n.indexOf(t[s]))>-1;s++)a=a<<6|r,s%4&&(c=255&a>>i[s%4],c<128?(f+=d?decodeURI(d):"",f+=String.fromCharCode(c),d=""):d+="%"+("0"+c.toString(16)).slice(-2));return f+=d?decodeURI(d):""}catch(e){throw new Error("base64 malformed!")}}var o="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",n={encode:r,decode:t};if("function"==typeof define&&define.amd)define(function(){return n});else if("object"==typeof exports)for(var i in n)n.hasOwnProperty(i)&&(exports[i]=n[i]);else e.base64=n}("object"==typeof global&&global||this); 2 | -------------------------------------------------------------------------------- /src/utils/MD5.js: -------------------------------------------------------------------------------- 1 | var MD5 = function (string) { 2 | 3 | function RotateLeft(lValue, iShiftBits) { 4 | return (lValue<>>(32-iShiftBits)); 5 | } 6 | 7 | function AddUnsigned(lX,lY) { 8 | var lX4,lY4,lX8,lY8,lResult; 9 | lX8 = (lX & 0x80000000); 10 | lY8 = (lY & 0x80000000); 11 | lX4 = (lX & 0x40000000); 12 | lY4 = (lY & 0x40000000); 13 | lResult = (lX & 0x3FFFFFFF)+(lY & 0x3FFFFFFF); 14 | if (lX4 & lY4) { 15 | return (lResult ^ 0x80000000 ^ lX8 ^ lY8); 16 | } 17 | if (lX4 | lY4) { 18 | if (lResult & 0x40000000) { 19 | return (lResult ^ 0xC0000000 ^ lX8 ^ lY8); 20 | } else { 21 | return (lResult ^ 0x40000000 ^ lX8 ^ lY8); 22 | } 23 | } else { 24 | return (lResult ^ lX8 ^ lY8); 25 | } 26 | } 27 | 28 | function F(x,y,z) { return (x & y) | ((~x) & z); } 29 | function G(x,y,z) { return (x & z) | (y & (~z)); } 30 | function H(x,y,z) { return (x ^ y ^ z); } 31 | function I(x,y,z) { return (y ^ (x | (~z))); } 32 | 33 | function FF(a,b,c,d,x,s,ac) { 34 | a = AddUnsigned(a, AddUnsigned(AddUnsigned(F(b, c, d), x), ac)); 35 | return AddUnsigned(RotateLeft(a, s), b); 36 | }; 37 | 38 | function GG(a,b,c,d,x,s,ac) { 39 | a = AddUnsigned(a, AddUnsigned(AddUnsigned(G(b, c, d), x), ac)); 40 | return AddUnsigned(RotateLeft(a, s), b); 41 | }; 42 | 43 | function HH(a,b,c,d,x,s,ac) { 44 | a = AddUnsigned(a, AddUnsigned(AddUnsigned(H(b, c, d), x), ac)); 45 | return AddUnsigned(RotateLeft(a, s), b); 46 | }; 47 | 48 | function II(a,b,c,d,x,s,ac) { 49 | a = AddUnsigned(a, AddUnsigned(AddUnsigned(I(b, c, d), x), ac)); 50 | return AddUnsigned(RotateLeft(a, s), b); 51 | }; 52 | 53 | function ConvertToWordArray(string) { 54 | var lWordCount; 55 | var lMessageLength = string.length; 56 | var lNumberOfWords_temp1=lMessageLength + 8; 57 | var lNumberOfWords_temp2=(lNumberOfWords_temp1-(lNumberOfWords_temp1 % 64))/64; 58 | var lNumberOfWords = (lNumberOfWords_temp2+1)*16; 59 | var lWordArray=Array(lNumberOfWords-1); 60 | var lBytePosition = 0; 61 | var lByteCount = 0; 62 | while ( lByteCount < lMessageLength ) { 63 | lWordCount = (lByteCount-(lByteCount % 4))/4; 64 | lBytePosition = (lByteCount % 4)*8; 65 | lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount)<>>29; 73 | return lWordArray; 74 | }; 75 | 76 | function WordToHex(lValue) { 77 | var WordToHexValue="",WordToHexValue_temp="",lByte,lCount; 78 | for (lCount = 0;lCount<=3;lCount++) { 79 | lByte = (lValue>>>(lCount*8)) & 255; 80 | WordToHexValue_temp = "0" + lByte.toString(16); 81 | WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length-2,2); 82 | } 83 | return WordToHexValue; 84 | }; 85 | 86 | function Utf8Encode(string) { 87 | string = string.replace(/\r\n/g,"\n"); 88 | var utftext = ""; 89 | 90 | for (var n = 0; n < string.length; n++) { 91 | 92 | var c = string.charCodeAt(n); 93 | 94 | if (c < 128) { 95 | utftext += String.fromCharCode(c); 96 | } 97 | else if((c > 127) && (c < 2048)) { 98 | utftext += String.fromCharCode((c >> 6) | 192); 99 | utftext += String.fromCharCode((c & 63) | 128); 100 | } 101 | else { 102 | utftext += String.fromCharCode((c >> 12) | 224); 103 | utftext += String.fromCharCode(((c >> 6) & 63) | 128); 104 | utftext += String.fromCharCode((c & 63) | 128); 105 | } 106 | 107 | } 108 | 109 | return utftext; 110 | }; 111 | 112 | var x=Array(); 113 | var k,AA,BB,CC,DD,a,b,c,d; 114 | var S11=7, S12=12, S13=17, S14=22; 115 | var S21=5, S22=9 , S23=14, S24=20; 116 | var S31=4, S32=11, S33=16, S34=23; 117 | var S41=6, S42=10, S43=15, S44=21; 118 | 119 | string = Utf8Encode(string); 120 | 121 | x = ConvertToWordArray(string); 122 | 123 | a = 0x67452301; b = 0xEFCDAB89; c = 0x98BADCFE; d = 0x10325476; 124 | 125 | for (k=0;k { 4 | wepy.showToast({ 5 | title: '加载中', 6 | icon: 'loading' 7 | }); 8 | 9 | let res = await wepy.request({ 10 | url: url, 11 | header:params.header || {}, 12 | method: params.method || 'GET', 13 | data: params.data || {}, 14 | }); 15 | // console.log(url); 16 | wepy.hideToast(); 17 | return res; 18 | }; 19 | //联想 20 | const getInterface = (params) => wxRequest(params, `https://dict-mobile.iciba.com/interface/index.php?c=word&m=getsuggest&nums=5&client=6&is_need_mean=1&word=${params.word}`); 21 | //释义（基础释义,英英词典,双语例句,网络释义,同义词,反义词,词组搭配,例句） 22 | const getWordMean = (params) => wxRequest(params, `https://www.iciba.com/index.php?a=getWordMean&c=search&list=1,4,8,9,12,13,14,3005&word=${params.word}`); 23 | //获取Access Token 24 | const getAccessToken = (params) => wxRequest(params, `https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${ImageAPIConfig.ApiKey}&client_secret=${ImageAPIConfig.SecretKey}`); 25 | //获取图片识别文字 26 | const getImageToText = (params) => wxRequest(params, `https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic`); 27 | 28 | //有道翻译API 29 | const getTranslate = (params) => wxRequest(params, `https://openapi.youdao.com/api?q=${params.q}&appKey=${encodeURI(YoudaoTranslateConfig.appKey)}&salt=${params.salt}&sign=${params.sign}&from=${params.from}&to=${params.to}`); 30 | //获取每日一句2018-03-03 31 | const getEveryDayWord = (params) =>wxRequest(params,`https://open.iciba.com/dsapi`); 32 | 33 | module.exports = { 34 | getInterface, 35 | getWordMean, 36 | getTranslate, 37 | getAccessToken, 38 | getImageToText, 39 | getEveryDayWord 40 | } 41 | -------------------------------------------------------------------------------- /src/utils/config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Xposean on 2018-1-31. 3 | */ 4 | module.exports = { 5 | exchangeFilter: { 6 | "word_pl": { 7 | value: '复数形式' 8 | }, 9 | "word_third": { 10 | value: '第三人称单数' 11 | }, 12 | "word_past": { 13 | value: '过去分词' 14 | }, 15 | "word_done": { 16 | value: '现在分词' 17 | }, 18 | "word_ing": { 19 | value: '正在进行时' 20 | }, 21 | "word_er": { 22 | value: '比较级' 23 | }, 24 | "word_est": { 25 | value: '最高级' 26 | }, 27 | "word_prep": { 28 | value: '介词形式' 29 | }, 30 | "word_adv": { 31 | value: '副词形式' 32 | }, 33 | "word_verb": { 34 | value: '动词形式' 35 | }, 36 | "word_noun": { 37 | value: '名词形式' 38 | }, 39 | "word_adj": { 40 | value: '形容词形式' 41 | }, 42 | "word_conn": { 43 | value: '连词形式' 44 | }, 45 | }, 46 | //翻译语言 '中文', '日文', '英文', '韩文', '法文', '葡萄牙文', '西班牙文' 47 | LanguageData: [ 48 | { 49 | name:'自动', 50 | key:'Auto' 51 | }, 52 | { 53 | name: '英文', 54 | key: 'EN' 55 | }, 56 | { 57 | name: '中文', 58 | key: 'zh-CHS' 59 | }, 60 | { 61 | name: '日文', 62 | key: 'ja' 63 | }, 64 | { 65 | name: '韩文', 66 | key: 'ko' 67 | }, 68 | 69 | { 70 | name: '法文', 71 | key: 'fr' 72 | }, 73 | { 74 | name: '俄文', 75 | key: 'ru' 76 | }, 77 | { 78 | name: '葡萄牙文', 79 | key: 'pt' 80 | }, 81 | { 82 | name: '西班牙文', 83 | key: 'es' 84 | } 85 | ], 86 | MultiArray: [[ '自动','英文', '中文', '日文', '韩文', '法文','俄文','葡萄牙文', '西班牙文'], ['自动','英文', '中文', '日文', '韩文', '法文','俄文', '葡萄牙文', '西班牙文']], 87 | //密钥可更换为自己的 88 | //图像识别API(仅供试用) 89 | ImageAPIConfig: { 90 | ApiKey: 'gxlKucQNdc9byyrQsx7bEGEk', 91 | SecretKey: 'bELd59TesCh6spRcQYqpBfuPyUZt5SWy' 92 | }, 93 | //有道翻译API(仅供试用) 94 | YoudaoTranslateConfig: { 95 | appKey: "3891f2b7f04c2513", 96 | SecretKey: 'gC4tO8eGSyGx4ay4slrPnBIkwuZT5uvr' 97 | }, 98 | //leanCloud 99 | LeanCloudConfig:{ 100 | appId: 'V3EpqkcYqP1k6wTpIBB5B7gI-gzGzoHsz', 101 | appKey: 'Hm1jsporRYVY45Ejy3NyuilD', 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /wepy.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | var prod = process.env.NODE_ENV === 'production' 3 | 4 | module.exports = { 5 | wpyExt: '.wpy', 6 | build: { 7 | web: { 8 | htmlTemplate: path.join('src', 'index.template.html'), 9 | htmlOutput: path.join('web', 'index.html'), 10 | jsOutput: path.join('web', 'index.js') 11 | } 12 | }, 13 | resolve: { 14 | alias: { 15 | counter: path.join(__dirname, 'src/components/counter'), 16 | '@': path.join(__dirname, 'src') 17 | }, 18 | modules: ['node_modules'] 19 | }, 20 | eslint: false, 21 | compilers: { 22 | // less: { 23 | // compress: true 24 | // }, 25 | sass: { 26 | outputStyle: 'compressed' 27 | }, 28 | babel: { 29 | sourceMap: true, 30 | presets: [ 31 | 'env', 32 | ], 33 | plugins: [ 34 | 'transform-class-properties', 35 | 'transform-decorators-legacy', 36 | 'transform-object-rest-spread', 37 | 'transform-export-extensions', 38 | "syntax-export-extensions" 39 | ] 40 | } 41 | }, 42 | plugins: { 43 | }, 44 | appConfig: { 45 | noPromiseAPI: ['createSelectorQuery'] 46 | } 47 | } 48 | 49 | if (prod) { 50 | 51 | delete module.exports.compilers.babel.sourcesMap; 52 | // 压缩sass 53 | module.exports.compilers['sass'] = {outputStyle: 'compressed'} 54 | 55 | // 压缩less 56 | // module.exports.compilers['less'] = {compress: true} 57 | 58 | // 压缩js 59 | module.exports.plugins = { 60 | uglifyjs: { 61 | filter: /\.js$/, 62 | config: { 63 | } 64 | }, 65 | imagemin: { 66 | filter: /\.(jpg|png|jpeg)$/, 67 | config: { 68 | jpg: { 69 | quality: 80 70 | }, 71 | png: { 72 | quality: 80 73 | } 74 | } 75 | } 76 | } 77 | } 78 | --------------------------------------------------------------------------------