mobiscroll.animation-2.5.2.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636
  1. .dw-trans .dw-persp {
  2. overflow: hidden;
  3. perspective: 1000;
  4. -webkit-perspective: 1000;
  5. -moz-perspective: 1000;
  6. }
  7. .dw-trans .dwwb {
  8. -webkit-backface-visibility: hidden;
  9. }
  10. .dw-in {
  11. animation-timing-function: ease-out;
  12. animation-duration: 350ms;
  13. -webkit-animation-timing-function: ease-out;
  14. -webkit-animation-duration: 350ms;
  15. -moz-animation-timing-function: ease-out;
  16. -moz-animation-duration: 350ms;
  17. }
  18. .dw-out {
  19. animation-timing-function: ease-in;
  20. animation-duration: 350ms;
  21. -webkit-animation-timing-function: ease-in;
  22. -webkit-animation-duration: 350ms;
  23. -moz-animation-timing-function: ease-in;
  24. -moz-animation-duration: 350ms;
  25. }
  26. .dw-flip,
  27. .dw-swing,
  28. .dw-slidehorizontal,
  29. .dw-slidevertical,
  30. .dw-slidedown,
  31. .dw-slideup,
  32. .dw-fade {
  33. backface-visibility: hidden;
  34. transform: translateX(0);
  35. -webkit-backface-visibility: hidden;
  36. -webkit-transform: translateX(0);
  37. -moz-backface-visibility: hidden;
  38. -moz-transform: translateX(0);
  39. }
  40. .dw-swing,
  41. .dw-slidehorizontal,
  42. .dw-slidevertical,
  43. .dw-slidedown,
  44. .dw-slideup,
  45. .dw-fade {
  46. transform-origin: 0 0;
  47. -webkit-transform-origin: 0 0;
  48. -moz-transform-origin: 0 0;
  49. }
  50. .dw-flip,
  51. .dw-pop {
  52. transform-origin: 50% 50%;
  53. -webkit-transform-origin: 50% 50%;
  54. -moz-transform-origin: 50% 50%;
  55. }
  56. .dw-pop.dw-in {
  57. opacity: 1;
  58. transform: scale(1);
  59. animation-name: dw-p-in;
  60. -webkit-animation-name: dw-p-in;
  61. -webkit-transform: scale(1);
  62. -moz-animation-name: dw-p-in;
  63. -moz-transform: scale(1);
  64. }
  65. .dw-pop.dw-out {
  66. opacity: 0;
  67. animation-name: dw-p-out;
  68. -webkit-animation-name: dw-p-out;
  69. -moz-animation-name: dw-p-out;
  70. }
  71. .dw-flip.dw-in {
  72. opacity: 1;
  73. transform: scale(1);
  74. animation-name: dw-fl-in;
  75. -webkit-animation-name: dw-fl-in;
  76. -webkit-transform: scale(1);
  77. -moz-animation-name: dw-fl-in;
  78. -moz-transform: scale(1);
  79. }
  80. .dw-flip.dw-out {
  81. opacity: 0;
  82. animation-name: dw-fl-out;
  83. -webkit-animation-name: dw-fl-out;
  84. -moz-animation-name: dw-fl-out;
  85. }
  86. .dw-swing.dw-in {
  87. opacity: 1;
  88. transform: scale(1);
  89. animation-name: dw-sw-in;
  90. -webkit-animation-name: dw-sw-in;
  91. -webkit-transform: scale(1);
  92. -moz-animation-name: dw-sw-in;
  93. -moz-transform: scale(1);
  94. }
  95. .dw-swing.dw-out {
  96. opacity: 0;
  97. animation-name: dw-sw-out;
  98. -webkit-animation-name: dw-sw-out;
  99. -moz-animation-name: dw-sw-out;
  100. }
  101. .dw-slidehorizontal.dw-in {
  102. opacity: 1;
  103. transform: scale(1);
  104. animation-name: dw-sh-in;
  105. -webkit-animation-name: dw-sh-in;
  106. -webkit-transform: scale(1);
  107. -moz-animation-name: dw-sh-in;
  108. -moz-transform: scale(1);
  109. }
  110. .dw-slidehorizontal.dw-out {
  111. opacity: 0;
  112. animation-name: dw-sh-out;
  113. -webkit-animation-name: dw-sh-out;
  114. -moz-animation-name: dw-sh-out;
  115. }
  116. .dw-slidevertical.dw-in {
  117. opacity: 1;
  118. animation-name: dw-dw-sv-in;
  119. transform: scale(1);
  120. -webkit-animation-name: dw-dw-sv-in;
  121. -webkit-transform: scale(1);
  122. -moz-animation-name: dw-dw-sv-in;
  123. -moz-transform: scale(1);
  124. }
  125. .dw-slidevertical.dw-out {
  126. opacity: 0;
  127. animation-name: dw-sv-out;
  128. -webkit-animation-name: dw-sv-out;
  129. -moz-animation-name: dw-sv-out;
  130. }
  131. .dw-slidedown.dw-in {
  132. animation-name: dw-sd-in;
  133. transform: scale(1);
  134. -webkit-animation-name: dw-sd-in;
  135. -webkit-transform: scale(1);
  136. -moz-animation-name: dw-sd-in;
  137. -moz-transform: scale(1);
  138. }
  139. .dw-slidedown.dw-out {
  140. animation-name: dw-sd-out;
  141. -webkit-animation-name: dw-sd-out;
  142. -moz-animation-name: dw-sd-out;
  143. }
  144. .dw-slideup.dw-in {
  145. transform: scale(1);
  146. animation-name: dw-su-in;
  147. -webkit-animation-name: dw-su-in;
  148. -webkit-transform: scale(1);
  149. -moz-animation-name: dw-su-in;
  150. -moz-transform: scale(1);
  151. }
  152. .dw-slideup.dw-out {
  153. animation-name: dw-su-out;
  154. -webkit-animation-name: dw-su-out;
  155. -moz-animation-name: dw-su-out;
  156. }
  157. .dw-fade.dw-in {
  158. opacity: 1;
  159. animation-name: dw-f-in;
  160. -webkit-animation-name: dw-f-in;
  161. -moz-animation-name: dw-f-in;
  162. }
  163. .dw-fade.dw-out {
  164. opacity: 0;
  165. animation-name: dw-f-out;
  166. -webkit-animation-name: dw-f-out;
  167. -moz-animation-name: dw-f-out;
  168. }
  169. /* Fade in */
  170. @keyframes dw-f-in {
  171. from {
  172. opacity: 0;
  173. }
  174. to {
  175. opacity: 1;
  176. }
  177. }
  178. @-webkit-keyframes dw-f-in {
  179. from {
  180. opacity: 0;
  181. }
  182. to {
  183. opacity: 1;
  184. }
  185. }
  186. @-moz-keyframes dw-f-in {
  187. from {
  188. opacity: 0;
  189. }
  190. to {
  191. opacity: 1;
  192. }
  193. }
  194. /* Fade out */
  195. @keyframes dw-f-out {
  196. from {
  197. opacity: 1;
  198. }
  199. to {
  200. opacity: 0;
  201. }
  202. }
  203. @-webkit-keyframes dw-f-out {
  204. from {
  205. opacity: 1;
  206. }
  207. to {
  208. opacity: 0;
  209. }
  210. }
  211. @-moz-keyframes dw-f-out {
  212. from {
  213. opacity: 1;
  214. }
  215. to {
  216. opacity: 0;
  217. }
  218. }
  219. /* Pop in */
  220. @keyframes dw-p-in {
  221. from {
  222. opacity: 0;
  223. transform: scale(0.8);
  224. }
  225. to {
  226. opacity: 1;
  227. transform: scale(1);
  228. }
  229. }
  230. @-webkit-keyframes dw-p-in {
  231. from {
  232. opacity: 0;
  233. -webkit-transform: scale(0.8);
  234. }
  235. to {
  236. opacity: 1;
  237. -webkit-transform: scale(1);
  238. }
  239. }
  240. @-moz-keyframes dw-p-in {
  241. from {
  242. opacity: 0;
  243. -moz-transform: scale(0.8);
  244. }
  245. to {
  246. opacity: 1;
  247. -moz-transform: scale(1);
  248. }
  249. }
  250. /* Pop out */
  251. @keyframes dw-p-out {
  252. from {
  253. opacity: 1;
  254. transform: scale(1);
  255. }
  256. to {
  257. opacity: 0;
  258. transform: scale(0.8);
  259. }
  260. }
  261. @-webkit-keyframes dw-p-out {
  262. from {
  263. opacity: 1;
  264. -webkit-transform: scale(1);
  265. }
  266. to {
  267. opacity: 0;
  268. -webkit-transform: scale(0.8);
  269. }
  270. }
  271. @-moz-keyframes dw-p-out {
  272. from {
  273. opacity: 1;
  274. -moz-transform: scale(1);
  275. }
  276. to {
  277. opacity: 0;
  278. -moz-transform: scale(0.8);
  279. }
  280. }
  281. /* Flip in */
  282. @keyframes dw-fl-in {
  283. from {
  284. opacity: 0;
  285. transform: rotateY(90deg);
  286. }
  287. to {
  288. opacity: 1;
  289. transform: rotateY(0);
  290. }
  291. }
  292. @-webkit-keyframes dw-fl-in {
  293. from {
  294. opacity: 0;
  295. -webkit-transform: rotateY(90deg);
  296. }
  297. to {
  298. opacity: 1;
  299. -webkit-transform: rotateY(0);
  300. }
  301. }
  302. @-moz-keyframes dw-fl-in {
  303. from {
  304. opacity: 0;
  305. -moz-transform: rotateY(90deg);
  306. }
  307. to {
  308. opacity: 1;
  309. -moz-transform: rotateY(0);
  310. }
  311. }
  312. /* Flip out */
  313. @keyframes dw-fl-out {
  314. from {
  315. opacity: 1;
  316. transform: rotateY(0deg);
  317. }
  318. to {
  319. opacity: 0;
  320. transform: rotateY(-90deg);
  321. }
  322. }
  323. @-webkit-keyframes dw-fl-out {
  324. from {
  325. opacity: 1;
  326. -webkit-transform: rotateY(0deg);
  327. }
  328. to {
  329. opacity: 0;
  330. -webkit-transform: rotateY(-90deg);
  331. }
  332. }
  333. @-moz-keyframes dw-fl-out {
  334. from {
  335. opacity: 1;
  336. -moz-transform: rotateY(0deg);
  337. }
  338. to {
  339. opacity: 0;
  340. -moz-transform: rotateY(-90deg);
  341. }
  342. }
  343. /* Swing in */
  344. @keyframes dw-sw-in {
  345. from {
  346. opacity: 0;
  347. transform: rotateY(-90deg);
  348. }
  349. to {
  350. opacity: 1;
  351. transform: rotateY(0deg);
  352. }
  353. }
  354. @-webkit-keyframes dw-sw-in {
  355. from {
  356. opacity: 0;
  357. -webkit-transform: rotateY(-90deg);
  358. }
  359. to {
  360. opacity: 1;
  361. -webkit-transform: rotateY(0deg);
  362. }
  363. }
  364. @-moz-keyframes dw-sw-in {
  365. from {
  366. opacity: 0;
  367. -moz-transform: rotateY(-90deg);
  368. }
  369. to {
  370. opacity: 1;
  371. -moz-transform: rotateY(0deg);
  372. }
  373. }
  374. /* Swing out */
  375. @keyframes dw-sw-out {
  376. from {
  377. opacity: 1;
  378. transform: rotateY(0deg);
  379. }
  380. to {
  381. opacity: 0;
  382. transform: rotateY(-90deg);
  383. }
  384. }
  385. @-webkit-keyframes dw-sw-out {
  386. from {
  387. opacity: 1;
  388. -webkit-transform: rotateY(0deg);
  389. }
  390. to {
  391. opacity: 0;
  392. -webkit-transform: rotateY(-90deg);
  393. }
  394. }
  395. @-moz-keyframes dw-sw-out {
  396. from {
  397. opacity: 1;
  398. -moz-transform: rotateY(0deg);
  399. }
  400. to {
  401. opacity: 0;
  402. -moz-transform: rotateY(-90deg);
  403. }
  404. }
  405. /* Slide horizontal in */
  406. @keyframes dw-sh-in {
  407. from {
  408. opacity: 0;
  409. transform: translateX(-100%);
  410. }
  411. to {
  412. opacity: 1;
  413. transform: translateX(0);
  414. }
  415. }
  416. @-webkit-keyframes dw-sh-in {
  417. from {
  418. opacity: 0;
  419. -webkit-transform: translateX(-100%);
  420. }
  421. to {
  422. opacity: 1;
  423. -webkit-transform: translateX(0);
  424. }
  425. }
  426. @-moz-keyframes dw-sh-in {
  427. from {
  428. opacity: 0;
  429. -moz-transform: translateX(-100%);
  430. }
  431. to {
  432. opacity: 1;
  433. -moz-transform: translateX(0);
  434. }
  435. }
  436. /* Slide horizontal out */
  437. @keyframes dw-sh-out {
  438. from {
  439. opacity: 1;
  440. transform: translateX(0);
  441. }
  442. to {
  443. opacity: 0;
  444. transform: translateX(100%);
  445. }
  446. }
  447. @-webkit-keyframes dw-sh-out {
  448. from {
  449. opacity: 1;
  450. -webkit-transform: translateX(0);
  451. }
  452. to {
  453. opacity: 0;
  454. -webkit-transform: translateX(100%);
  455. }
  456. }
  457. @-moz-keyframes dw-sh-out {
  458. from {
  459. opacity: 1;
  460. -moz-transform: translateX(0);
  461. }
  462. to {
  463. opacity: 0;
  464. -moz-transform: translateX(100%);
  465. }
  466. }
  467. /* Slide vertical in */
  468. @keyframes dw-dw-sv-in {
  469. from {
  470. opacity: 0;
  471. transform: translateY(-100%);
  472. }
  473. to {
  474. opacity: 1;
  475. transform: translateY(0);
  476. }
  477. }
  478. @-webkit-keyframes dw-dw-sv-in {
  479. from {
  480. opacity: 0;
  481. -webkit-transform: translateY(-100%);
  482. }
  483. to {
  484. opacity: 1;
  485. -webkit-transform: translateY(0);
  486. }
  487. }
  488. @-moz-keyframes dw-dw-sv-in {
  489. from {
  490. opacity: 0;
  491. -moz-transform: translateY(-100%);
  492. }
  493. to {
  494. opacity: 1;
  495. -moz-transform: translateY(0);
  496. }
  497. }
  498. /* Slide vertical out */
  499. @keyframes dw-sv-out {
  500. from {
  501. opacity: 1;
  502. transform: translateY(0);
  503. }
  504. to {
  505. opacity: 0;
  506. transform: translateY(100%);
  507. }
  508. }
  509. @-webkit-keyframes dw-sv-out {
  510. from {
  511. opacity: 1;
  512. -webkit-transform: translateY(0);
  513. }
  514. to {
  515. opacity: 0;
  516. -webkit-transform: translateY(100%);
  517. }
  518. }
  519. @-moz-keyframes dw-sv-out {
  520. from {
  521. opacity: 1;
  522. -moz-transform: translateY(0);
  523. }
  524. to {
  525. opacity: 0;
  526. -moz-transform: translateY(100%);
  527. }
  528. }
  529. /* Slide Down In */
  530. @keyframes dw-sd-in {
  531. from {
  532. transform: translateY(-100%);
  533. }
  534. to {
  535. transform: translateY(0);
  536. }
  537. }
  538. @-webkit-keyframes dw-sd-in {
  539. from {
  540. opacity: 1;
  541. -webkit-transform: translateY(-100%);
  542. }
  543. to {
  544. opacity: 1;
  545. -webkit-transform: translateY(0);
  546. }
  547. }
  548. @-moz-keyframes dw-sd-in {
  549. from {
  550. -moz-transform: translateY(-100%);
  551. }
  552. to {
  553. -moz-transform: translateY(0);
  554. }
  555. }
  556. /* Slide down out */
  557. @keyframes dw-sd-out {
  558. from {
  559. transform: translateY(0);
  560. }
  561. to {
  562. transform: translateY(-100%);
  563. }
  564. }
  565. @-webkit-keyframes dw-sd-out {
  566. from {
  567. opacity: 1;
  568. -webkit-transform: translateY(0);
  569. }
  570. to {
  571. opacity: 1;
  572. -webkit-transform: translateY(-100%);
  573. }
  574. }
  575. @-moz-keyframes dw-sd-out {
  576. from {
  577. -moz-transform: translateY(0);
  578. }
  579. to {
  580. -moz-transform: translateY(-100%);
  581. }
  582. }
  583. /* Slide Up In */
  584. @keyframes dw-su-in {
  585. from {
  586. transform: translateY(100%);
  587. }
  588. to {
  589. transform: translateY(0);
  590. }
  591. }
  592. @-webkit-keyframes dw-su-in {
  593. from {
  594. opacity: 1;
  595. -webkit-transform: translateY(100%);
  596. }
  597. to {
  598. opacity: 1;
  599. -webkit-transform: translateY(0);
  600. }
  601. }
  602. @-moz-keyframes dw-su-in {
  603. from {
  604. -moz-transform: translateY(100%);
  605. }
  606. to {
  607. -moz-transform: translateY(0);
  608. }
  609. }
  610. /* Slide up out */
  611. @keyframes dw-su-out {
  612. from {
  613. transform: translateY(0);
  614. }
  615. to {
  616. transform: translateY(100%);
  617. }
  618. }
  619. @-webkit-keyframes dw-su-out {
  620. from {
  621. opacity: 1;
  622. -webkit-transform: translateY(0);
  623. }
  624. to {
  625. opacity: 1;
  626. -webkit-transform: translateY(100%);
  627. }
  628. }
  629. @-moz-keyframes dw-su-out {
  630. from {
  631. -moz-transform: translateY(0);
  632. }
  633. to {
  634. -moz-transform: translateY(100%);
  635. }
  636. }