标签:asi mes lin out fill rev color alternate time
应用于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(可负);
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;
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; }
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; }
标签:asi mes lin out fill rev color alternate time
原文地址:https://www.cnblogs.com/JOOQSS/p/9853143.html