CSS属性简表（伸缩盒、变换、过渡、动画）

CSS属性简表（伸缩盒、变换、过渡、动画）

伸缩盒

======================================

应用于flex容器
flex-direction(排列方向): row row-reverse column column-reverse;
flex-wrap(是否换行): nowrap wrap wrap-reverse;
flex-flow

justify-content(子项在横轴上的对齐方式): flex-start/end center space-between space-around
align-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, property2
transition-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-duration
animation-timing-function
animation-delay
animation-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;
}