褰撲綘瀛︿範鍓嶇鐨勬椂鍊欙紝鏄笉鏄寰楄嚜宸卞浼氫簡锛屽張涓嶄細瑙夊緱瀛︿笉浼氥€備竴涓緢澶х殑鍘熷洜鏄疌SS灞炴€уお澶氫簡锛屽緢澶氭晥鏋滀笉鑳界洿瑙傜殑鎷嗚В鎴怌SS灞炴€с€傚姩鐢诲氨鏄叾涓箣涓€銆傛瘮濡倀ransform銆乼ransition銆乤nimation锛屽垵瀛﹁€呭線寰€寰堥毦鍖哄垎銆傜畝鍗曞尯鍒嗕竴涓嬭繖浜涳細transform灏辨槸鍙樺舰銆傚畠鏃ㄥ湪鏀瑰彉DOM鐨勫舰鐘讹紝渚嬪鏃嬭浆銆佺缉鏀惧拰绉诲姩銆傝繖涓拰鍔ㄧ敾鏃犲叧锛屼竴鑸彲浠ヤ綔涓哄姩鐢荤殑鍙橀噺浣跨敤銆傝繃娓″氨鏄繃娓°€傛偍鍙互涓虹壒瀹氭牱寮忓睘鎬ц缃嚎鎬у彉鍖栧姩鐢汇€傚彧鑳藉仛绠€鍗曠殑杩囨浮鍔ㄧ敾銆傚姩鐢绘槸鐪熸鐨凜SS鍔ㄧ敾銆傛偍鍙互鑷畾涔夊姩鐢绘晥鏋滐紝骞朵娇鐢ㄤ竴浜汣SS灞炴€х粍鍚堟垚澶嶆潅鐨勫姩鐢汇€傚彉鎹㈣鎴戜滑浠庡彉鎹㈠紑濮嬨€備唬鐮佸涓嬶紝鍒嗗埆浠ｈ〃浣嶇Щ銆佺缉鏀俱€佹棆杞€佸€炬枩銆傛墍鏈夎繖浜涢兘鍙互閽堝X杞淬€乊杞村拰Z杞磋繘琛屽彉褰€傝繖閲岀殑渚嬪瓙寰堢畝鍗曪紝鍙悜涓€涓柟鍚戝彉褰€?translateX{transform:translateX(30px);}.scaleX{transform:scaleX(1.5);}.rotateZ{transform:rotateZ(30deg);}.skewX{transform:skewX(30deg);}鏁堟灉濡傚浘鍥撅細transform鍩虹偣淇敼鍙﹀杩樻湁涓€涓猼ransform-origin锛屽彲浠ヨ缃棆杞厓绱犵殑鍩虹偣浣嶇疆銆傛€庝箞鐞嗚В锛屽墠闈㈢殑鏃嬭浆鏄互鍏冪礌鐨勪腑蹇冪偣(center,center)涓哄熀鐐癸紝transform-origin鎸囧畾鍙﹀涓€涓熀鐐硅繘琛屾棆杞紝姣斿鏃嬭浆鏄互宸︿笂瑙?0,0浣嶇疆)鍙互鍐欐垚濡備笅褰㈠紡锛?rotateZ{transform:rotateZ(30deg);transform-origin:lefttop;}姣旇緝涓嬩袱鑰呯殑鍖哄埆锛歵ransitiontransition鏄竴涓猼ransition锛屾敮鎸佺畝鍗曠殑鍙樺寲鍔ㄧ敾銆傜洿鎺ヤ笂code.transition1{transition:width2sease100ms;}.transition1:hover{width:400px;}transition鍙互鎷嗗垎鎴?涓睘鎬э細transition-property銆傜敤鏉ユ寚瀹歵ransition鐨勫彉閲忥紝涓婇潰渚嬪瓙涓殑width锛岃〃绀簍ransition鏄拡瀵箇idth鐨勫睘鎬х殑銆傝繃娓℃寔缁椂闂淬€傝繃娓℃椂鏈熴€備笂渚嬩腑鐨?s琛ㄧず杩囨浮鍔ㄧ敾鍦?绉掑唴瀹屾垚銆傝浆鎹㈣鏃跺姛鑳姐€傝繃娓＄殑鍔ㄧ敾鍔熻兘銆傚畠鏄繃娓￠€熷害鐨勫彉鍖栥€傚父鐢ㄧ殑鏈塴inear,ease,ease-in銆傝嚜瀹氫箟涔熷彲浠ラ€氳繃cubic-bezier璁剧疆銆傝繃娓″欢杩熴€傝繃娓″紑濮嬪欢杩熴€傜ず渚嬩腑鐨?00ms琛ㄧず鎮仠鍚庯紝鍔ㄧ敾鍦ㄥ欢杩?00ms鍚庡紑濮嬨€倀ransition鎸囧畾澶氫釜transitions閭ｄ箞闂鏉ヤ簡锛宼ransition鍙互鍚屾椂鎸囧畾涓や釜灞炴€ransitions鍚楋紵绛旀鏄綋鐒跺彲浠ャ€傚鏋滀袱涓睘鎬ч兘transition浜嗭紝灏变笉鑳藉悎骞跺啓鍦ㄤ竴璧蜂簡銆傞渶瑕佹寜鐓у洓涓垎寮€鐨勫睘鎬ф潵鍐欍€?transition2{杩囨浮灞炴€э細瀹藉害楂樺害锛涜繃娓℃寔缁椂闂达細2s1s锛涜繃娓¤鏃跺姛鑳斤細缂撳拰绾挎€э紱transition-delay:100ms1s;}.transition2:hover{width:400px;height:150px;}浠巈ffect鍙互鐪嬪嚭锛宼ransition浼氬厛鏀瑰彉瀹藉害锛?s鍚庢墠鏀瑰彉楂樺害銆備絾鏄繖閲屾湁涓€涓棶棰樸€傚綋楂樺害杩囨浮鎭㈠鏃讹紝瀹冧篃鍦ㄥ欢杩?s鍚庡彂鐢熷彉鍖栥€傝繖涓嶆槸鎮仠鍚庡姩鐢荤殑鍙嶈浆銆傚鏋滆瀹炵幇杩欑杩囨浮鍜岃繕鍘熷绉帮紝灏遍渶瑕佽嚜瀹氫箟鍔ㄧ敾銆傚姩鐢诲拰涓婁竴涓樊涓嶅锛屽厛鏀句釜绠€鍗曠殑浠ｇ爜锛欯keyframesanim{from{width:260px;}鍒皗瀹藉害锛?00px锛泒}.animation{animation:anim2sease100ms1;}animation鐢?涓睘鎬х粍鎴愶紝鍒嗗埆涓猴細animation-name銆傚姩鐢荤殑鏂规硶锛岀敱鍏抽敭甯ф寚瀹氥€傚姩鐢绘寔缁椂闂淬€傚姩鐢荤殑鎵ц鏃堕棿銆傚姩鐢昏鏃跺姛鑳姐€傚姩鐢绘墽琛岀紦鍔ㄥ嚱鏁般€傚姩鐢诲欢杩熴€傚姩鐢诲紑濮嬬殑鍔ㄧ敾杩唬璁℃暟寤惰繜銆傚姩鐢昏繍琛岀殑娆℃暟銆傛棤闄愭剰鍛崇潃鏃犳暟娆°€傚姩鐢绘柟鍚戙€傛挱鏀惧姩鐢荤殑鏂瑰悜銆傚悜鍓嶆挱鏀俱€佸悜鍚庢挱鏀炬垨鍚戝墠鎾斁鐒跺悗鍚戝悗鎾斁銆傚姩鐢诲～鍏呮ā寮忋€傛帶鍒跺姩鐢荤粨鏉熷悗鍏冪礌鐨勬牱寮忋€傚姩鐢绘挱鏀剧姸鎬併€傛帶鍒跺姩鐢荤殑鐘舵€併€傛牴鎹互涓婂睘鎬э紝鎴戜滑鍙互鍒朵綔涓€涓瘮杈冨鏉傜殑鍔ㄧ敾銆倉100%{瀹藉害锛?00px锛涢珮搴︼細150px锛泒}.animation1{animation:anim12slinear100msinfinitealternaterunningforward;}.animation1:hover{animation-play-state:paused;}杩欐浠ｇ爜鐨勬晥鏋滄槸鍏堢瓑寰?00ms锛岀劧鍚庢牴鎹叧閿抚璁剧疆鍋氬姩鐢伙紝杩愯2绉掍互瀹屾垚鍔ㄧ敾锛岀劧鍚庨噸澶嶃€傛偓鍋滃悗锛屽姩鐢绘殏鍋溿€傚悗闈㈠鏋滄兂缁х画澶嶆潅鍖栵紝灏辨槸鍦ㄥ叧閿抚閲岃缃祦绋嬨€傚畬浜嗭紝鍏堝啓杩欎箞澶氬惂锛屽笇鏈涜繖绡囨枃绔犲浣犳湁鎵€甯姪:-)鏈€杩戞柊浜嗕竴涓湴鐞冨彿锛氬啓浠ｇ爜鐨勬旦锛屾眰鍏虫敞馃槃銆傚悗闈細鎱㈡參绉疮鑷繁鎺屾彙鐨勫墠绔煡璇嗗拰鑱屽満鐭ヨ瘑銆傛湰鏂囦负鍘熷垱锛岃浆杞借娉ㄦ槑鍑哄銆傚鏈夋緞娓呴棶棰樻垨寤鸿锛屼篃娆㈣繋浜ゆ祦銆傚鏋滄枃涓湁浠讳綍涓嶅噯纭殑鍦版柟锛岃鍛婅瘔鎴戙€?/p>
