CSS属性简表(伸缩盒、变换、过渡、动画)
伸缩盒
======================================
应用于flex容器flex-direction(排列方向): row row-reverse column column-reverse;flex-wrap(是否换行): nowrap wrap wrap-reverse;flex-flowjustify-content(子项在横轴上的对齐方式): flex-start/end center space-between space-aroundalign-items(子项在纵轴上的对齐方式): stretch flex-start/end center baseline;align-content(多行容器对齐方式): stretch flex-start/end center space-between space-around;应用于子项flex-grow(扩展比率): 0 num; ???flex-shrink(收缩比率): 1 num;flex-basis(各项收缩基准值(权)): auto content px %;flex: auto (1 1 auto) none (0 0 auto)align-self(子项独自纵轴上的对齐方式): auto flex-start/end center baseline stretch;order(子项顺序): num(可负);
变换,直接改变(tranform)
======================================
transform: none translate(xy)(x, y) | rotate(deg) | scale(xy)(x, y) | skew(xy)(x, y);
transform-origin(对象原点): 长度/百分比 center TRBL;transform-style(指定二/三维): flat preserve-3d;perspective(显示透视): none 绝对长度;perspective-origin(透视坐标值): x, y 长度/百分比 center TRBL;backface-visibility(背面可见): visible hidden;
过渡,条件(:hover)
======================================
transition: property duration timing-function delay;
transition-property: none | all | property1, property2transition-duration: time;transition-timing-function: ease ease-in/out/in-out linear step-start/end;transition-delay: time;(多个属性,逗号分隔)div{transition: color .5s linear .1s;color: #000;}div:hover{color: #fff;}
动画,定义动画序列(transform) 应用动画
======================================
animation: name duration timing-function delay count direction;animation: name duration timing-function delay count direciton fill-mode play-state;
animation-durationanimation-timing-functionanimation-delayanimation-iteration-count(循环次数): num | infinite;animation-direction(正反/交替): normal | reverse | alternate | alternate-reverse;animation-play-state(播放暂停): running | paused;animation-fill-mode(动画时间之外的状态): none | forwards | backwards | both;(多个属性,逗号分隔)
@keyframes my-animation{0%{transform:scale(0);opacity:0;}};div {animation: my-animation 2s ease .1s;}
CSS属性简表(伸缩盒、变换、过渡、动画)
原文地址:https://www.cnblogs.com/JOOQSS/p/9853143.html