前端（过渡动画）
css3 新增的有：过度动画阴影，圆角transition：width（宽度产生动画）
1 在哪产生动画
2 动画消耗的时间
3 运动曲线
4 延长多长时间才开始执行动画，（不写就不执行）规定过度效果的曲线，默认是ease，多个用，（逗号）隔开，过度属性：transition
圆角： border - radius，如果不想写那么多的话就用
transition：all is ease
transition：all is linear 匀速
transition：all is ease 开始和结束 慢速 中间加速
transition ：all is ease - in . 开始的时候慢，越来越快，然后停止；
transition : all is ease - out . 开始时快，越来越慢，然后停止；
transition : al is ease-in -out .开始和结束时慢速
如果子元素超出父元素时 : overflow : hidden;
rgba(0 ,0, 0,0.5 );半透明；
line-height 行高；margin : 20px,间距20px,info信息
tansfrom 变形
1.位移 ， 2.缩放 ， 3.旋转 ， 4.斜切 ，
1.位移 transition(50px，50px) 水平和垂直；
是不会影响文档流的 ，自己动 不会影响下边的；
2.旋转 transition:rotate（30deg）沿着z 轴旋转 ；
3.缩放 transitiion ：scale(0.5,0.2) 宽度 高度；
4.斜切 transition : skew(0,45deg ) x轴不动，y轴斜切45度；水平和垂直；
margin : 50px(上边距) auto 0;
元素旋转
transfrom : rotate(45deg) 默认是沿着z轴旋转；
transfrom : perspective(800px ) rotate(45deg)
perspective 设置透视距离，经验数 800px ，比较符合人眼的透视距离；
transfrom -style ： perseve-3d ,设置盒子按3d空间显示；
变形中间点
div : nthchild{} ;第几个孩子；
transfrom-origin:left center, 设置变形的中心点 (左中)；
transfrom-origin:left top,设置变形的中心点 (左上)；
背面可见
margin : 上，右，下，左，
如果不想变的话 加过度 transfom:all 500ms ease;
800是经验值 起始角度 rotatey (0deg);
有透视效果 transfrom -style : preserve -3d;
设置盒子背面是否可见
backface - visibity : hidden; 背面不可见 （隐藏不可见）；
图片翻面时另一张图片
animation 动画
多个设置用空格隔开；
animation : moving 1s ease(运动曲线) 1s(延迟) 5(动的次数 ) alternat(是否返回)
alternate 设置是否返回；
infinite 不限次数；
动画运岁动的状态 ： 暂停 animation-play-state : paused;
动画运动的状态 ： 运行 animation-play-state : running;
forwards 动画结束最后状态；
both 都 起始和结束都设置；
@keyframes 创建关键动画时；声明一个动画，给他后面随便起一个名字；
动画一个状态到另一个状态；
隐藏 overflow : hidden;
相对定位 ：position : relative;
绝对定位 : positiion : absolute;
动画定义的关键字:
@keyframes 名字{ 起始状态 from [ left 0px]
终止状态 to [ left 0px,]}
from 开始 ，to 结束；
循环一直走 ：infinte ;
transfrom : scaley;
多帧动画
位移动画 transfrom : tanslateY(Y轴) 10px;
圆角 border - ralios : 50px;
原路返回 ： alternate;
缩放 transfrom : scale(0.5 0.5)
box-shadow : 17px(X轴) 13px（Y轴）12px(羽化) 14px(扩展) p
绛旓細杩囨浮鍔ㄧ敾鏁堟灉: 灏嗘爣绛剧殑鏍峰紡鍙樺寲浠ヨ繛缁钩婊戠殑鏂瑰紡鏄剧ず, 绫讳技浜庡姩鐢汇 1锛塼ransition-property: 璁剧疆杩囨浮闇瑕佽〃鐜拌〃鐜扮殑鏍峰紡灞炴,閫氬父浣跨敤 all 鏉ヨ缃墍鏈夋牱寮忓彉鍖栭兘鐢ㄨ繃娓℃樉绀恒 2锛塼ransition-duration: 璁剧疆杩囨浮鐨勬寔缁椂闂淬 3锛塼ransition-delay: 璁剧疆杩囨浮鏁堟灉鐨勫欢杩熸椂闂淬 4锛塼ransition-...
绛旓細鍊熷姪 CSS3 鍔ㄧ敾锛岃繕鍙互浣跨敤鍏抽敭甯у湪鍔ㄧ敾澶勭悊鏈熼棿鐨勪笉鍚屾椂闂寸偣涓哄姩鐢诲睘鎬ф寚瀹氬笺傝繖鏍凤紝涓嶄粎鍙互瀹氫箟鍔ㄧ敾寮澶村拰鏈熬鐨勫姩鐢昏涓猴紝杩樺彲浠ュ畾涔夊姩鐢昏繃绋嬩腑鐨勫姩鐢昏涓恒傚姩鐢诲姛鑳借繕鍙互鍏锋湁杩唬鍜屽弽鍚戝姛鑳斤紝骞跺彲浠ユ彁渚涙殏鍋滃拰鎭㈠鑳藉姏銆傝繖鏍峰洖绛斿緢闅惧舰璞″寲鐨勶紝浣犲幓浼橀叿鐪嬩釜瑙嗛鍚 浣跨敤 CSS 澧炲姞杩囨浮鍜屽叾浠栨晥鏋 "...
绛旓細} to {left:200px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} }鍒氬紑濮媁3C CSS Workgroup鎷掔粷灏咰SS3 transition涓巃nimation鍔犲叆瀹樻柟鏍囧噯锛屼竴浜涙垚鍛樿涓杩囨浮鏁堟灉鍜鍔ㄧ敾骞堕潪鏍峰紡灞炴э紝鑰屼笖宸茬粡鍙互鐢ㄨ剼鏈疄鐜般傝娉曪細transition: property duration ...
绛旓細鎰熻鑷繁鎬绘槸娣锋穯css鍚勭鍔ㄧ敾鏁堟灉锛屾墍浠ュ啀杩欓噷鎬荤粨涓涓 1. transition 锛屾墍鍦ㄥ厓绱犲潡鏍峰紡鍙樺姩鏃跺惎鍔紝鍙敤浜庢牱寮忓彉鍔ㄦ椂 浜х敓杩囨浮鍔ㄧ敾鏁堟灉 | transition-property | 瑙勫畾璁剧疆杩囨浮鏁堟灉鐨 CSS 灞炴х殑鍚嶇О銆 | | transition-duration | 瑙勫畾瀹屾垚杩囨浮鏁堟灉闇瑕佸灏戠鎴栨绉掋 | | transition-timing-...
绛旓細瑕佸悓鏃舵樉绀哄氨瑕佸悓鏃惰Е鍙鍔ㄧ敾锛屽彲浠ュ湪HTML涓婃妸杩3涓猙ox缁勭粐鍦ㄤ竴澶勶紝鏀惧湪鍚屼竴涓埗瀹瑰櫒閲岋紝鍐嶇敤CSS鍚屾椂瑙﹀彂銆傜ず渚嬶細0.5s1s2s鍚屾椂瑙﹀彂鐨凜SS锛.father:hover > .box1 {/* box1鍔ㄧ敾 */}.father:hover > .box2 {/* box2鍔ㄧ敾 */}.father:hover > .box3 {/* box3鍔ㄧ敾 */} ...
绛旓細CSS鏄敤浜庢弿杩扮綉椤靛瑙傚拰琛ㄧ幇鐨勪竴绉嶆牱寮忚〃璇█銆鍓嶇寮鍙戣呴渶瑕佹帉鎻SS鐨勫熀鏈娉曞拰閫夋嫨鍣紝鐔熸倝濡備綍璁剧疆瀛椾綋銆侀鑹层佸竷灞绛夋牱寮忋傚悓鏃讹紝杩橀渶瑕佷簡瑙SS3鐨勬柊鐗规э紝濡杩囨浮鍔ㄧ敾銆侀槾褰辨晥鏋滅瓑銆傚彟澶栵紝鍝嶅簲寮忚璁′篃鏄幇浠ｅ墠绔紑鍙戜腑鐨勯噸瑕佷竴鐜紝闇瑕佹帉鎻″浣曟牴鎹睆骞曞ぇ灏忓拰璁惧绫诲瀷鏉ラ傞厤缃戦〉甯冨眬銆侸avaScript鏄墠绔...
绛旓細animation锛鍔ㄧ敾锛鏄彲浠ュ惊鐜繍琛岀殑锛宼ransition锛堣繃娓锛夊彧鑳藉崟娆¤繍琛岋紱鍓嶈呭彲浠ヤ富鍔ㄨ繍琛岋紙鎰忔濆氨鏄綉椤典竴鎵撳紑鍔ㄧ敾灏卞彲浠ヨ嚜宸辫嚜鍔ㄨ繍琛岋級锛屽悗鑰呭垯鏄鍔ㄨ繍琛岋紙姣斿闇瑕侀紶鏍囩Щ鍒板厓绱犱笂鎵嶄細浜х敓杩囨浮鏁堟灉锛夛紱鍓嶈呭彲浠ュ埄鐢ㄤ换浣昪ss灞炴ф潵浜х敓鍔ㄧ敾锛岃屽悗鑰呭垯鍙兘鍒╃敤鍙噺鍖栫殑css灞炴э紙姣斿width銆乭eight绛夛級鏉ヤ骇鐢熻繃娓℃晥鏋...
绛旓細鎺ョ潃锛屾粦鍔ㄩ紶鏍囪嚦椤甸潰搴曢儴锛岀偣鍑绘柊骞荤伅鐗囷紝鍍忚В閿佹柊涓栫晫涓鏍凤紝婧愭簮涓嶆柇鍦版坊鍔犲垱鎰忓厓绱犮傛繁鍏ユ帰绱紝骞荤伅鐗囩殑涓板瘜鎬ц浜烘儕鍠溿傚彧闇杞荤偣椤堕儴鐨勬彃鍏ラ夐」锛屾彃鍏ュ浘鐗囥佽棰戞垨闊抽锛屾瘡涓厓绱犻兘灏嗘垚涓烘晠浜嬬殑鐢熷姩杞戒綋銆傚埆蹇樹簡锛屽垏鎹㈡彃浠剁殑杩囨浮鏁堟灉锛屼负浣犵殑鍐呭澧炴坊鏇村鍔ㄦ侀瓍鍔涖鍔ㄧ敾鍔熻兘鏄彁鍗囪瑙夊啿鍑诲姏鐨勫叧閿傚湪...
绛旓細鍔ㄧ敾杩囨浮鍑芥暟璇﹁В鍦–SS鍔ㄧ敾涓紝animation-timing-function灞炴х敤鏉ュ畾涔夊姩鐢荤殑閫熷害鏇茬嚎锛屾帶鍒跺姩鐢荤殑寮濮嬨佷腑闂村拰缁撴潫闃舵鐨勮繃娓℃柟寮忋傚叾璇硶濡備笅锛歛nimation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | steps(interval_number [, start | end]) | step-start | step-end ...
