Vue动画大全 发表于 2017-12-10 CSS动画1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>CSS3动画实现方式大全</title> <script type="text/javascript" src="js/jquery-3.2.1.js" ></script> <style type="text/css"> .left { width: 300px; color: white; background: #444444; } .left ul { list-style: none; } .left a { color: white; } #right { position: fixed; top: 100px; right: 30%; width: 300px; height: 200px; margin: 100px auto; background: url(http://www.100sucai.com/img/demo/1373.png) } /*******************1、闪光灯***********************/ .animation1 { -webkit-animation: flash 1s .2s ease both; -moz-animation: flash 1s .2s ease both; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @-moz-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } /*******************2、弹起***********************/ .animation2 { -webkit-animation: bounce 1s .2s ease both; -moz-animation: bounce 1s .2s ease both; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0) } 40% { -webkit-transform: translateY(-30px) } 60% { -webkit-transform: translateY(-15px) } } @-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0) } 40% { -moz-transform: translateY(-30px) } 60% { -moz-transform: translateY(-15px) } } /*******************3、摇摆***********************/ .animation3 { -webkit-animation: shake 1s .2s ease both; -moz-animation: shake 1s .2s ease both; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); } } @-moz-keyframes shake { 0%, 100% { -moz-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -moz-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -moz-transform: translateX(10px); } } /*******************4、秋千***********************/ .animation4 { -webkit-animation: tada 1s .2s ease both; -moz-animation: tada 1s .2s ease both; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1) } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg) } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg) } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg) } 100% { -webkit-transform: scale(1) rotate(0) } } @-moz-keyframes tada { 0% { -moz-transform: scale(1) } 10%, 20% { -moz-transform: scale(0.9) rotate(-3deg) } 30%, 50%, 70%, 90% { -moz-transform: scale(1.1) rotate(3deg) } 40%, 60%, 80% { -moz-transform: scale(1.1) rotate(-3deg) } 100% { -moz-transform: scale(1) rotate(0) } } /*******************5、swing***********************/ .animation5 { -webkit-animation: swing 1s .2s ease both; -moz-animation: swing 1s .2s ease both; } @-webkit-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center } 20% { -webkit-transform: rotate(15deg) } 40% { -webkit-transform: rotate(-10deg) } 60% { -webkit-transform: rotate(5deg) } 80% { -webkit-transform: rotate(-5deg) } 100% { -webkit-transform: rotate(0deg) } } @-moz-keyframes swing { 20%, 40%, 60%, 80%, 100% { -moz-transform-origin: top center } 20% { -moz-transform: rotate(15deg) } 40% { -moz-transform: rotate(-10deg) } 60% { -moz-transform: rotate(5deg) } 80% { -moz-transform: rotate(-5deg) } 100% { -moz-transform: rotate(0deg) } } /*******************6、疯狂摆动***********************/ .animation6 { -webkit-animation: wobble 1s .2s ease both; -moz-animation: wobble 1s .2s ease both; } @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%) } 15% { -webkit-transform: translateX(-25%) rotate(-5deg) } 30% { -webkit-transform: translateX(20%) rotate(3deg) } 45% { -webkit-transform: translateX(-15%) rotate(-3deg) } 60% { -webkit-transform: translateX(10%) rotate(2deg) } 75% { -webkit-transform: translateX(-5%) rotate(-1deg) } 100% { -webkit-transform: translateX(0%) } } @-moz-keyframes wobble { 0% { -moz-transform: translateX(0%) } 15% { -moz-transform: translateX(-25%) rotate(-5deg) } 30% { -moz-transform: translateX(20%) rotate(3deg) } 45% { -moz-transform: translateX(-15%) rotate(-3deg) } 60% { -moz-transform: translateX(10%) rotate(2deg) } 75% { -moz-transform: translateX(-5%) rotate(-1deg) } 100% { -moz-transform: translateX(0%) } } /*******************7、脉冲***********************/ .animation7 { -webkit-animation: pulse 1s .2s ease both; -moz-animation: pulse 1s .2s ease both; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1) } 50% { -webkit-transform: scale(1.1) } 100% { -webkit-transform: scale(1) } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1) } 50% { -moz-transform: scale(1.1) } 100% { -moz-transform: scale(1) } } /*******************8、翻转***********************/ .animation8 { -webkit-animation: flip 1s .2s ease both; -moz-animation: flip 1s .2s ease both; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(0); -webkit-animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -webkit-animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in } 100% { -webkit-transform: perspective(400px) scale(1); -webkit-animation-timing-function: ease-in } } @-moz-keyframes flip { 0% { -moz-transform: perspective(400px) rotateY(0); -moz-animation-timing-function: ease-out } 40% { -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-animation-timing-function: ease-out } 50% { -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-animation-timing-function: ease-in } 80% { -moz-transform: perspective(400px) rotateY(360deg) scale(.95); -moz-animation-timing-function: ease-in } 100% { -moz-transform: perspective(400px) scale(1); -moz-animation-timing-function: ease-in } } /*******************9、X轴淡入***********************/ .animation9 { -webkit-animation: flipInX 1s .2s ease both; -moz-animation: flipInX 1s .2s ease both; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateX(-10deg) } 70% { -webkit-transform: perspective(400px) rotateX(10deg) } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1 } } @-moz-keyframes flipInX { 0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0 } 40% { -moz-transform: perspective(400px) rotateX(-10deg) } 70% { -moz-transform: perspective(400px) rotateX(10deg) } 100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1 } } /*******************10、X轴淡出***********************/ .animation10 { -webkit-animation: flipOutX 1s .2s ease both; -moz-animation: flipOutX 1s .2s ease both; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1 } 100% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0 } } @-moz-keyframes flipOutX { 0% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1 } 100% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0 } } /*******************11、Y轴淡入***********************/ .animation11 { -webkit-animation: flipInY 1s .2s ease both; -moz-animation: flipInY 1s .2s ease both; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateY(-10deg) } 70% { -webkit-transform: perspective(400px) rotateY(10deg) } 100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1 } } @-moz-keyframes flipInY { 0% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0 } 40% { -moz-transform: perspective(400px) rotateY(-10deg) } 70% { -moz-transform: perspective(400px) rotateY(10deg) } 100% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1 } } /*******************12、Y轴淡出***********************/ .animation12 { -webkit-animation: flipOutY 1s .2s ease both; -moz-animation: flipOutY 1s .2s ease both; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1 } 100% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0 } } @-moz-keyframes flipOutY { 0% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1 } 100% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0 } } /*******************13、下方淡入***********************/ .animation13 { -webkit-animation: fadeInUp 1s .2s ease both; -moz-animation: fadeInUp 1s .2s ease both; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px) } 100% { opacity: 1; -webkit-transform: translateY(0) } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(20px) } 100% { opacity: 1; -moz-transform: translateY(0) } } /*******************14、上方淡入***********************/ .animation14 { -webkit-animation: fadeInDown 1s .2s ease both; -moz-animation: fadeInDown 1s .2s ease both; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px) } 100% { opacity: 1; -webkit-transform: translateY(0) } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-20px) } 100% { opacity: 1; -moz-transform: translateY(0) } } /*******************15、左边淡入***********************/ .animation15 { -webkit-animation: fadeInLeft 1s .2s ease both; -moz-animation: fadeInLeft 1s .2s ease both; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-20px) } 100% { opacity: 1; -moz-transform: translateX(0) } } /*******************16、右边淡入***********************/ .animation16 { -webkit-animation: fadeInRight 1s .2s ease both; -moz-animation: fadeInRight 1s .2s ease both; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(20px) } 100% { opacity: 1; -moz-transform: translateX(0) } } /*******************17、底部淡入***********************/ .animation17 { -webkit-animation: fadeInUpBig 1s .2s ease both; -moz-animation: fadeInUpBig 1s .2s ease both; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px) } 100% { opacity: 1; -webkit-transform: translateY(0) } } @-moz-keyframes fadeInUpBig { 0% { opacity: 0; -moz-transform: translateY(2000px) } 100% { opacity: 1; -moz-transform: translateY(0) } } /*******************18、顶部淡入***********************/ .animation18 { -webkit-animation: fadeInDownBig 1s .2s ease both; -moz-animation: fadeInDownBig 1s .2s ease both; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px) } 100% { opacity: 1; -webkit-transform: translateY(0) } } @-moz-keyframes fadeInDownBig { 0% { opacity: 0; -moz-transform: translateY(-2000px) } 100% { opacity: 1; -moz-transform: translateY(0) } } /*******************19、页面左边淡入***********************/ .animation19 { -webkit-animation: fadeInLeftBig 1s .2s ease both; -moz-animation: fadeInLeftBig 1s .2s ease both; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeInLeftBig { 0% { opacity: 0; -moz-transform: translateX(-2000px) } 100% { opacity: 1; -moz-transform: translateX(0) } } /*******************20、页面右边淡入***********************/ .animation20 { -webkit-animation: fadeInRightBig 1s .2s ease both; -moz-animation: fadeInRightBig 1s .2s ease both; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeInRightBig { 0% { opacity: 0; -moz-transform: translateX(2000px) } 100% { opacity: 1; -moz-transform: translateX(0) } } /*******************21、向上淡出***********************/ .animation21 { -webkit-animation: fadeOutUp 1s .2s ease both; -moz-animation: fadeOutUp 1s .2s ease both; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(-20px) } } @-moz-keyframes fadeOutUp { 0% { opacity: 1; -moz-transform: translateY(0) } 100% { opacity: 0; -moz-transform: translateY(-20px) } } /*******************22、向下淡出***********************/ .animation22 { -webkit-animation: fadeOutDown 1s .2s ease both; -moz-animation: fadeOutDown 1s .2s ease both; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(20px) } } @-moz-keyframes fadeOutDown { 0% { opacity: 1; -moz-transform: translateY(0) } 100% { opacity: 0; -moz-transform: translateY(20px) } } /*******************23、向左淡出***********************/ .animation23 { -webkit-animation: fadeOutLeft 1s .2s ease both; -moz-animation: fadeOutLeft 1s .2s ease both; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(-20px) } } @-moz-keyframes fadeOutLeft { 0% { opacity: 1; -moz-transform: translateX(0) } 100% { opacity: 0; -moz-transform: translateX(-20px) } } /*******************24、向右淡出***********************/ .animation24 { -webkit-animation: fadeOutRight 1s .2s ease both; -moz-animation: fadeOutRight 1s .2s ease both; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(20px) } } @-moz-keyframes fadeOutRight { 0% { opacity: 1; -moz-transform: translateX(0) } 100% { opacity: 0; -moz-transform: translateX(20px) } } /*******************25、顶部淡出***********************/ .animation25 { -webkit-animation: fadeOutTopBig 1s .2s ease both; -moz-animation: fadeOutTopBig 1s .2s ease both; } @-webkit-keyframes fadeOutTopBig { 0% { opacity: 1; -webkit-transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(-2000px) } } @-moz-keyframes fadeOutTopBig { 0% { opacity: 1; -moz-transform: translateY(0) } 100% { opacity: 0; -moz-transform: translateY(-2000px) } } /*******************26、底部淡出***********************/ .animation26 { -webkit-animation: fadeOutUpBig 1s .2s ease both; -moz-animation: fadeOutUpBig 1s .2s ease both; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(2000px) } } @-moz-keyframes fadeOutUpBig { 0% { opacity: 1; -moz-transform: translateY(0) } 100% { opacity: 0; -moz-transform: translateY(-2000px) } } /*******************27、页面左边淡出***********************/ .animation27 { -webkit-animation: fadeOutLeftBig 1s .2s ease both; -moz-animation: fadeOutLeftBig 1s .2s ease both; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(-2000px) } } @-moz-keyframes fadeOutLeftBig { 0% { opacity: 1; -moz-transform: translateX(0) } 100% { opacity: 0; -moz-transform: translateX(-2000px) } } /*******************28、页面右边淡出***********************/ .animation28 { -webkit-animation: fadeOutRightBig 1s .2s ease both; -moz-animation: fadeOutRightBig 1s .2s ease both; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(2000px) } } @-moz-keyframes fadeOutRightBig { 0% { opacity: 1; -moz-transform: translateX(0) } 100% { opacity: 0; -moz-transform: translateX(2000px) } } /*******************29、bounceIn***********************/ .animation29 { -webkit-animation: bounceIn 1s .2s ease both; -moz-animation: bounceIn 1s .2s ease both; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3) } 50% { opacity: 1; -webkit-transform: scale(1.05) } 70% { -webkit-transform: scale(.9) } 100% { -webkit-transform: scale(1) } } @-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform: scale(.3) } 50% { opacity: 1; -moz-transform: scale(1.05) } 70% { -moz-transform: scale(.9) } 100% { -moz-transform: scale(1) } } /*******************30、bounceInDown***********************/ .animation30 { -webkit-animation: bounceInDown 1s .2s ease both; -moz-animation: bounceInDown 1s .2s ease both; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px) } 60% { opacity: 1; -webkit-transform: translateY(30px) } 80% { -webkit-transform: translateY(-10px) } 100% { -webkit-transform: translateY(0) } } @-moz-keyframes bounceInDown { 0% { opacity: 0; -moz-transform: translateY(-2000px) } 60% { opacity: 1; -moz-transform: translateY(30px) } 80% { -moz-transform: translateY(-10px) } 100% { -moz-transform: translateY(0) } } /*******************31、bounceInUp***********************/ .animation31 { -webkit-animation: bounceInUp 1s .2s ease both; -moz-animation: bounceInUp 1s .2s ease both; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px) } 60% { opacity: 1; -webkit-transform: translateY(-30px) } 80% { -webkit-transform: translateY(10px) } 100% { -webkit-transform: translateY(0) } } @-moz-keyframes bounceInUp { 0% { opacity: 0; -moz-transform: translateY(2000px) } 60% { opacity: 1; -moz-transform: translateY(-30px) } 80% { -moz-transform: translateY(10px) } 100% { -moz-transform: translateY(0) } } /*******************32、bounceInLeft***********************/ .animation32 { -webkit-animation: bounceInLeft 1s .2s ease both; -moz-animation: bounceInLeft 1s .2s ease both; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px) } 60% { opacity: 1; -webkit-transform: translateX(30px) } 80% { -webkit-transform: translateX(-10px) } 100% { -webkit-transform: translateX(0) } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -moz-transform: translateX(-2000px) } 60% { opacity: 1; -moz-transform: translateX(30px) } 80% { -moz-transform: translateX(-10px) } 100% { -moz-transform: translateX(0) } } /*******************33、bounceInRight***********************/ .animation33 { -webkit-animation: bounceInRight 1s .2s ease both; -moz-animation: bounceInRight 1s .2s ease both; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px) } 60% { opacity: 1; -webkit-transform: translateX(-30px) } 80% { -webkit-transform: translateX(10px) } 100% { -webkit-transform: translateX(0) } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -moz-transform: translateX(2000px) } 60% { opacity: 1; -moz-transform: translateX(-30px) } 80% { -moz-transform: translateX(10px) } 100% { -moz-transform: translateX(0) } } /*******************34、bounceOut***********************/ .animation34 { -webkit-animation: bounceOut 1s .2s ease both; -moz-animation: bounceOut 1s .2s ease both; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1) } 25% { -webkit-transform: scale(.95) } 50% { opacity: 1; -webkit-transform: scale(1.1) } 100% { opacity: 0; -webkit-transform: scale(.3) } } @-moz-keyframes bounceOut { 0% { -moz-transform: scale(1) } 25% { -moz-transform: scale(.95) } 50% { opacity: 1; -moz-transform: scale(1.1) } 100% { opacity: 0; -moz-transform: scale(.3) } } /*******************35、bounceOutDown***********************/ .animation35 { -webkit-animation: bounceOutDown 1s .2s ease both; -moz-animation: bounceOutDown 1s .2s ease both; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0) } 20% { opacity: 1; -webkit-transform: translateY(-20px) } 100% { opacity: 0; -webkit-transform: translateY(2000px) } } @-moz-keyframes bounceOutDown { 0% { -moz-transform: translateY(0) } 20% { opacity: 1; -moz-transform: translateY(-20px) } 100% { opacity: 0; -moz-transform: translateY(2000px) } } /*******************36、bounceOutUp***********************/ .animation36 { -webkit-animation: bounceOutUp 1s .2s ease both; -moz-animation: bounceOutUp 1s .2s ease both; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0) } 20% { opacity: 1; -webkit-transform: translateY(20px) } 100% { opacity: 0; -webkit-transform: translateY(-2000px) } } @-moz-keyframes bounceOutUp { 0% { -moz-transform: translateY(0) } 20% { opacity: 1; -moz-transform: translateY(20px) } 100% { opacity: 0; -moz-transform: translateY(-2000px) } } /*******************37、bounceOutLeft***********************/ .animation37 { -webkit-animation: bounceInLeft 1s .2s ease both; -moz-animation: bounceInLeft 1s .2s ease both; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px) } 60% { opacity: 1; -webkit-transform: translateX(30px) } 80% { -webkit-transform: translateX(-10px) } 100% { -webkit-transform: translateX(0) } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -moz-transform: translateX(-2000px) } 60% { opacity: 1; -moz-transform: translateX(30px) } 80% { -moz-transform: translateX(-10px) } 100% { -moz-transform: translateX(0) } } /*******************38、bounceOutRight***********************/ .animation38 { -webkit-animation: bounceInRight 1s .2s ease both; -moz-animation: bounceInRight 1s .2s ease both; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px) } 60% { opacity: 1; -webkit-transform: translateX(-30px) } 80% { -webkit-transform: translateX(10px) } 100% { -webkit-transform: translateX(0) } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -moz-transform: translateX(2000px) } 60% { opacity: 1; -moz-transform: translateX(-30px) } 80% { -moz-transform: translateX(10px) } 100% { -moz-transform: translateX(0) } } /*******************39、rotateIn***********************/ .animation39 { -webkit-animation: rotateIn 1s .2s ease both; -moz-animation: rotateIn 1s .2s ease both; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(-200deg); opacity: 0 } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1 } } @-moz-keyframes rotateIn { 0% { -moz-transform-origin: center center; -moz-transform: rotate(-200deg); opacity: 0 } 100% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1 } } /*******************40、rotateInDownLeft***********************/ .animation40 { -webkit-animation: rotateInDownLeft 1s .2s ease both; -moz-animation: rotateInDownLeft 1s .2s ease both; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0 } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1 } } @-moz-keyframes rotateInDownLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0 } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1 } } /*******************41、rotateInDownRight***********************/ .animation41 { -webkit-animation: rotateInDownRight 1s .2s ease both; -moz-animation: rotateInDownRight 1s .2s ease both; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0 } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1 } } @-moz-keyframes rotateInDownRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0 } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1 } } /*******************42、rotateInUpLeft***********************/ .animation42 { -webkit-animation: rotateInUpLeft 1s .2s ease both; -moz-animation: rotateInUpLeft 1s .2s ease both; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0 } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1 } } @-moz-keyframes rotateInUpLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0 } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1 } } /*******************43、rotateInUpRight***********************/ .animation43 { -webkit-animation: rotateInUpRight 1s .2s ease both; -moz-animation: rotateInUpRight 1s .2s ease both; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0 } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1 } } @-moz-keyframes rotateInUpRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0 } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1 } } /*******************44、rotateOut***********************/ .animation44 { -webkit-animation: rotateOut 1s .2s ease both; -moz-animation: rotateOut 1s .2s ease both; } @-webkit-keyframes rotateOut { 0% { -webkit-transform: rotate(0); opacity: 1 } 100% { -webkit-transform: rotate(-90deg); opacity: 0 } } @-moz-keyframes rotateOut { 0% { -moz-transform: rotate(0); opacity: 1 } 100% { -moz-transform: rotate(-90deg); opacity: 0 } } /*******************45、rotateOutDownLeft***********************/ .animation45 { -webkit-animation: rotateOutDownLeft 1s .2s ease both; -moz-animation: rotateOutDownLeft 1s .2s ease both; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1 } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0 } } @-moz-keyframes rotateOutDownLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1 } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0 } } /*******************46、rotateOutDownRight***********************/ .animation46 { -webkit-animation: rotateOutDownRight 1s .2s ease both; -moz-animation: rotateOutDownRight 1s .2s ease both; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1 } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0 } } @-moz-keyframes rotateOutDownRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1 } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0 } } /*******************47、rotateOutUpLeft***********************/ .animation47 { -webkit-animation: rotateOutUpLeft 1s .2s ease both; -moz-animation: rotateOutUpLeft 1s .2s ease both; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left top; -webkit-transform: rotate(0); opacity: 1 } 100% { -webkit-transform-origin: left top; -webkit-transform: rotate(-90deg); opacity: 0 } } @-moz-keyframes rotateOutUpLeft { 0% { -moz-transform-origin: left top; -moz-transform: rotate(0); opacity: 1 } 100% { -moz-transform-origin: left top; -moz-transform: rotate(-90deg); opacity: 0 } } /*******************48、rotateOutUpRight***********************/ .animation48 { -webkit-animation: rotateOutUpRight 1s .2s ease both; -moz-animation: rotateOutUpRight 1s .2s ease both; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right top; -webkit-transform: rotate(0); opacity: 1 } 100% { -webkit-transform-origin: right top; -webkit-transform: rotate(-90deg); opacity: 0 } } @-moz-keyframes rotateOutUpRight { 0% { -moz-transform-origin: right top; -moz-transform: rotate(0); opacity: 1 } 100% { -moz-transform-origin: right top; -moz-transform: rotate(-90deg); opacity: 0 } } /*******************49、hinge***********************/ .animation49 { -webkit-animation: hinge 1s .2s ease both; -moz-animation: hinge 1s .2s ease both; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out } 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out } 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out } 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out } 100% { -webkit-transform: translateY(700px); opacity: 0 } } @-moz-keyframes hinge { 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out } 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out } 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out } 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out } 100% { -moz-transform: translateY(700px); opacity: 0 } } /*******************50、rollIn***********************/ .animation50 { -webkit-animation: rollIn 1s .2s ease both; -moz-animation: rollIn 1s .2s ease both; } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg) } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg) } } @-moz-keyframes rollIn { 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg) } 100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg) } } /*******************51、rollOut***********************/ .animation51 { -webkit-animation: rollOut 1s .2s ease both; -moz-animation: rollOut 1s .2s ease both; } @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg) } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg) } } @-moz-keyframes rollOut { 0% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg) } 100% { opacity: 0; -moz-transform: translateX(100%) rotate(120deg) } } /*******************52、slideDown***********************/ .slideDown { animation-name: slideDown; -webkit-animation-name: slideDown; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideDown { 0% { transform: translateY(-100%); } 50% { transform: translateY(8%); } 65% { transform: translateY(-4%); } 80% { transform: translateY(4%); } 95% { transform: translateY(-2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideDown { 0% { -webkit-transform: translateY(-100%); } 50% { -webkit-transform: translateY(8%); } 65% { -webkit-transform: translateY(-4%); } 80% { -webkit-transform: translateY(4%); } 95% { -webkit-transform: translateY(-2%); } 100% { -webkit-transform: translateY(0%); } } /*******************53、slideUp***********************/ .slideUp { animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideUp { 0% { transform: translateY(100%); } 50% { transform: translateY(-8%); } 65% { transform: translateY(4%); } 80% { transform: translateY(-4%); } 95% { transform: translateY(2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(100%); } 50% { -webkit-transform: translateY(-8%); } 65% { -webkit-transform: translateY(4%); } 80% { -webkit-transform: translateY(-4%); } 95% { -webkit-transform: translateY(2%); } 100% { -webkit-transform: translateY(0%); } } /*******************54、slideLeft***********************/ .slideLeft { animation-name: slideLeft; -webkit-animation-name: slideLeft; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideLeft { 0% { transform: translateX(150%); } 50% { transform: translateX(-8%); } 65% { transform: translateX(4%); } 80% { transform: translateX(-4%); } 95% { transform: translateX(2%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slideLeft { 0% { -webkit-transform: translateX(150%); } 50% { -webkit-transform: translateX(-8%); } 65% { -webkit-transform: translateX(4%); } 80% { -webkit-transform: translateX(-4%); } 95% { -webkit-transform: translateX(2%); } 100% { -webkit-transform: translateX(0%); } } /*******************55、slideRight***********************/ .slideRight { animation-name: slideRight; -webkit-animation-name: slideRight; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideRight { 0% { transform: translateX(-150%); } 50% { transform: translateX(8%); } 65% { transform: translateX(-4%); } 80% { transform: translateX(4%); } 95% { transform: translateX(-2%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slideRight { 0% { -webkit-transform: translateX(-150%); } 50% { -webkit-transform: translateX(8%); } 65% { -webkit-transform: translateX(-4%); } 80% { -webkit-transform: translateX(4%); } 95% { -webkit-transform: translateX(-2%); } 100% { -webkit-transform: translateX(0%); } } /*******************56、slideExpandUp***********************/ .slideExpandUp { animation-name: slideExpandUp; -webkit-animation-name: slideExpandUp; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease -out; visibility: visible !important; } @keyframes slideExpandUp { 0% { transform: translateY(100%) scaleX(0.5); } 30% { transform: translateY(-8%) scaleX(0.5); } 40% { transform: translateY(2%) scaleX(0.5); } 50% { transform: translateY(0%) scaleX(1.1); } 60% { transform: translateY(0%) scaleX(0.9); } 70% { transform: translateY(0%) scaleX(1.05); } 80% { transform: translateY(0%) scaleX(0.95); } 90% { transform: translateY(0%) scaleX(1.02); } 100% { transform: translateY(0%) scaleX(1); } } @-webkit-keyframes slideExpandUp { 0% { -webkit-transform: translateY(100%) scaleX(0.5); } 30% { -webkit-transform: translateY(-8%) scaleX(0.5); } 40% { -webkit-transform: translateY(2%) scaleX(0.5); } 50% { -webkit-transform: translateY(0%) scaleX(1.1); } 60% { -webkit-transform: translateY(0%) scaleX(0.9); } 70% { -webkit-transform: translateY(0%) scaleX(1.05); } 80% { -webkit-transform: translateY(0%) scaleX(0.95); } 90% { -webkit-transform: translateY(0%) scaleX(1.02); } 100% { -webkit-transform: translateY(0%) scaleX(1); } } /*******************57、expandUp***********************/ .expandUp { animation-name: expandUp; -webkit-animation-name: expandUp; animation-duration: 0.7s; -webkit-animation-duration: 0.7s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes expandUp { 0% { transform: translateY(100%) scale(0.6) scaleY(0.5); } 60% { transform: translateY(-7%) scaleY(1.12); } 75% { transform: translateY(3%); } 100% { transform: translateY(0%) scale(1) scaleY(1); } } @-webkit-keyframes expandUp { 0% { -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5); } 60% { -webkit-transform: translateY(-7%) scaleY(1.12); } 75% { -webkit-transform: translateY(3%); } 100% { -webkit-transform: translateY(0%) scale(1) scaleY(1); } } /*******************58、bounce***********************/ .bounce { animation-name: bounce; -webkit-animation-name: bounce; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease; -webkit-animation-timing-function: ease; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes bounce { 0% { transform: translateY(0%) scaleY(0.6); } 60% { transform: translateY(-100%) scaleY(1.1); } 70% { transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80% { transform: translateY(0%) scaleY(1.05) scaleX(1); } 90% { transform: translateY(0%) scaleY(0.95) scaleX(1); } 100% { transform: translateY(0%) scaleY(1) scaleX(1); } } @-webkit-keyframes bounce { 0% { -webkit-transform: translateY(0%) scaleY(0.6); } 60% { -webkit-transform: translateY(-100%) scaleY(1.1); } 70% { -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80% { -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1); } 90% { -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1); } 100% { -webkit-transform: translateY(0%) scaleY(1) scaleX(1); } } /*******************59、pulse***********************/ .pulse { animation-name: pulse; -webkit-animation-name: pulse; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.95); opacity: 0.7; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.95); opacity: 0.7; } } /*******************60、bigEntrance***********************/ .bigEntrance { animation-name: bigEntrance; -webkit-animation-name: bigEntrance; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes bigEntrance { 0% { transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } @-webkit-keyframes bigEntrance { 0% { -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } /*******************61、expandOpen***********************/ .expandOpen { animation-name: expandOpen; -webkit-animation-name: expandOpen; animation-duration: 1.2s; -webkit-animation-duration: 1.2s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes expandOpen { 0% { transform: scale(1.8); } 50% { transform: scale(0.95); } 80% { transform: scale(1.05); } 90% { transform: scale(0.98); } 100% { transform: scale(1); } } @-webkit-keyframes expandOpen { 0% { -webkit-transform: scale(1.8); } 50% { -webkit-transform: scale(0.95); } 80% { -webkit-transform: scale(1.05); } 90% { -webkit-transform: scale(0.98); } 100% { -webkit-transform: scale(1); } } /*******************62、fadeIn***********************/ .fadeIn { animation-name: fadeIn; -webkit-animation-name: fadeIn; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes fadeIn { 0% { transform: scale(0); opacity: 0.0; } 60% { transform: scale(1.1); } 80% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes fadeIn { 0% { -webkit-transform: scale(0); opacity: 0.0; } 60% { -webkit-transform: scale(1.1); } 80% { -webkit-transform: scale(0.9); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: 1; } } /*******************63、hatch***********************/ .hatch { animation-name: hatch; -webkit-animation-name: hatch; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; visibility: visible !important; } @keyframes hatch { 0% { transform: rotate(0deg) scaleY(0.6); } 20% { transform: rotate(-2deg) scaleY(1.05); } 35% { transform: rotate(2deg) scaleY(1); } 50% { transform: rotate(-2deg); } 65% { transform: rotate(1deg); } 80% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } } @-webkit-keyframes hatch { 0% { -webkit-transform: rotate(0deg) scaleY(0.6); } 20% { -webkit-transform: rotate(-2deg) scaleY(1.05); } 35% { -webkit-transform: rotate(2deg) scaleY(1); } 50% { -webkit-transform: rotate(-2deg); } 65% { -webkit-transform: rotate(1deg); } 80% { -webkit-transform: rotate(-1deg); } 100% { -webkit-transform: rotate(0deg); } } /*******************64、floating***********************/ .floating { animation-name: floating; -webkit-animation-name: floating; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes floating { 0% { transform: translateY(0%); } 50% { transform: translateY(8%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floating { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(8%); } 100% { -webkit-transform: translateY(0%); } } /*******************65、tossing***********************/ .tossing { animation-name: tossing; -webkit-animation-name: tossing; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes tossing { 0% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } 100% { transform: rotate(-4deg); } } @-webkit-keyframes tossing { 0% { -webkit-transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); } 100% { -webkit-transform: rotate(-4deg); } } /*******************66、pullUp***********************/ .pullUp { width: 300px; height: 300px; background-image: none !important; background-color: #fe5652 !important; border-radius: 24px; margin: 0px auto; } .pullUp { animation-name: pullUp; -webkit-animation-name: pullUp; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes pullUp { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes pullUp { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /*******************67、pullDown***********************/ .pullDown { width: 300px; height: 300px; background-image: none !important; background-color: #fe5652 !important; border-radius: 24px; margin: 0px auto; } .pullDown { animation-name: pullDown; -webkit-animation-name: pullDown; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; } @keyframes pullDown { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes pullDown { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /*******************68、stretchLeft***********************/ .stretchLeft { width: 300px; height: 300px; background-image: none !important; background-color: #fe5652 !important; border-radius: 24px; margin: 0px auto; } .stretchLeft { animation-name: stretchLeft; -webkit-animation-name: stretchLeft; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; } @keyframes stretchLeft { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchLeft { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } /*******************69、stretchRight***********************/ .stretchRight { width: 300px; height: 300px; background-image: none !important; background-color: #fe5652 !important; border-radius: 24px; margin: 0px auto; } .stretchRight { animation-name: stretchRight; -webkit-animation-name: stretchRight; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; } @keyframes stretchRight { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchRight { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } /**************************完******************************/ </style> <script type="text/javascript"> $(function() { $('#css1').click(function() { $('#right').removeClass(); $('#right').addClass('animation1'); return false; }); $('#css2').click(function() { $('#right').removeClass(); $('#right').addClass('animation2'); return false; }); $('#css3').click(function() { $('#right').removeClass(); $('#right').addClass('animation3'); return false; }); $('#css4').click(function() { $('#right').removeClass(); $('#right').addClass('animation4'); return false; }); $('#css5').click(function() { $('#right').removeClass(); $('#right').addClass('animation5'); return false; }); $('#css6').click(function() { $('#right').removeClass(); $('#right').addClass('animation6'); return false; }); $('#css7').click(function() { $('#right').removeClass(); $('#right').addClass('animation7'); return false; }); $('#css8').click(function() { $('#right').removeClass(); $('#right').addClass('animation8'); return false; }); $('#css9').click(function() { $('#right').removeClass(); $('#right').addClass('animation9'); return false; }); $('#css10').click(function() { $('#right').removeClass(); $('#right').addClass('animation10'); return false; }); $('#css11').click(function() { $('#right').removeClass(); $('#right').addClass('animation11'); return false; }); $('#css12').click(function() { $('#right').removeClass(); $('#right').addClass('animation12'); return false; }); $('#css13').click(function() { $('#right').removeClass(); $('#right').addClass('animation13'); return false; }); $('#css14').click(function() { $('#right').removeClass(); $('#right').addClass('animation14'); return false; }); $('#css15').click(function() { $('#right').removeClass(); $('#right').addClass('animation15'); return false; }); $('#css16').click(function() { $('#right').removeClass(); $('#right').addClass('animation16'); return false; }); $('#css17').click(function() { $('#right').removeClass(); $('#right').addClass('animation17'); return false; }); $('#css18').click(function() { $('#right').removeClass(); $('#right').addClass('animation18'); return false; }); $('#css19').click(function() { $('#right').removeClass(); $('#right').addClass('animation19'); return false; }); $('#css20').click(function() { $('#right').removeClass(); $('#right').addClass('animation20'); return false; }); $('#css21').click(function() { $('#right').removeClass(); $('#right').addClass('animation21'); return false; }); $('#css22').click(function() { $('#right').removeClass(); $('#right').addClass('animation22'); return false; }); $('#css23').click(function() { $('#right').removeClass(); $('#right').addClass('animation23'); return false; }); $('#css24').click(function() { $('#right').removeClass(); $('#right').addClass('animation24'); return false; }); $('#css25').click(function() { $('#right').removeClass(); $('#right').addClass('animation25'); return false; }); $('#css26').click(function() { $('#right').removeClass(); $('#right').addClass('animation26'); return false; }); $('#css27').click(function() { $('#right').removeClass(); $('#right').addClass('animation27'); return false; }); $('#css28').click(function() { $('#right').removeClass(); $('#right').addClass('animation28'); return false; }); $('#css29').click(function() { $('#right').removeClass(); $('#right').addClass('animation29'); return false; }); $('#css30').click(function() { $('#right').removeClass(); $('#right').addClass('animation30'); return false; }); $('#css31').click(function() { $('#right').removeClass(); $('#right').addClass('animation31'); return false; }); $('#css32').click(function() { $('#right').removeClass(); $('#right').addClass('animation32'); return false; }); $('#css33').click(function() { $('#right').removeClass(); $('#right').addClass('animation33'); return false; }); $('#css34').click(function() { $('#right').removeClass(); $('#right').addClass('animation34'); return false; }); $('#css35').click(function() { $('#right').removeClass(); $('#right').addClass('animation35'); return false; }); $('#css36').click(function() { $('#right').removeClass(); $('#right').addClass('animation36'); return false; }); $('#css37').click(function() { $('#right').removeClass(); $('#right').addClass('animation37'); return false; }); $('#css38').click(function() { $('#right').removeClass(); $('#right').addClass('animation38'); return false; }); $('#css39').click(function() { $('#right').removeClass(); $('#right').addClass('animation39'); return false; }); $('#css40').click(function() { $('#right').removeClass(); $('#right').addClass('animation40'); return false; }); $('#css41').click(function() { $('#right').removeClass(); $('#right').addClass('animation41'); return false; }); $('#css42').click(function() { $('#right').removeClass(); $('#right').addClass('animation42'); return false; }); $('#css43').click(function() { $('#right').removeClass(); $('#right').addClass('animation43'); return false; }); $('#css44').click(function() { $('#right').removeClass(); $('#right').addClass('animation44'); return false; }); $('#css45').click(function() { $('#right').removeClass(); $('#right').addClass('animation45'); return false; }); $('#css46').click(function() { $('#right').removeClass(); $('#right').addClass('animation46'); return false; }); $('#css47').click(function() { $('#right').removeClass(); $('#right').addClass('animation47'); return false; }); $('#css48').click(function() { $('#right').removeClass(); $('#right').addClass('animation48'); return false; }); $('#css49').click(function() { $('#right').removeClass(); $('#right').addClass('animation49'); return false; }); $('#css50').click(function() { $('#right').removeClass(); $('#right').addClass('animation50'); return false; }); $('#css51').click(function() { $('#right').removeClass(); $('#right').addClass('animation51'); return false; }); $('#css52').click(function() { $('#right').removeClass(); $('#right').addClass('slideDown'); return false; }); $('#css53').click(function() { $('#right').removeClass(); $('#right').addClass('slideUp'); return false; }); $('#css54').click(function() { $('#right').removeClass(); $('#right').addClass('slideLeft'); return false; }); $('#css55').click(function() { $('#right').removeClass(); $('#right').addClass('slideRight'); return false; }); $('#css56').click(function() { $('#right').removeClass(); $('#right').addClass('slideExpandUp'); return false; }); $('#css57').click(function() { $('#right').removeClass(); $('#right').addClass('expandUp'); return false; }); $('#css58').click(function() { $('#right').removeClass(); $('#right').addClass('bounce'); return false; }); $('#css59').click(function() { $('#right').removeClass(); $('#right').addClass('pulse'); return false; }); $('#css60').click(function() { $('#right').removeClass(); $('#right').addClass('bigEntrance'); return false; }); $('#css61').click(function() { $('#right').removeClass(); $('#right').addClass('expandOpen'); return false; }); $('#css62').click(function() { $('#right').removeClass(); $('#right').addClass('fadeIn'); return false; }); $('#css63').click(function() { $('#right').removeClass(); $('#right').addClass('hatch'); return false; }); $('#css64').click(function() { $('#right').removeClass(); $('#right').addClass('floating'); return false; }); $('#css65').click(function() { $('#right').removeClass(); $('#right').addClass('tossing'); return false; }); $('#css66').click(function() { $('#right').removeClass(); $('#right').addClass('pullUp'); return false; }); $('#css67').click(function() { $('#right').removeClass(); $('#right').addClass('pullDown'); return false; }); $('#css68').click(function() { $('#right').removeClass(); $('#right').addClass('stretchLeft'); return false; }); $('#css69').click(function() { $('#right').removeClass(); $('#right').addClass('stretchRight'); return false; }); }) </script> </head> <body> <div class="left"> <ul class="nav"> <h2>CSS3图片动画展示</h2> <a href="http://www.100sucai.com/css3/1.html" target="_blank">100素材网 CSS3动画</a> <br /><br /><br /> <li><a id="css1" href="#" href="#" title="闪光灯">1、闪光灯</a></li> <li><a id="css2" href="#" title="弹起">2、弹起</a></li> <li><a id="css3" href="#" title="摇摆">3、摇摆</a></li> <li><a id="css4" href="#" title="秋千">4、秋千</a></li> <li><a id="css5" href="#" title="swing">5、swing</a></li> <li><a id="css6" href="#" title="疯狂摆动">6、疯狂摆动</a></li> <li><a id="css7" href="#" title="脉冲">7、脉冲</a></li> <li><a id="css8" href="#" title="翻转">8、翻转</a></li> <li><a id="css9" href="#" title="X轴淡入">9、X轴淡入</a></li> <li><a id="css10" href="#" title="X轴淡出">10、X轴淡出</a></li> <li><a id="css11" href="#" title="Y轴淡入">11、Y轴淡入</a></li> <li><a id="css12" href="#" title="Y轴淡出">12、Y轴淡出</a></li> <li><a id="css13" href="#" title="下方淡入">13、下方淡入</a></li> <li><a id="css14" href="#" title="上方淡入">14、上方淡入</a></li> <li><a id="css15" href="#" title="左边淡入">15、左边淡入</a></li> <li><a id="css16" href="#" title="右边淡入">16、右边淡入</a></li> <li><a id="css17" href="#" title="底部淡入">17、底部淡入</a></li> <li><a id="css18" href="#" title="顶部淡入">18、顶部淡入</a></li> <li><a id="css19" href="#" title="页面左边淡入">19、页面左边淡入</a></li> <li><a id="css20" href="#" title="页面右边淡入">20、页面右边淡入</a></li> <li><a id="css21" href="#" title="向上淡出">21、向上淡出</a></li> <li><a id="css22" href="#" title="向下淡出">22、向下淡出</a></li> <li><a id="css23" href="#" title="向左淡出">23、向左淡出</a></li> <li><a id="css24" href="#" title="向右淡出">24、向右淡出</a></li> <li><a id="css25" href="#" title="顶部淡出">25、顶部淡出</a></li> <li><a id="css26" href="#" title="底部淡出">26、底部淡出</a></li> <li><a id="css27" href="#" title="页面左边淡出">27、页面左边淡出</a></li> <li><a id="css28" href="#" title="页面右边淡出">28、页面右边淡出</a></li> <li><a id="css29" href="#" title="bounceIn">29、bounceIn</a></li> <li><a id="css30" href="#" title="bounceInDown">30、bounceInDown</a></li> <li><a id="css31" href="#" title="bounceInUp">31、bounceInUp</a></li> <li><a id="css32" href="#" title="bounceInLeft">32、bounceInLeft</a></li> <li><a id="css33" href="#" title="bounceInRight">33、bounceInRight</a></li> <li><a id="css34" href="#" title="bounceOut">34、bounceOut</a></li> <li><a id="css35" href="#" title="bounceOutDown">35、bounceOutDown</a></li> <li><a id="css36" href="#" title="bounceOutUp">36、bounceOutUp</a></li> <li><a id="css37" href="#" title="bounceOutLeft">37、bounceOutLeft</a></li> <li><a id="css38" href="#" title="bounceOutRight">38、bounceOutRight</a></li> <li><a id="css39" href="#" title="rotateIn">39、rotateIn</a></li> <li><a id="css40" href="#" title="rotateInDownLeft">40、rotateInDownLeft</a></li> <li><a id="css41" href="#" title="rotateInDownRight">41、rotateInDownRight</a></li> <li><a id="css42" href="#" title="rotateInUpLeft">42、rotateInUpLeft</a></li> <li><a id="css43" href="#" title="rotateInUpRight">43、rotateInUpRight</a></li> <li><a id="css44" href="#" title="rotateOut">44、rotateOut</a></li> <li><a id="css45" href="#" title="rotateOutDownLeft">45、rotateOutDownLeft</a></li> <li><a id="css46" href="#" title="rotateOutDownRight">46、rotateOutDownRight</a></li> <li><a id="css47" href="#" title="rotateOutUpLeft">47、rotateOutUpLeft</a></li> <li><a id="css48" href="#" title="rotateOutUpRight">48、rotateOutUpRight</a></li> <li><a id="css49" href="#" title="hinge">49、hinge</a></li> <li><a id="css50" href="#" title="rollIn">50、rollIn</a></li> <li><a id="css51" href="#" title="rollOut">51、rollOut</a></li> <li><a id="css52" href="#" title="slideDown">52、slideDown</a></li> <li><a id="css53" href="#" title="slideUp">53、slideUp</a></li> <li><a id="css54" href="#" title="slideLeft">54、slideLeft</a></li> <li><a id="css55" href="#" title="slideRight">55、slideRight</a></li> <li><a id="css56" href="#" title="slideExpandUp">56、slideExpandUp</a></li> <li><a id="css57" href="#" title="expandUp">57、expandUp</a></li> <li><a id="css58" href="#" title="bounce">58、bounce</a></li> <li><a id="css59" href="#" title="pulse">59、pulse</a></li> <li><a id="css60" href="#" title="bigEntrance">60、bigEntrance</a></li> <li><a id="css61" href="#" title="expandOpen">61、expandOpen</a></li> <li><a id="css62" href="#" title="fadeIn">62、fadeIn</a></li> <li><a id="css63" href="#" title="hatch">63、hatch</a></li> <li><a id="css64" href="#" title="floating">64、floating</a></li> <li><a id="css65" href="#" title="tossing">65、tossing</a></li> <li><a id="css66" href="#" title="pullUp">66、pullUp</a></li> <li><a id="css67" href="#" title="pullDown">67、pullDown</a></li> <li><a id="css68" href="#" title="stretchLeft">68、stretchLeft</a></li> <li><a id="css69" href="#" title="stretchRight">69、stretchRight</a></li> </ul> </div> <div id="right"></div> </body></html> Vue 路由切换动画123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029/************ move ***************//* move-bottom-to-top */.move-bottom-to-top-enter-active { animation: moveFromBottom 0.6s ease both;}.move-bottom-to-top-leave-active { animation: moveToTop 0.6s ease both;}@keyframes moveFromBottom { from { transform: translateY(100%); }}@keyframes moveToTop { to { transform: translateY(-100%); }}/* move-top-to-bottom */.move-top-to-bottom-enter-active { animation: moveFromTop 0.6s ease both;}.move-top-to-bottom-leave-active { animation: moveToBottom 0.6s ease both;}@keyframes moveFromTop { from { transform: translateY(-100%); }}@keyframes moveToBottom { to { transform: translateY(100%); }}/* move-left-to-right */.move-left-to-right-enter-active { animation: moveFromLeft 0.6s ease both;}.move-left-to-right-leave-active { animation: moveToRight 0.6s ease both;}@keyframes moveFromLeft { from { transform: translateX(-100%); }}@keyframes moveToRight { to { transform: translateX(100%); }}/* move-right-to-left */.move-right-to-left-enter-active { animation: moveFromRight 0.6s ease both;}.move-right-to-left-leave-active { animation: moveToLeft 0.6s ease both;}@keyframes moveFromRight { from { transform: translateX(100%); }}@keyframes moveToLeft { to { transform: translateX(-100%); }}/* move-bottom-to-top */.move-bottom-to-top-enter-active { animation: moveFromBottom 0.6s ease both;}.move-bottom-to-top-leave-active { animation: moveToTop 0.6s ease both;}@keyframes moveFromBottom { from { transform: translateY(100%); }}@keyframes moveToTop { to { transform: translateY(-100%); }}/* move-top-to-bottom */.move-top-to-bottom-enter-active { animation: moveFromTop 0.6s ease both;}.move-top-to-bottom-leave-active { animation: moveToBottom 0.6s ease both;}@keyframes moveFromTop { from { transform: translateY(-100%); }}@keyframes moveToBottom { to { transform: translateY(100%); }}/* move-left-to-right */.move-left-to-right-enter-active { animation: moveFromLeft 0.6s ease both;}.move-left-to-right-leave-active { animation: moveToRight 0.6s ease both;}@keyframes moveFromLeft { from { transform: translateX(-100%); }}@keyframes moveToRight { to { transform: translateX(100%); }}/* move-right-to-left */.move-right-to-left-enter-active { animation: moveFromRight 0.6s ease both;}.move-right-to-left-leave-active { animation: moveToLeft 0.6s ease both;}@keyframes moveFromRight { from { transform: translateX(100%); }}@keyframes moveToLeft { to { transform: translateX(-100%); }}/************ move-fade ***************//* move-fade-bottom-to-top */.move-fade-bottom-to-top-enter-active { animation: moveFadeFromBottom 0.7s ease both;}.move-fade-bottom-to-top-leave-active { animation: moveFadeToTop 0.7s ease both;}@keyframes moveFadeFromBottom { from { opacity: 0.3; transform: translateY(100%); }}@keyframes moveFadeToTop { to { opacity: 0.3; transform: translateY(-100%); }}/* move-fade-top-to-bottom */.move-fade-top-to-bottom-enter-active { animation: moveFadeFromTop 0.7s ease both;}.move-fade-top-to-bottom-leave-active { animation: moveFadeToBottom 0.7s ease both;}@keyframes moveFadeFromTop { from { opacity: 0.3; transform: translateY(-100%); }}@keyframes moveFadeToBottom { to { opacity: 0.3; transform: translateY(100%); }}/* move-fade-left-to-right */.move-fade-left-to-right-enter-active { animation: moveFadeFromLeft 0.7s ease both;}.move-fade-left-to-right-leave-active { animation: moveFadeToRight 0.7s ease both;}@keyframes moveFadeFromLeft { from { opacity: 0.3; transform: translateX(-100%); }}@keyframes moveFadeToRight { to { opacity: 0.3; transform: translateX(100%); }}/* move-fade-right-to-left */.move-fade-right-to-left-enter-active { animation: moveFadeFromRight 0.7s ease both;}.move-fade-right-to-left-leave-active { animation: moveFadeFromLeft 0.7s ease both;}@keyframes moveFadeFromRight { from { opacity: 0.3; transform: translateX(100%); }}@keyframes moveFadeFromLeft { to { opacity: 0.3; transform: translateX(-100%); }}/* move-fade-bottom-to-top */.move-fade-bottom-to-top-enter-active { animation: moveFadeFromBottom 0.7s ease both;}.move-fade-bottom-to-top-leave-active { animation: moveFadeToTop 0.7s ease both;}@keyframes moveFadeFromBottom { from { opacity: 0.3; transform: translateY(100%); }}@keyframes moveFadeToTop { to { opacity: 0.3; transform: translateY(-100%); }}/* move-fade-top-to-bottom */.move-fade-top-to-bottom-enter-active { animation: moveFadeFromTop 0.7s ease both;}.move-fade-top-to-bottom-leave-active { animation: moveFadeToBottom 0.7s ease both;}@keyframes moveFadeFromTop { from { opacity: 0.3; transform: translateY(-100%); }}@keyframes moveFadeToBottom { to { opacity: 0.3; transform: translateY(100%); }}/* move-fade-left-to-right */.move-fade-left-to-right-enter-active { animation: moveFadeFromLeft 0.7s ease both;}.move-fade-left-to-right-leave-active { animation: moveFadeToRight 0.7s ease both;}@keyframes moveFadeFromLeft { from { opacity: 0.3; transform: translateX(-100%); }}@keyframes moveFadeToRight { to { opacity: 0.3; transform: translateX(100%); }}/* move-fade-right-to-left */.move-fade-right-to-left-enter-active { animation: moveFadeFromRight 0.7s ease both;}.move-fade-right-to-left-leave-active { animation: moveFadeToLeft 0.6s ease both;}@keyframes moveFadeFromRight { from { opacity: 0.3; transform: translateX(100%); }}@keyframes moveFadeToLeft { to { opacity: 0.3; transform: translateX(-100%); }}/************ move-different ***************//* move-different-bottom-to-top */.move-different-bottom-to-top-enter-active { z-index: 1; animation: moveDifferentFromBottom 0.6s ease both;}.move-different-bottom-to-top-leave-active { z-index: 999; animation: moveDifferentToTop 0.7s ease-in-out both;}@keyframes moveDifferentFromBottom { from { transform: translateY(100%); }}@keyframes moveDifferentToTop { to { transform: translateY(-100%); }}/* move-different-top-to-bottom */.move-different-top-to-bottom-enter-active { z-index: 1; animation: moveDifferentFromTop 0.6s ease both;}.move-different-top-to-bottom-leave-active { z-index: 999; animation: moveDifferentToBottom 0.7s ease-in-out both;}@keyframes moveDifferentFromTop { from { transform: translateY(-100%); }}@keyframes moveDifferentToBottom { to { transform: translateY(100%); }}/* move-different-left-to-right */.move-different-left-to-right-enter-active { z-index: 1; animation: moveDifferentFromLeft 0.6s ease both;}.move-different-left-to-right-leave-active { z-index: 999; animation: moveDifferentToRight 0.7s ease-in-out both;}@keyframes moveDifferentFromLeft { from { transform: translateX(-100%); }}@keyframes moveDifferentToRight { to { transform: translateX(100%); }}/* move-different-right-to-left */.move-different-right-to-left-enter-active { z-index: 1; animation: moveDifferentFromRight 0.6s ease both;}.move-different-right-to-left-leave-active { z-index: 999; animation: moveDifferentFromLeft 0.7s ease-in-out both;}@keyframes moveDifferentFromRight { from { transform: translateX(100%); }}@keyframes moveDifferentFromLeft { to { transform: translateX(-100%); }}/* move-different-bottom-to-top */.move-different-bottom-to-top-enter-active { z-index: 1; animation: moveDifferentFromBottom 0.6s ease both;}.move-different-bottom-to-top-leave-active { z-index: 999; animation: moveDifferentToTop 0.7s ease-in-out both;}@keyframes moveDifferentFromBottom { from { transform: translateY(100%); }}@keyframes moveDifferentToTop { to { transform: translateY(-100%); }}/* move-different-top-to-bottom */.move-different-top-to-bottom-enter-active { z-index: 1; animation: moveDifferentFromTop 0.6s ease both;}.move-different-top-to-bottom-leave-active { z-index: 999; animation: moveDifferentToBottom 0.7s ease-in-out both;}@keyframes moveDifferentFromTop { from { transform: translateY(-100%); }}@keyframes moveDifferentToBottom { to { transform: translateY(100%); }}/* move-different-left-to-right */.move-different-left-to-right-enter-active { z-index: 1; animation: moveDifferentFromLeft 0.6s ease both;}.move-different-left-to-right-leave-active { z-index: 999; animation: moveDifferentToRight 0.7s ease-in-out both;}@keyframes moveDifferentFromLeft { from { transform: translateX(-100%); }}@keyframes moveDifferentToRight { to { transform: translateX(100%); }}/* move-different-right-to-left */.move-different-right-to-left-enter-active { z-index: 1; animation: moveDifferentFromRight 0.6s ease both;}.move-different-right-to-left-leave-active { z-index: 999; animation: moveDifferentToLeft 0.7s ease-in-out both;}@keyframes moveDifferentFromRight { from { transform: translateX(100%); }}@keyframes moveDifferentToLeft { to { transform: translateX(-100%); }}/***************** scale *******************//* scale-down-to-down */.scale-down-to-down-enter-active { animation: scaleUpDown 0.5s ease both; animation-delay: 0.3s;}.scale-down-to-down-leave-active { animation: scaleDown 0.7s ease both;}@keyframes scaleUpDown { from { opacity: 0; transform: scale(1.2); }}@keyframes scaleDown { to { opacity: 0; transform: scale(0.8); }}/* scale-up-to-up */.scale-up-to-up-enter-active { animation: scaleUp 0.7s ease both; animation-delay: 0.3s;}.scale-up-to-up-leave-active { animation: scaleDownUp 0.7s ease both;}@keyframes scaleUp { from { opacity: 0; transform: scale(0.8); }}@keyframes scaleDownUp { to { opacity: 0; transform: scale(1.2); }}/* scale-down-to-up */.scale-down-to-up-enter-active { animation: scaleUpCenter 0.4s ease-out both; animation-delay: 0.4s;}.scale-down-to-up-leave-active { animation: scaleDownCenter 0.4s ease-in both;}@keyframes scaleUpCenter { from { opacity: 0; transform: scale(0.7); }}@keyframes scaleDownCenter { to { opacity: 0; transform: scale(0.7); }}/************ rotate-glue **************//* rotate-glue-bottom-to-top */.rotate-glue-bottom-to-top-enter-active { z-index: 999; animation: moveFromBottom 0.6s ease both; animation-delay: 0.2s;}.rotate-glue-bottom-to-top-leave-active { z-index: 1; transform-origin: 50% 0%; animation: rotateBottomSideFirst 0.8s both ease-in;}@keyframes rotateBottomSideFirst { 40% { transform: rotateX(-15deg); opacity: 0.8; animation-timing-function: ease-out; } 100% { transform: scale(0.8) translateZ(-200px); opacity: 0; }}/* rotate-glue-top-to-bottom */.rotate-glue-top-to-bottom-enter-active { z-index: 999; animation: moveFromTop 0.6s ease both; animation-delay: 0.2s;}.rotate-glue-top-to-bottom-leave-active { z-index: 1; transform-origin: 50% 100%; animation: rotateTopSideFirst 0.8s both ease-in;}@keyframes rotateTopSideFirst { 40% { transform: rotateX(15deg); opacity: 0.8; animation-timing-function: ease-out; } 100% { transform: scale(0.8) translateZ(-200px); opacity: 0; }}/* rotate-glue-left-to-right */.rotate-glue-left-to-right-enter-active { z-index: 999; animation: moveFromLeft 0.6s ease both; animation-delay: 0.2s;}.rotate-glue-left-to-right-leave-active { z-index: 1; transform-origin: 100% 50%; animation: rotateLeftSideFirst 0.8s both ease-in;}@keyframes rotateLeftSideFirst { 40% { transform: rotateY(-15deg); opacity: 0.8; animation-timing-function: ease-out; } 100% { transform: scale(0.8) translateZ(-200px); opacity: 0; }}/* rotate-glue-right-to-left */.rotate-glue-right-to-left-enter-active { z-index: 999; animation: moveFromRight 0.6s ease both; animation-delay: 0.2s;}.rotate-glue-right-to-left-leave-active { z-index: 1; transform-origin: 0% 50%; animation: rotateRightSideFirst 0.8s both ease-in;}@keyframes rotateRightSideFirst { 40% { transform: rotateY(15deg); opacity: 0.8; animation-timing-function: ease-out; } 100% { transform: scale(0.8) translateZ(-200px); opacity: 0; }}/********** rotate-flip ***********/.rotate-flip-top-enter-active { transform-origin: 50% 50%; animation: flipInBottom 0.5s both ease-out; animation-delay: 0.5s;}.rotate-flip-top-leave-active { transform-origin: 50% 50%; animation: flipOutTop 0.5s both ease-in;}@keyframes flipInBottom { from { transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }}@keyframes flipOutTop { to { transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }}.rotate-flip-bottom-enter-active { transform-origin: 50% 50%; animation: flipInTop 0.5s both ease-out; animation-delay: 0.5s;}.rotate-flip-bottom-leave-active { transform-origin: 50% 50%; animation: flipOutBottom 0.5s both ease-in;}@keyframes flipInTop { from { transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }}@keyframes flipOutBottom { to { transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }}.rotate-flip-left-enter-active { transform-origin: 50% 50%; animation: flipInRight 0.5s both ease-out; animation-delay: 0.5s;}.rotate-flip-left-leave-active { transform-origin: 50% 50%; animation: flipOutLeft 0.5s both ease-in;}@keyframes flipInRight { from { transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }}@keyframes flipOutLeft { to { transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }}.rotate-flip-right-enter-active { transform-origin: 50% 50%; animation: flipInLeft 0.5s both ease-out; animation-delay: 0.5s;}.rotate-flip-right-leave-active { transform-origin: 50% 50%; animation: flipOutRight 0.5s both ease-in;}@keyframes flipInLeft { from { transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }}@keyframes flipOutRight { to { transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }}/*************** rotate-fall **************/.rotate-fall-enter-active { z-index: 1; animation: scaleUp 0.7s ease both;}.rotate-fall-leave-active { z-index: 999; transform-origin: 0% 0%; animation: rotateFall 1s both ease-in;}@keyframes rotateFall { 0% { transform: rotateZ(0deg); } 20% { transform: rotateZ(10deg); animation-timing-function: ease-out; } 40% { transform: rotateZ(17deg); } 60% { transform: rotateZ(16deg); } 100% { transform: translateY(100%) rotateZ(17deg); }}/*************** rotate-sides **************/.rotate-sides-enter-active { animation: rotateSlideIn 1s both ease;}.rotate-sides-leave-active { animation: rotateSlideOut 1s both ease;}@keyframes rotateSlideIn { 0%, 25% { opacity: 0.5; transform: translateZ(-500px) translateX(200%); } 75% { opacity: 0.5; transform: translateZ(-500px); } 100% { opacity: 1; transform: translateZ(0) translateX(0); }}@keyframes rotateSlideOut { 25% { opacity: 0.5; transform: translateZ(-500px); } 75% { opacity: 0.5; transform: translateZ(-500px) translateX(-200%); } 100% { opacity: 0.5; transform: translateZ(-500px) translateX(-200%); }}/***************** rotate-push *********************/.rotate-push-right-to-left-enter-active { transform-origin: 100% 50%; animation: rotatePullRight 0.5s both ease;}.rotate-push-right-to-left-leave-active { transform-origin: 0% 50%; animation: rotatePushLeft 0.8s both ease;}@keyframes rotatePullRight { from { opacity: 0; transform: rotateY(-90deg); }}@keyframes rotatePushLeft { to { opacity: 0; transform: rotateY(90deg); }}.rotate-push-left-to-right-enter-active { transform-origin: 0% 50%; animation: rotatePullLeft 0.5s both ease;}.rotate-push-left-to-right-leave-active { transform-origin: 100% 50%; animation: rotatePushRight 0.8s both ease;}@keyframes rotatePullLeft { from { opacity: 0; transform: rotateY(90deg); }}@keyframes rotatePushRight { to { opacity: 0; transform: rotateY(-90deg); }}.rotate-push-top-to-bottom-enter-active { transform-origin: 50% 0%; animation: rotatePullTop 0.5s both ease;}.rotate-push-top-to-bottom-leave-active { transform-origin: 50% 100%; animation: rotatePushBottom 0.8s both ease;}@keyframes rotatePullTop { from { opacity: 0; transform: rotateX(-90deg); }}@keyframes rotatePushBottom { to { opacity: 0; transform: rotateX(90deg); }}.rotate-push-bottom-to-top-enter-active { transform-origin: 50% 100%; animation: rotatePullBottom 0.5s both ease;}.rotate-push-bottom-to-top-leave-active { transform-origin: 50% 0%; animation: rotatePushTop 0.8s both ease;}@keyframes rotatePullBottom { from { opacity: 0; transform: rotateX(90deg); }}@keyframes rotatePushTop { to { opacity: 0; transform: rotateX(-90deg); }}/* rotate-fold */.rotate-fold-bottom-to-top-enter-active { animation: moveFromBottomFade 0.7s ease both;}.rotate-fold-bottom-to-top-leave-active { transform-origin: 50% 100%; animation: rotateFoldTop 0.7s both ease;}@keyframes moveFromBottomFade { from { opacity: 0.3; transform: translateY(100%); }}@keyframes rotateFoldTop { to { opacity: 0; transform: translateY(-100%) rotateX(90deg); }}.rotate-fold-top-to-bottom-enter-active { animation: moveFromTopFade 0.7s ease both;}.rotate-fold-top-to-bottom-leave-active { transform-origin: 50% 0%; animation: rotateFoldBottom 0.7s both ease;}@keyframes moveFromTopFade { from { opacity: 0.3; transform: translateY(-100%); }}@keyframes rotateFoldBottom { to { opacity: 0; transform: translateY(100%) rotateX(-90deg); }}.rotate-fold-left-to-right-enter-active { animation: moveFromLeftFade 0.7s ease both;}.rotate-fold-left-to-right-leave-active { transform-origin: 0% 50%; animation: rotateFoldRight 0.7s both ease;}@keyframes moveFromLeftFade { from { opacity: 0.3; transform: translateX(-100%); }}@keyframes rotateFoldRight { to { opacity: 0; transform: translateX(100%) rotateY(90deg); }}.rotate-fold-right-to-left-enter-active { animation: moveFromRightFade 0.7s ease both;}.rotate-fold-right-to-left-leave-active { transform-origin: 100% 50%; animation: rotateFoldLeft 0.7s both ease;}@keyframes moveFromRightFade { from { opacity: 0.3; transform: translateX(100%); }}@keyframes rotateFoldLeft { to { opacity: 0; transform: translateX(-100%) rotateY(-90deg); }}/***************** rotate-carousel ****************/.rotate-carousel-top-enter-active { transform-origin: 50% 0%; animation: rotateCarouselTopIn 0.8s both ease;}.rotate-carousel-top-leave-active { transform-origin: 50% 100%; animation: rotateCarouselTopOut 0.8s both ease;}@keyframes rotateCarouselTopIn { from { opacity: 0.3; transform: translateY(200%) scale(0.4) rotateX(-65deg); }}@keyframes rotateCarouselTopOut { to { opacity: 0.3; transform: translateY(-200%) scale(0.4) rotateX(65deg); }}.rotate-carousel-bottom-enter-active { transform-origin: 50% 100%; animation: rotateCarouselBottomIn 0.8s both ease;}.rotate-carousel-bottom-leave-active { transform-origin: 50% 0%; animation: rotateCarouselBottomOut 0.8s both ease;}@keyframes rotateCarouselBottomIn { from { opacity: 0.3; transform: translateY(-200%) scale(0.4) rotateX(65deg); }}@keyframes rotateCarouselBottomOut { to { opacity: 0.3; transform: translateY(200%) scale(0.4) rotateX(-65deg); }}.rotate-carousel-left-enter-active { transform-origin: 0% 50%; animation: rotateCarouselLeftIn 0.8s both ease;}.rotate-carousel-left-leave-active { transform-origin: 100% 50%; animation: rotateCarouselLeftOut 0.8s both ease;}@keyframes rotateCarouselLeftIn { from { opacity: 0.3; transform: translateX(200%) scale(0.4) rotateY(65deg); }}@keyframes rotateCarouselLeftOut { to { opacity: 0.3; transform: translateX(-150%) scale(0.4) rotateY(-65deg); }}.rotate-carousel-right-enter-active { transform-origin: 0% 50%; animation: rotateCarouselRightIn 0.8s both ease;}.rotate-carousel-right-leave-active { transform-origin: 100% 50%; animation: rotateCarouselRightOut 0.8s both ease;}@keyframes rotateCarouselRightIn { from { opacity: 0.3; transform: translateX(-150%) scale(0.4) rotateY(65deg); }}@keyframes rotateCarouselRightOut { to { opacity: 0.3; transform: translateX(200%) scale(0.4) rotateY(65deg); }} 使用12345678910111213141516171819202122232425262728293031323334353637383940414243444546// 入口页,如app.vue<template> <div class="app"> ... // 例如使用 move-right-to-left 动画 <transition name="move-right-to-left"> <router-view class="app-router-view"></router-view> </transition> ... </div></template><script> // 引入vue-transition.css import 'vue-transition.css' ...</script><style> // 给页面加上以下样式，动画才能生效 html, body, .app { position: relative; width: 100%; height: 100%; overflow: hidden; } .app { background-color: #000; perspective: 1200px; } .app .app-router-view { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; backface-visibility: hidden; transform: translate3d(0, 0, 0); transform-style: preserve-3d; visibility: visible; }</style> Github vue-transition.css