|
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059 |
- /*!
- * # Semantic UI 2.4.0 - Transition
- * http://github.com/semantic-org/semantic-ui/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-
- /*******************************
- Transitions
- *******************************/
-
- .transition {
- -webkit-animation-iteration-count: 1;
- animation-iteration-count: 1;
- -webkit-animation-duration: 300ms;
- animation-duration: 300ms;
- -webkit-animation-timing-function: ease;
- animation-timing-function: ease;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- }
-
-
- /*******************************
- States
- *******************************/
-
-
- /* Animating */
- .animating.transition {
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- visibility: visible !important;
- }
-
- /* Loading */
- .loading.transition {
- position: absolute;
- top: -99999px;
- left: -99999px;
- }
-
- /* Hidden */
- .hidden.transition {
- display: none;
- visibility: hidden;
- }
-
- /* Visible */
- .visible.transition {
- display: block !important;
- visibility: visible !important;
-
- /* backface-visibility: @backfaceVisibility;
- transform: @use3DAcceleration;*/
- }
- /* Disabled */
- .disabled.transition {
- -webkit-animation-play-state: paused;
- animation-play-state: paused;
- }
-
-
- /*******************************
- Variations
- *******************************/
-
- .looping.transition {
- -webkit-animation-iteration-count: infinite;
- animation-iteration-count: infinite;
- }
-
-
- /*******************************
- Transitions
- *******************************/
-
- /*
- Some transitions adapted from Animate CSS
- https://github.com/daneden/animate.css
-
- Additional transitions adapted from Glide
- by Nick Pettit - https://github.com/nickpettit/glide
- */
-
- /*--------------
- Browse
- ---------------*/
-
- .transition.browse {
- -webkit-animation-duration: 500ms;
- animation-duration: 500ms;
- }
- .transition.browse.in {
- -webkit-animation-name: browseIn;
- animation-name: browseIn;
- }
- .transition.browse.out,
- .transition.browse.left.out {
- -webkit-animation-name: browseOutLeft;
- animation-name: browseOutLeft;
- }
- .transition.browse.right.out {
- -webkit-animation-name: browseOutRight;
- animation-name: browseOutRight;
- }
-
- /* In */
- @-webkit-keyframes browseIn {
- 0% {
- -webkit-transform: scale(0.8) translateZ(0px);
- transform: scale(0.8) translateZ(0px);
- z-index: -1;
- }
- 10% {
- -webkit-transform: scale(0.8) translateZ(0px);
- transform: scale(0.8) translateZ(0px);
- z-index: -1;
- opacity: 0.7;
- }
- 80% {
- -webkit-transform: scale(1.05) translateZ(0px);
- transform: scale(1.05) translateZ(0px);
- opacity: 1;
- z-index: 999;
- }
- 100% {
- -webkit-transform: scale(1) translateZ(0px);
- transform: scale(1) translateZ(0px);
- z-index: 999;
- }
- }
- @keyframes browseIn {
- 0% {
- -webkit-transform: scale(0.8) translateZ(0px);
- transform: scale(0.8) translateZ(0px);
- z-index: -1;
- }
- 10% {
- -webkit-transform: scale(0.8) translateZ(0px);
- transform: scale(0.8) translateZ(0px);
- z-index: -1;
- opacity: 0.7;
- }
- 80% {
- -webkit-transform: scale(1.05) translateZ(0px);
- transform: scale(1.05) translateZ(0px);
- opacity: 1;
- z-index: 999;
- }
- 100% {
- -webkit-transform: scale(1) translateZ(0px);
- transform: scale(1) translateZ(0px);
- z-index: 999;
- }
- }
-
- /* Out */
- @-webkit-keyframes browseOutLeft {
- 0% {
- z-index: 999;
- -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
- transform: translateX(0%) rotateY(0deg) rotateX(0deg);
- }
- 50% {
- z-index: -1;
- -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
- transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
- }
- 80% {
- opacity: 1;
- }
- 100% {
- z-index: -1;
- -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
- transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
- opacity: 0;
- }
- }
- @keyframes browseOutLeft {
- 0% {
- z-index: 999;
- -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
- transform: translateX(0%) rotateY(0deg) rotateX(0deg);
- }
- 50% {
- z-index: -1;
- -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
- transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
- }
- 80% {
- opacity: 1;
- }
- 100% {
- z-index: -1;
- -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
- transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
- opacity: 0;
- }
- }
- @-webkit-keyframes browseOutRight {
- 0% {
- z-index: 999;
- -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
- transform: translateX(0%) rotateY(0deg) rotateX(0deg);
- }
- 50% {
- z-index: 1;
- -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
- transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
- }
- 80% {
- opacity: 1;
- }
- 100% {
- z-index: 1;
- -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
- transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
- opacity: 0;
- }
- }
- @keyframes browseOutRight {
- 0% {
- z-index: 999;
- -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
- transform: translateX(0%) rotateY(0deg) rotateX(0deg);
- }
- 50% {
- z-index: 1;
- -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
- transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
- }
- 80% {
- opacity: 1;
- }
- 100% {
- z-index: 1;
- -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
- transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
- opacity: 0;
- }
- }
-
- /*--------------
- Drop
- ---------------*/
-
- .drop.transition {
- -webkit-transform-origin: top center;
- transform-origin: top center;
- -webkit-animation-duration: 400ms;
- animation-duration: 400ms;
- -webkit-animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
- animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
- }
- .drop.transition.in {
- -webkit-animation-name: dropIn;
- animation-name: dropIn;
- }
- .drop.transition.out {
- -webkit-animation-name: dropOut;
- animation-name: dropOut;
- }
-
- /* Drop */
- @-webkit-keyframes dropIn {
- 0% {
- opacity: 0;
- -webkit-transform: scale(0);
- transform: scale(0);
- }
- 100% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- }
- @keyframes dropIn {
- 0% {
- opacity: 0;
- -webkit-transform: scale(0);
- transform: scale(0);
- }
- 100% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- }
- @-webkit-keyframes dropOut {
- 0% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- 100% {
- opacity: 0;
- -webkit-transform: scale(0);
- transform: scale(0);
- }
- }
- @keyframes dropOut {
- 0% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- 100% {
- opacity: 0;
- -webkit-transform: scale(0);
- transform: scale(0);
- }
- }
-
- /*--------------
- Fade
- ---------------*/
-
- .transition.fade.in {
- -webkit-animation-name: fadeIn;
- animation-name: fadeIn;
- }
- .transition[class*="fade up"].in {
- -webkit-animation-name: fadeInUp;
- animation-name: fadeInUp;
- }
- .transition[class*="fade down"].in {
- -webkit-animation-name: fadeInDown;
- animation-name: fadeInDown;
- }
- .transition[class*="fade left"].in {
- -webkit-animation-name: fadeInLeft;
- animation-name: fadeInLeft;
- }
- .transition[class*="fade right"].in {
- -webkit-animation-name: fadeInRight;
- animation-name: fadeInRight;
- }
- .transition.fade.out {
- -webkit-animation-name: fadeOut;
- animation-name: fadeOut;
- }
- .transition[class*="fade up"].out {
- -webkit-animation-name: fadeOutUp;
- animation-name: fadeOutUp;
- }
- .transition[class*="fade down"].out {
- -webkit-animation-name: fadeOutDown;
- animation-name: fadeOutDown;
- }
- .transition[class*="fade left"].out {
- -webkit-animation-name: fadeOutLeft;
- animation-name: fadeOutLeft;
- }
- .transition[class*="fade right"].out {
- -webkit-animation-name: fadeOutRight;
- animation-name: fadeOutRight;
- }
-
- /* In */
- @-webkit-keyframes fadeIn {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
- @keyframes fadeIn {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
- @-webkit-keyframes fadeInUp {
- 0% {
- opacity: 0;
- -webkit-transform: translateY(10%);
- transform: translateY(10%);
- }
- 100% {
- opacity: 1;
- -webkit-transform: translateY(0%);
- transform: translateY(0%);
- }
- }
- @keyframes fadeInUp {
- 0% {
- opacity: 0;
- -webkit-transform: translateY(10%);
- transform: translateY(10%);
- }
- 100% {
- opacity: 1;
- -webkit-transform: translateY(0%);
- transform: translateY(0%);
- }
- }
- @-webkit-keyframes fadeInDown {
- 0% {
- opacity: 0;
- -webkit-transform: translateY(-10%);
- transform: translateY(-10%);
- }
- 100% {
- opacity: 1;
- -webkit-transform: translateY(0%);
- transform: translateY(0%);
- }
- }
- @keyframes fadeInDown {
- 0% {
- opacity: 0;
- -webkit-transform: translateY(-10%);
- transform: translateY(-10%);
- }
- 100% {
- opacity: 1;
- -webkit-transform: translateY(0%);
- transform: translateY(0%);
- }
- }
- @-webkit-keyframes fadeInLeft {
- 0% {
- opacity: 0;
- -webkit-transform: translateX(10%);
- transform: translateX(10%);
- }
- 100% {
- opacity: 1;
- -webkit-transform: translateX(0%);
- transform: translateX(0%);
- }
- }
- @keyframes fadeInLeft {
- 0% {
- opacity: 0;
- -webkit-transform: translateX(10%);
- transform: translateX(10%);
- }
- 100% {
- opacity: 1;
- -webkit-transform: translateX(0%);
- transform: translateX(0%);
- }
- }
- @-webkit-keyframes fadeInRight {
- 0% {
- opacity: 0;
- -webkit-transform: translateX(-10%);
- transform: translateX(-10%);
- }
- 100% {
- opacity: 1;
- -webkit-transform: translateX(0%);
- transform: translateX(0%);
- }
- }
- @keyframes fadeInRight {
- 0% {
- opacity: 0;
- -webkit-transform: translateX(-10%);
- transform: translateX(-10%);
- }
- 100% {
- opacity: 1;
- -webkit-transform: translateX(0%);
- transform: translateX(0%);
- }
- }
-
- /* Out */
- @-webkit-keyframes fadeOut {
- 0% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
- }
- @keyframes fadeOut {
- 0% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
- }
- @-webkit-keyframes fadeOutUp {
- 0% {
- opacity: 1;
- -webkit-transform: translateY(0%);
- transform: translateY(0%);
- }
- 100% {
- opacity: 0;
- -webkit-transform: translateY(5%);
- transform: translateY(5%);
- }
- }
- @keyframes fadeOutUp {
- 0% {
- opacity: 1;
- -webkit-transform: translateY(0%);
- transform: translateY(0%);
- }
- 100% {
- opacity: 0;
- -webkit-transform: translateY(5%);
- transform: translateY(5%);
- }
- }
- @-webkit-keyframes fadeOutDown {
- 0% {
- opacity: 1;
- -webkit-transform: translateY(0%);
- transform: translateY(0%);
- }
- 100% {
- opacity: 0;
- -webkit-transform: translateY(-5%);
- transform: translateY(-5%);
- }
- }
- @keyframes fadeOutDown {
- 0% {
- opacity: 1;
- -webkit-transform: translateY(0%);
- transform: translateY(0%);
- }
- 100% {
- opacity: 0;
- -webkit-transform: translateY(-5%);
- transform: translateY(-5%);
- }
- }
- @-webkit-keyframes fadeOutLeft {
- 0% {
- opacity: 1;
- -webkit-transform: translateX(0%);
- transform: translateX(0%);
- }
- 100% {
- opacity: 0;
- -webkit-transform: translateX(5%);
- transform: translateX(5%);
- }
- }
- @keyframes fadeOutLeft {
- 0% {
- opacity: 1;
- -webkit-transform: translateX(0%);
- transform: translateX(0%);
- }
- 100% {
- opacity: 0;
- -webkit-transform: translateX(5%);
- transform: translateX(5%);
- }
- }
- @-webkit-keyframes fadeOutRight {
- 0% {
- opacity: 1;
- -webkit-transform: translateX(0%);
- transform: translateX(0%);
- }
- 100% {
- opacity: 0;
- -webkit-transform: translateX(-5%);
- transform: translateX(-5%);
- }
- }
- @keyframes fadeOutRight {
- 0% {
- opacity: 1;
- -webkit-transform: translateX(0%);
- transform: translateX(0%);
- }
- 100% {
- opacity: 0;
- -webkit-transform: translateX(-5%);
- transform: translateX(-5%);
- }
- }
-
- /*--------------
- Flips
- ---------------*/
-
- .flip.transition.in,
- .flip.transition.out {
- -webkit-animation-duration: 600ms;
- animation-duration: 600ms;
- }
- .horizontal.flip.transition.in {
- -webkit-animation-name: horizontalFlipIn;
- animation-name: horizontalFlipIn;
- }
- .horizontal.flip.transition.out {
- -webkit-animation-name: horizontalFlipOut;
- animation-name: horizontalFlipOut;
- }
- .vertical.flip.transition.in {
- -webkit-animation-name: verticalFlipIn;
- animation-name: verticalFlipIn;
- }
- .vertical.flip.transition.out {
- -webkit-animation-name: verticalFlipOut;
- animation-name: verticalFlipOut;
- }
-
- /* In */
- @-webkit-keyframes horizontalFlipIn {
- 0% {
- -webkit-transform: perspective(2000px) rotateY(-90deg);
- transform: perspective(2000px) rotateY(-90deg);
- opacity: 0;
- }
- 100% {
- -webkit-transform: perspective(2000px) rotateY(0deg);
- transform: perspective(2000px) rotateY(0deg);
- opacity: 1;
- }
- }
- @keyframes horizontalFlipIn {
- 0% {
- -webkit-transform: perspective(2000px) rotateY(-90deg);
- transform: perspective(2000px) rotateY(-90deg);
- opacity: 0;
- }
- 100% {
- -webkit-transform: perspective(2000px) rotateY(0deg);
- transform: perspective(2000px) rotateY(0deg);
- opacity: 1;
- }
- }
- @-webkit-keyframes verticalFlipIn {
- 0% {
- -webkit-transform: perspective(2000px) rotateX(-90deg);
- transform: perspective(2000px) rotateX(-90deg);
- opacity: 0;
- }
- 100% {
- -webkit-transform: perspective(2000px) rotateX(0deg);
- transform: perspective(2000px) rotateX(0deg);
- opacity: 1;
- }
- }
- @keyframes verticalFlipIn {
- 0% {
- -webkit-transform: perspective(2000px) rotateX(-90deg);
- transform: perspective(2000px) rotateX(-90deg);
- opacity: 0;
- }
- 100% {
- -webkit-transform: perspective(2000px) rotateX(0deg);
- transform: perspective(2000px) rotateX(0deg);
- opacity: 1;
- }
- }
-
- /* Out */
- @-webkit-keyframes horizontalFlipOut {
- 0% {
- -webkit-transform: perspective(2000px) rotateY(0deg);
- transform: perspective(2000px) rotateY(0deg);
- opacity: 1;
- }
- 100% {
- -webkit-transform: perspective(2000px) rotateY(90deg);
- transform: perspective(2000px) rotateY(90deg);
- opacity: 0;
- }
- }
- @keyframes horizontalFlipOut {
- 0% {
- -webkit-transform: perspective(2000px) rotateY(0deg);
- transform: perspective(2000px) rotateY(0deg);
- opacity: 1;
- }
- 100% {
- -webkit-transform: perspective(2000px) rotateY(90deg);
- transform: perspective(2000px) rotateY(90deg);
- opacity: 0;
- }
- }
- @-webkit-keyframes verticalFlipOut {
- 0% {
- -webkit-transform: perspective(2000px) rotateX(0deg);
- transform: perspective(2000px) rotateX(0deg);
- opacity: 1;
- }
- 100% {
- -webkit-transform: perspective(2000px) rotateX(-90deg);
- transform: perspective(2000px) rotateX(-90deg);
- opacity: 0;
- }
- }
- @keyframes verticalFlipOut {
- 0% {
- -webkit-transform: perspective(2000px) rotateX(0deg);
- transform: perspective(2000px) rotateX(0deg);
- opacity: 1;
- }
- 100% {
- -webkit-transform: perspective(2000px) rotateX(-90deg);
- transform: perspective(2000px) rotateX(-90deg);
- opacity: 0;
- }
- }
-
- /*--------------
- Scale
- ---------------*/
-
- .scale.transition.in {
- -webkit-animation-name: scaleIn;
- animation-name: scaleIn;
- }
- .scale.transition.out {
- -webkit-animation-name: scaleOut;
- animation-name: scaleOut;
- }
- @-webkit-keyframes scaleIn {
- 0% {
- opacity: 0;
- -webkit-transform: scale(0.8);
- transform: scale(0.8);
- }
- 100% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- }
- @keyframes scaleIn {
- 0% {
- opacity: 0;
- -webkit-transform: scale(0.8);
- transform: scale(0.8);
- }
- 100% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- }
-
- /* Out */
- @-webkit-keyframes scaleOut {
- 0% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- 100% {
- opacity: 0;
- -webkit-transform: scale(0.9);
- transform: scale(0.9);
- }
- }
- @keyframes scaleOut {
- 0% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- 100% {
- opacity: 0;
- -webkit-transform: scale(0.9);
- transform: scale(0.9);
- }
- }
-
- /*--------------
- Fly
- ---------------*/
-
-
- /* Inward */
- .transition.fly {
- -webkit-animation-duration: 0.6s;
- animation-duration: 0.6s;
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
- transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
- }
- .transition.fly.in {
- -webkit-animation-name: flyIn;
- animation-name: flyIn;
- }
- .transition[class*="fly up"].in {
- -webkit-animation-name: flyInUp;
- animation-name: flyInUp;
- }
- .transition[class*="fly down"].in {
- -webkit-animation-name: flyInDown;
- animation-name: flyInDown;
- }
- .transition[class*="fly left"].in {
- -webkit-animation-name: flyInLeft;
- animation-name: flyInLeft;
- }
- .transition[class*="fly right"].in {
- -webkit-animation-name: flyInRight;
- animation-name: flyInRight;
- }
-
- /* Outward */
- .transition.fly.out {
- -webkit-animation-name: flyOut;
- animation-name: flyOut;
- }
- .transition[class*="fly up"].out {
- -webkit-animation-name: flyOutUp;
- animation-name: flyOutUp;
- }
- .transition[class*="fly down"].out {
- -webkit-animation-name: flyOutDown;
- animation-name: flyOutDown;
- }
- .transition[class*="fly left"].out {
- -webkit-animation-name: flyOutLeft;
- animation-name: flyOutLeft;
- }
- .transition[class*="fly right"].out {
- -webkit-animation-name: flyOutRight;
- animation-name: flyOutRight;
- }
-
- /* In */
- @-webkit-keyframes flyIn {
- 0% {
- opacity: 0;
- -webkit-transform: scale3d(0.3, 0.3, 0.3);
- transform: scale3d(0.3, 0.3, 0.3);
- }
- 20% {
- -webkit-transform: scale3d(1.1, 1.1, 1.1);
- transform: scale3d(1.1, 1.1, 1.1);
- }
- 40% {
- -webkit-transform: scale3d(0.9, 0.9, 0.9);
- transform: scale3d(0.9, 0.9, 0.9);
- }
- 60% {
- opacity: 1;
- -webkit-transform: scale3d(1.03, 1.03, 1.03);
- transform: scale3d(1.03, 1.03, 1.03);
- }
- 80% {
- -webkit-transform: scale3d(0.97, 0.97, 0.97);
- transform: scale3d(0.97, 0.97, 0.97);
- }
- 100% {
- opacity: 1;
- -webkit-transform: scale3d(1, 1, 1);
- transform: scale3d(1, 1, 1);
- }
- }
- @keyframes flyIn {
- 0% {
- opacity: 0;
- -webkit-transform: scale3d(0.3, 0.3, 0.3);
- transform: scale3d(0.3, 0.3, 0.3);
- }
- 20% {
- -webkit-transform: scale3d(1.1, 1.1, 1.1);
- transform: scale3d(1.1, 1.1, 1.1);
- }
- 40% {
- -webkit-transform: scale3d(0.9, 0.9, 0.9);
- transform: scale3d(0.9, 0.9, 0.9);
- }
- 60% {
- opacity: 1;
- -webkit-transform: scale3d(1.03, 1.03, 1.03);
- transform: scale3d(1.03, 1.03, 1.03);
- }
- 80% {
- -webkit-transform: scale3d(0.97, 0.97, 0.97);
- transform: scale3d(0.97, 0.97, 0.97);
- }
- 100% {
- opacity: 1;
- -webkit-transform: scale3d(1, 1, 1);
- transform: scale3d(1, 1, 1);
- }
- }
- @-webkit-keyframes flyInUp {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0, 1500px, 0);
- transform: translate3d(0, 1500px, 0);
- }
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(0, -20px, 0);
- transform: translate3d(0, -20px, 0);
- }
- 75% {
- -webkit-transform: translate3d(0, 10px, 0);
- transform: translate3d(0, 10px, 0);
- }
- 90% {
- -webkit-transform: translate3d(0, -5px, 0);
- transform: translate3d(0, -5px, 0);
- }
- 100% {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- }
- }
- @keyframes flyInUp {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0, 1500px, 0);
- transform: translate3d(0, 1500px, 0);
- }
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(0, -20px, 0);
- transform: translate3d(0, -20px, 0);
- }
- 75% {
- -webkit-transform: translate3d(0, 10px, 0);
- transform: translate3d(0, 10px, 0);
- }
- 90% {
- -webkit-transform: translate3d(0, -5px, 0);
- transform: translate3d(0, -5px, 0);
- }
- 100% {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- }
- }
- @-webkit-keyframes flyInDown {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0, -1500px, 0);
- transform: translate3d(0, -1500px, 0);
- }
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(0, 25px, 0);
- transform: translate3d(0, 25px, 0);
- }
- 75% {
- -webkit-transform: translate3d(0, -10px, 0);
- transform: translate3d(0, -10px, 0);
- }
- 90% {
- -webkit-transform: translate3d(0, 5px, 0);
- transform: translate3d(0, 5px, 0);
- }
- 100% {
- -webkit-transform: none;
- transform: none;
- }
- }
- @keyframes flyInDown {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0, -1500px, 0);
- transform: translate3d(0, -1500px, 0);
- }
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(0, 25px, 0);
- transform: translate3d(0, 25px, 0);
- }
- 75% {
- -webkit-transform: translate3d(0, -10px, 0);
- transform: translate3d(0, -10px, 0);
- }
- 90% {
- -webkit-transform: translate3d(0, 5px, 0);
- transform: translate3d(0, 5px, 0);
- }
- 100% {
- -webkit-transform: none;
- transform: none;
- }
- }
- @-webkit-keyframes flyInLeft {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(1500px, 0, 0);
- transform: translate3d(1500px, 0, 0);
- }
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(-25px, 0, 0);
- transform: translate3d(-25px, 0, 0);
- }
- 75% {
- -webkit-transform: translate3d(10px, 0, 0);
- transform: translate3d(10px, 0, 0);
- }
- 90% {
- -webkit-transform: translate3d(-5px, 0, 0);
- transform: translate3d(-5px, 0, 0);
- }
- 100% {
- -webkit-transform: none;
- transform: none;
- }
- }
- @keyframes flyInLeft {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(1500px, 0, 0);
- transform: translate3d(1500px, 0, 0);
- }
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(-25px, 0, 0);
- transform: translate3d(-25px, 0, 0);
- }
- 75% {
- -webkit-transform: translate3d(10px, 0, 0);
- transform: translate3d(10px, 0, 0);
- }
- 90% {
- -webkit-transform: translate3d(-5px, 0, 0);
- transform: translate3d(-5px, 0, 0);
- }
- 100% {
- -webkit-transform: none;
- transform: none;
- }
- }
- @-webkit-keyframes flyInRight {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(-1500px, 0, 0);
- transform: translate3d(-1500px, 0, 0);
- }
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(25px, 0, 0);
- transform: translate3d(25px, 0, 0);
- }
- 75% {
- -webkit-transform: translate3d(-10px, 0, 0);
- transform: translate3d(-10px, 0, 0);
- }
- 90% {
- -webkit-transform: translate3d(5px, 0, 0);
- transform: translate3d(5px, 0, 0);
- }
- 100% {
- -webkit-transform: none;
- transform: none;
- }
- }
- @keyframes flyInRight {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(-1500px, 0, 0);
- transform: translate3d(-1500px, 0, 0);
- }
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(25px, 0, 0);
- transform: translate3d(25px, 0, 0);
- }
- 75% {
- -webkit-transform: translate3d(-10px, 0, 0);
- transform: translate3d(-10px, 0, 0);
- }
- 90% {
- -webkit-transform: translate3d(5px, 0, 0);
- transform: translate3d(5px, 0, 0);
- }
- 100% {
- -webkit-transform: none;
- transform: none;
- }
- }
-
- /* Out */
- @-webkit-keyframes flyOut {
- 20% {
- -webkit-transform: scale3d(0.9, 0.9, 0.9);
- transform: scale3d(0.9, 0.9, 0.9);
- }
- 50%,
- 55% {
- opacity: 1;
- -webkit-transform: scale3d(1.1, 1.1, 1.1);
- transform: scale3d(1.1, 1.1, 1.1);
- }
- 100% {
- opacity: 0;
- -webkit-transform: scale3d(0.3, 0.3, 0.3);
- transform: scale3d(0.3, 0.3, 0.3);
- }
- }
- @keyframes flyOut {
- 20% {
- -webkit-transform: scale3d(0.9, 0.9, 0.9);
- transform: scale3d(0.9, 0.9, 0.9);
- }
- 50%,
- 55% {
- opacity: 1;
- -webkit-transform: scale3d(1.1, 1.1, 1.1);
- transform: scale3d(1.1, 1.1, 1.1);
- }
- 100% {
- opacity: 0;
- -webkit-transform: scale3d(0.3, 0.3, 0.3);
- transform: scale3d(0.3, 0.3, 0.3);
- }
- }
- @-webkit-keyframes flyOutUp {
- 20% {
- -webkit-transform: translate3d(0, 10px, 0);
- transform: translate3d(0, 10px, 0);
- }
- 40%,
- 45% {
- opacity: 1;
- -webkit-transform: translate3d(0, -20px, 0);
- transform: translate3d(0, -20px, 0);
- }
- 100% {
- opacity: 0;
- -webkit-transform: translate3d(0, 2000px, 0);
- transform: translate3d(0, 2000px, 0);
- }
- }
- @keyframes flyOutUp {
- 20% {
- -webkit-transform: translate3d(0, 10px, 0);
- transform: translate3d(0, 10px, 0);
- }
- 40%,
- 45% {
- opacity: 1;
- -webkit-transform: translate3d(0, -20px, 0);
- transform: translate3d(0, -20px, 0);
- }
- 100% {
- opacity: 0;
- -webkit-transform: translate3d(0, 2000px, 0);
- transform: translate3d(0, 2000px, 0);
- }
- }
- @-webkit-keyframes flyOutDown {
- 20% {
- -webkit-transform: translate3d(0, -10px, 0);
- transform: translate3d(0, -10px, 0);
- }
- 40%,
- 45% {
- opacity: 1;
- -webkit-transform: translate3d(0, 20px, 0);
- transform: translate3d(0, 20px, 0);
- }
- 100% {
- opacity: 0;
- -webkit-transform: translate3d(0, -2000px, 0);
- transform: translate3d(0, -2000px, 0);
- }
- }
- @keyframes flyOutDown {
- 20% {
- -webkit-transform: translate3d(0, -10px, 0);
- transform: translate3d(0, -10px, 0);
- }
- 40%,
- 45% {
- opacity: 1;
- -webkit-transform: translate3d(0, 20px, 0);
- transform: translate3d(0, 20px, 0);
- }
- 100% {
- opacity: 0;
- -webkit-transform: translate3d(0, -2000px, 0);
- transform: translate3d(0, -2000px, 0);
- }
- }
- @-webkit-keyframes flyOutRight {
- 20% {
- opacity: 1;
- -webkit-transform: translate3d(20px, 0, 0);
- transform: translate3d(20px, 0, 0);
- }
- 100% {
- opacity: 0;
- -webkit-transform: translate3d(-2000px, 0, 0);
- transform: translate3d(-2000px, 0, 0);
- }
- }
- @keyframes flyOutRight {
- 20% {
- opacity: 1;
- -webkit-transform: translate3d(20px, 0, 0);
- transform: translate3d(20px, 0, 0);
- }
- 100% {
- opacity: 0;
- -webkit-transform: translate3d(-2000px, 0, 0);
- transform: translate3d(-2000px, 0, 0);
- }
- }
- @-webkit-keyframes flyOutLeft {
- 20% {
- opacity: 1;
- -webkit-transform: translate3d(-20px, 0, 0);
- transform: translate3d(-20px, 0, 0);
- }
- 100% {
- opacity: 0;
- -webkit-transform: translate3d(2000px, 0, 0);
- transform: translate3d(2000px, 0, 0);
- }
- }
- @keyframes flyOutLeft {
- 20% {
- opacity: 1;
- -webkit-transform: translate3d(-20px, 0, 0);
- transform: translate3d(-20px, 0, 0);
- }
- 100% {
- opacity: 0;
- -webkit-transform: translate3d(2000px, 0, 0);
- transform: translate3d(2000px, 0, 0);
- }
- }
-
- /*--------------
- Slide
- ---------------*/
-
- .transition.slide.in,
- .transition[class*="slide down"].in {
- -webkit-animation-name: slideInY;
- animation-name: slideInY;
- -webkit-transform-origin: top center;
- transform-origin: top center;
- }
- .transition[class*="slide up"].in {
- -webkit-animation-name: slideInY;
- animation-name: slideInY;
- -webkit-transform-origin: bottom center;
- transform-origin: bottom center;
- }
- .transition[class*="slide left"].in {
- -webkit-animation-name: slideInX;
- animation-name: slideInX;
- -webkit-transform-origin: center right;
- transform-origin: center right;
- }
- .transition[class*="slide right"].in {
- -webkit-animation-name: slideInX;
- animation-name: slideInX;
- -webkit-transform-origin: center left;
- transform-origin: center left;
- }
- .transition.slide.out,
- .transition[class*="slide down"].out {
- -webkit-animation-name: slideOutY;
- animation-name: slideOutY;
- -webkit-transform-origin: top center;
- transform-origin: top center;
- }
- .transition[class*="slide up"].out {
- -webkit-animation-name: slideOutY;
- animation-name: slideOutY;
- -webkit-transform-origin: bottom center;
- transform-origin: bottom center;
- }
- .transition[class*="slide left"].out {
- -webkit-animation-name: slideOutX;
- animation-name: slideOutX;
- -webkit-transform-origin: center right;
- transform-origin: center right;
- }
- .transition[class*="slide right"].out {
- -webkit-animation-name: slideOutX;
- animation-name: slideOutX;
- -webkit-transform-origin: center left;
- transform-origin: center left;
- }
-
- /* In */
- @-webkit-keyframes slideInY {
- 0% {
- opacity: 0;
- -webkit-transform: scaleY(0);
- transform: scaleY(0);
- }
- 100% {
- opacity: 1;
- -webkit-transform: scaleY(1);
- transform: scaleY(1);
- }
- }
- @keyframes slideInY {
- 0% {
- opacity: 0;
- -webkit-transform: scaleY(0);
- transform: scaleY(0);
- }
- 100% {
- opacity: 1;
- -webkit-transform: scaleY(1);
- transform: scaleY(1);
- }
- }
- @-webkit-keyframes slideInX {
- 0% {
- opacity: 0;
- -webkit-transform: scaleX(0);
- transform: scaleX(0);
- }
- 100% {
- opacity: 1;
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- }
- }
- @keyframes slideInX {
- 0% {
- opacity: 0;
- -webkit-transform: scaleX(0);
- transform: scaleX(0);
- }
- 100% {
- opacity: 1;
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- }
- }
-
- /* Out */
- @-webkit-keyframes slideOutY {
- 0% {
- opacity: 1;
- -webkit-transform: scaleY(1);
- transform: scaleY(1);
- }
- 100% {
- opacity: 0;
- -webkit-transform: scaleY(0);
- transform: scaleY(0);
- }
- }
- @keyframes slideOutY {
- 0% {
- opacity: 1;
- -webkit-transform: scaleY(1);
- transform: scaleY(1);
- }
- 100% {
- opacity: 0;
- -webkit-transform: scaleY(0);
- transform: scaleY(0);
- }
- }
- @-webkit-keyframes slideOutX {
- 0% {
- opacity: 1;
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- }
- 100% {
- opacity: 0;
- -webkit-transform: scaleX(0);
- transform: scaleX(0);
- }
- }
- @keyframes slideOutX {
- 0% {
- opacity: 1;
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- }
- 100% {
- opacity: 0;
- -webkit-transform: scaleX(0);
- transform: scaleX(0);
- }
- }
-
- /*--------------
- Swing
- ---------------*/
-
- .transition.swing {
- -webkit-animation-duration: 800ms;
- animation-duration: 800ms;
- }
- .transition[class*="swing down"].in {
- -webkit-animation-name: swingInX;
- animation-name: swingInX;
- -webkit-transform-origin: top center;
- transform-origin: top center;
- }
- .transition[class*="swing up"].in {
- -webkit-animation-name: swingInX;
- animation-name: swingInX;
- -webkit-transform-origin: bottom center;
- transform-origin: bottom center;
- }
- .transition[class*="swing left"].in {
- -webkit-animation-name: swingInY;
- animation-name: swingInY;
- -webkit-transform-origin: center right;
- transform-origin: center right;
- }
- .transition[class*="swing right"].in {
- -webkit-animation-name: swingInY;
- animation-name: swingInY;
- -webkit-transform-origin: center left;
- transform-origin: center left;
- }
- .transition.swing.out,
- .transition[class*="swing down"].out {
- -webkit-animation-name: swingOutX;
- animation-name: swingOutX;
- -webkit-transform-origin: top center;
- transform-origin: top center;
- }
- .transition[class*="swing up"].out {
- -webkit-animation-name: swingOutX;
- animation-name: swingOutX;
- -webkit-transform-origin: bottom center;
- transform-origin: bottom center;
- }
- .transition[class*="swing left"].out {
- -webkit-animation-name: swingOutY;
- animation-name: swingOutY;
- -webkit-transform-origin: center right;
- transform-origin: center right;
- }
- .transition[class*="swing right"].out {
- -webkit-animation-name: swingOutY;
- animation-name: swingOutY;
- -webkit-transform-origin: center left;
- transform-origin: center left;
- }
-
- /* In */
- @-webkit-keyframes swingInX {
- 0% {
- -webkit-transform: perspective(1000px) rotateX(90deg);
- transform: perspective(1000px) rotateX(90deg);
- opacity: 0;
- }
- 40% {
- -webkit-transform: perspective(1000px) rotateX(-30deg);
- transform: perspective(1000px) rotateX(-30deg);
- opacity: 1;
- }
- 60% {
- -webkit-transform: perspective(1000px) rotateX(15deg);
- transform: perspective(1000px) rotateX(15deg);
- }
- 80% {
- -webkit-transform: perspective(1000px) rotateX(-7.5deg);
- transform: perspective(1000px) rotateX(-7.5deg);
- }
- 100% {
- -webkit-transform: perspective(1000px) rotateX(0deg);
- transform: perspective(1000px) rotateX(0deg);
- }
- }
- @keyframes swingInX {
- 0% {
- -webkit-transform: perspective(1000px) rotateX(90deg);
- transform: perspective(1000px) rotateX(90deg);
- opacity: 0;
- }
- 40% {
- -webkit-transform: perspective(1000px) rotateX(-30deg);
- transform: perspective(1000px) rotateX(-30deg);
- opacity: 1;
- }
- 60% {
- -webkit-transform: perspective(1000px) rotateX(15deg);
- transform: perspective(1000px) rotateX(15deg);
- }
- 80% {
- -webkit-transform: perspective(1000px) rotateX(-7.5deg);
- transform: perspective(1000px) rotateX(-7.5deg);
- }
- 100% {
- -webkit-transform: perspective(1000px) rotateX(0deg);
- transform: perspective(1000px) rotateX(0deg);
- }
- }
- @-webkit-keyframes swingInY {
- 0% {
- -webkit-transform: perspective(1000px) rotateY(-90deg);
- transform: perspective(1000px) rotateY(-90deg);
- opacity: 0;
- }
- 40% {
- -webkit-transform: perspective(1000px) rotateY(30deg);
- transform: perspective(1000px) rotateY(30deg);
- opacity: 1;
- }
- 60% {
- -webkit-transform: perspective(1000px) rotateY(-17.5deg);
- transform: perspective(1000px) rotateY(-17.5deg);
- }
- 80% {
- -webkit-transform: perspective(1000px) rotateY(7.5deg);
- transform: perspective(1000px) rotateY(7.5deg);
- }
- 100% {
- -webkit-transform: perspective(1000px) rotateY(0deg);
- transform: perspective(1000px) rotateY(0deg);
- }
- }
- @keyframes swingInY {
- 0% {
- -webkit-transform: perspective(1000px) rotateY(-90deg);
- transform: perspective(1000px) rotateY(-90deg);
- opacity: 0;
- }
- 40% {
- -webkit-transform: perspective(1000px) rotateY(30deg);
- transform: perspective(1000px) rotateY(30deg);
- opacity: 1;
- }
- 60% {
- -webkit-transform: perspective(1000px) rotateY(-17.5deg);
- transform: perspective(1000px) rotateY(-17.5deg);
- }
- 80% {
- -webkit-transform: perspective(1000px) rotateY(7.5deg);
- transform: perspective(1000px) rotateY(7.5deg);
- }
- 100% {
- -webkit-transform: perspective(1000px) rotateY(0deg);
- transform: perspective(1000px) rotateY(0deg);
- }
- }
-
- /* Out */
- @-webkit-keyframes swingOutX {
- 0% {
- -webkit-transform: perspective(1000px) rotateX(0deg);
- transform: perspective(1000px) rotateX(0deg);
- }
- 40% {
- -webkit-transform: perspective(1000px) rotateX(-7.5deg);
- transform: perspective(1000px) rotateX(-7.5deg);
- }
- 60% {
- -webkit-transform: perspective(1000px) rotateX(17.5deg);
- transform: perspective(1000px) rotateX(17.5deg);
- }
- 80% {
- -webkit-transform: perspective(1000px) rotateX(-30deg);
- transform: perspective(1000px) rotateX(-30deg);
- opacity: 1;
- }
- 100% {
- -webkit-transform: perspective(1000px) rotateX(90deg);
- transform: perspective(1000px) rotateX(90deg);
- opacity: 0;
- }
- }
- @keyframes swingOutX {
- 0% {
- -webkit-transform: perspective(1000px) rotateX(0deg);
- transform: perspective(1000px) rotateX(0deg);
- }
- 40% {
- -webkit-transform: perspective(1000px) rotateX(-7.5deg);
- transform: perspective(1000px) rotateX(-7.5deg);
- }
- 60% {
- -webkit-transform: perspective(1000px) rotateX(17.5deg);
- transform: perspective(1000px) rotateX(17.5deg);
- }
- 80% {
- -webkit-transform: perspective(1000px) rotateX(-30deg);
- transform: perspective(1000px) rotateX(-30deg);
- opacity: 1;
- }
- 100% {
- -webkit-transform: perspective(1000px) rotateX(90deg);
- transform: perspective(1000px) rotateX(90deg);
- opacity: 0;
- }
- }
- @-webkit-keyframes swingOutY {
- 0% {
- -webkit-transform: perspective(1000px) rotateY(0deg);
- transform: perspective(1000px) rotateY(0deg);
- }
- 40% {
- -webkit-transform: perspective(1000px) rotateY(7.5deg);
- transform: perspective(1000px) rotateY(7.5deg);
- }
- 60% {
- -webkit-transform: perspective(1000px) rotateY(-10deg);
- transform: perspective(1000px) rotateY(-10deg);
- }
- 80% {
- -webkit-transform: perspective(1000px) rotateY(30deg);
- transform: perspective(1000px) rotateY(30deg);
- opacity: 1;
- }
- 100% {
- -webkit-transform: perspective(1000px) rotateY(-90deg);
- transform: perspective(1000px) rotateY(-90deg);
- opacity: 0;
- }
- }
- @keyframes swingOutY {
- 0% {
- -webkit-transform: perspective(1000px) rotateY(0deg);
- transform: perspective(1000px) rotateY(0deg);
- }
- 40% {
- -webkit-transform: perspective(1000px) rotateY(7.5deg);
- transform: perspective(1000px) rotateY(7.5deg);
- }
- 60% {
- -webkit-transform: perspective(1000px) rotateY(-10deg);
- transform: perspective(1000px) rotateY(-10deg);
- }
- 80% {
- -webkit-transform: perspective(1000px) rotateY(30deg);
- transform: perspective(1000px) rotateY(30deg);
- opacity: 1;
- }
- 100% {
- -webkit-transform: perspective(1000px) rotateY(-90deg);
- transform: perspective(1000px) rotateY(-90deg);
- opacity: 0;
- }
- }
-
- /*--------------
- Zoom
- ---------------*/
-
- .transition.zoom.in {
- -webkit-animation-name: zoomIn;
- animation-name: zoomIn;
- }
- .transition.zoom.out {
- -webkit-animation-name: zoomOut;
- animation-name: zoomOut;
- }
- @-webkit-keyframes zoomIn {
- 0% {
- opacity: 1;
- -webkit-transform: scale(0);
- transform: scale(0);
- }
- 100% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- }
- @keyframes zoomIn {
- 0% {
- opacity: 1;
- -webkit-transform: scale(0);
- transform: scale(0);
- }
- 100% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- }
- @-webkit-keyframes zoomOut {
- 0% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- 100% {
- opacity: 1;
- -webkit-transform: scale(0);
- transform: scale(0);
- }
- }
- @keyframes zoomOut {
- 0% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- 100% {
- opacity: 1;
- -webkit-transform: scale(0);
- transform: scale(0);
- }
- }
-
-
- /*******************************
- Static Animations
- *******************************/
-
-
- /*--------------
- Emphasis
- ---------------*/
-
- .flash.transition {
- -webkit-animation-duration: 750ms;
- animation-duration: 750ms;
- -webkit-animation-name: flash;
- animation-name: flash;
- }
- .shake.transition {
- -webkit-animation-duration: 750ms;
- animation-duration: 750ms;
- -webkit-animation-name: shake;
- animation-name: shake;
- }
- .bounce.transition {
- -webkit-animation-duration: 750ms;
- animation-duration: 750ms;
- -webkit-animation-name: bounce;
- animation-name: bounce;
- }
- .tada.transition {
- -webkit-animation-duration: 750ms;
- animation-duration: 750ms;
- -webkit-animation-name: tada;
- animation-name: tada;
- }
- .pulse.transition {
- -webkit-animation-duration: 500ms;
- animation-duration: 500ms;
- -webkit-animation-name: pulse;
- animation-name: pulse;
- }
- .jiggle.transition {
- -webkit-animation-duration: 750ms;
- animation-duration: 750ms;
- -webkit-animation-name: jiggle;
- animation-name: jiggle;
- }
- .transition.glow {
- -webkit-animation-duration: 2000ms;
- animation-duration: 2000ms;
- -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
- animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
- }
- .transition.glow {
- -webkit-animation-name: glow;
- animation-name: glow;
- }
-
- /* Flash */
- @-webkit-keyframes flash {
- 0%,
- 50%,
- 100% {
- opacity: 1;
- }
- 25%,
- 75% {
- opacity: 0;
- }
- }
- @keyframes flash {
- 0%,
- 50%,
- 100% {
- opacity: 1;
- }
- 25%,
- 75% {
- opacity: 0;
- }
- }
-
- /* Shake */
- @-webkit-keyframes shake {
- 0%,
- 100% {
- -webkit-transform: translateX(0);
- transform: translateX(0);
- }
- 10%,
- 30%,
- 50%,
- 70%,
- 90% {
- -webkit-transform: translateX(-10px);
- transform: translateX(-10px);
- }
- 20%,
- 40%,
- 60%,
- 80% {
- -webkit-transform: translateX(10px);
- transform: translateX(10px);
- }
- }
- @keyframes shake {
- 0%,
- 100% {
- -webkit-transform: translateX(0);
- transform: translateX(0);
- }
- 10%,
- 30%,
- 50%,
- 70%,
- 90% {
- -webkit-transform: translateX(-10px);
- transform: translateX(-10px);
- }
- 20%,
- 40%,
- 60%,
- 80% {
- -webkit-transform: translateX(10px);
- transform: translateX(10px);
- }
- }
-
- /* Bounce */
- @-webkit-keyframes bounce {
- 0%,
- 20%,
- 50%,
- 80%,
- 100% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- 40% {
- -webkit-transform: translateY(-30px);
- transform: translateY(-30px);
- }
- 60% {
- -webkit-transform: translateY(-15px);
- transform: translateY(-15px);
- }
- }
- @keyframes bounce {
- 0%,
- 20%,
- 50%,
- 80%,
- 100% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- 40% {
- -webkit-transform: translateY(-30px);
- transform: translateY(-30px);
- }
- 60% {
- -webkit-transform: translateY(-15px);
- transform: translateY(-15px);
- }
- }
-
- /* Tada */
- @-webkit-keyframes tada {
- 0% {
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- 10%,
- 20% {
- -webkit-transform: scale(0.9) rotate(-3deg);
- transform: scale(0.9) rotate(-3deg);
- }
- 30%,
- 50%,
- 70%,
- 90% {
- -webkit-transform: scale(1.1) rotate(3deg);
- transform: scale(1.1) rotate(3deg);
- }
- 40%,
- 60%,
- 80% {
- -webkit-transform: scale(1.1) rotate(-3deg);
- transform: scale(1.1) rotate(-3deg);
- }
- 100% {
- -webkit-transform: scale(1) rotate(0);
- transform: scale(1) rotate(0);
- }
- }
- @keyframes tada {
- 0% {
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- 10%,
- 20% {
- -webkit-transform: scale(0.9) rotate(-3deg);
- transform: scale(0.9) rotate(-3deg);
- }
- 30%,
- 50%,
- 70%,
- 90% {
- -webkit-transform: scale(1.1) rotate(3deg);
- transform: scale(1.1) rotate(3deg);
- }
- 40%,
- 60%,
- 80% {
- -webkit-transform: scale(1.1) rotate(-3deg);
- transform: scale(1.1) rotate(-3deg);
- }
- 100% {
- -webkit-transform: scale(1) rotate(0);
- transform: scale(1) rotate(0);
- }
- }
-
- /* Pulse */
- @-webkit-keyframes pulse {
- 0% {
- -webkit-transform: scale(1);
- transform: scale(1);
- opacity: 1;
- }
- 50% {
- -webkit-transform: scale(0.9);
- transform: scale(0.9);
- opacity: 0.7;
- }
- 100% {
- -webkit-transform: scale(1);
- transform: scale(1);
- opacity: 1;
- }
- }
- @keyframes pulse {
- 0% {
- -webkit-transform: scale(1);
- transform: scale(1);
- opacity: 1;
- }
- 50% {
- -webkit-transform: scale(0.9);
- transform: scale(0.9);
- opacity: 0.7;
- }
- 100% {
- -webkit-transform: scale(1);
- transform: scale(1);
- opacity: 1;
- }
- }
-
- /* Jiggle */
- @-webkit-keyframes jiggle {
- 0% {
- -webkit-transform: scale3d(1, 1, 1);
- transform: scale3d(1, 1, 1);
- }
- 30% {
- -webkit-transform: scale3d(1.25, 0.75, 1);
- transform: scale3d(1.25, 0.75, 1);
- }
- 40% {
- -webkit-transform: scale3d(0.75, 1.25, 1);
- transform: scale3d(0.75, 1.25, 1);
- }
- 50% {
- -webkit-transform: scale3d(1.15, 0.85, 1);
- transform: scale3d(1.15, 0.85, 1);
- }
- 65% {
- -webkit-transform: scale3d(0.95, 1.05, 1);
- transform: scale3d(0.95, 1.05, 1);
- }
- 75% {
- -webkit-transform: scale3d(1.05, 0.95, 1);
- transform: scale3d(1.05, 0.95, 1);
- }
- 100% {
- -webkit-transform: scale3d(1, 1, 1);
- transform: scale3d(1, 1, 1);
- }
- }
- @keyframes jiggle {
- 0% {
- -webkit-transform: scale3d(1, 1, 1);
- transform: scale3d(1, 1, 1);
- }
- 30% {
- -webkit-transform: scale3d(1.25, 0.75, 1);
- transform: scale3d(1.25, 0.75, 1);
- }
- 40% {
- -webkit-transform: scale3d(0.75, 1.25, 1);
- transform: scale3d(0.75, 1.25, 1);
- }
- 50% {
- -webkit-transform: scale3d(1.15, 0.85, 1);
- transform: scale3d(1.15, 0.85, 1);
- }
- 65% {
- -webkit-transform: scale3d(0.95, 1.05, 1);
- transform: scale3d(0.95, 1.05, 1);
- }
- 75% {
- -webkit-transform: scale3d(1.05, 0.95, 1);
- transform: scale3d(1.05, 0.95, 1);
- }
- 100% {
- -webkit-transform: scale3d(1, 1, 1);
- transform: scale3d(1, 1, 1);
- }
- }
-
- /* Glow */
- @-webkit-keyframes glow {
- 0% {
- background-color: #FCFCFD;
- }
- 30% {
- background-color: #FFF6CD;
- }
- 100% {
- background-color: #FCFCFD;
- }
- }
- @keyframes glow {
- 0% {
- background-color: #FCFCFD;
- }
- 30% {
- background-color: #FFF6CD;
- }
- 100% {
- background-color: #FCFCFD;
- }
- }
-
-
- /*******************************
- Site Overrides
- *******************************/
-
|