css3-02

目录

过渡transition

动画

多列

用户界面

---

过渡transition

必须规定两项内容：指定要添加效果的css属性、指定效果的持续时间（默认值是0，不显示指定transiton不会生效）

transition:  css属性   持续时间 ，css属性   持续时间；...

过渡属性：

trasnition-property：要过渡的css属性名称

transition-duration：过渡时间，默认为0

transition-timing-function：过渡效果的时间曲线，默认是“ease”

transition-delay：过渡效果的延时，默认为0

简写

transition：属性/all(可以触发的所有改变)  持续时间    时间曲线   效果延时

时间曲线：linear | ease | ease-in | ease-out | ease-in-out | 

动画

@keyframes规则创建动画： @keyframes 动画名{  }

绑定到选择器 ：选择器{    animation:动画名 时长；}

【注】必须定义动画的名称和动画的持续时间，如果省略持续时间，动画将无法运行，默认值是0

使用：

用百分比（or关键词“from”和“to”等同于0%和100%）来规定变化发生的时间

动画属性：

animation-name:

animation-duration:

animation-timing-function:

animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

animation-delay:

animation-iteration-count：规定动画被播放的次数，默认是1 ；取值：n | infinite

animation-direction：规定动画是否在下一周期逆向地播放。默认是 "normal"。

animation-play-state：规定动画是否正在运行or停止，默认是“running”

简写：

animation： 动画名  持续时长 时间曲线    延时时间  播放次数  diraction    fillmode   动画状态;

多列

多列属性：

column-count：number | auto

column-gap：length | normal（W3C建议1em）

column-rule-style：

column-rule-width： thin | medium | thick | length;

column-rule-color：

column-rule：width  style color          所有 column-rule-* 属性的简写;  

column-sapn：1 | all；

column-fill：balance | auto;

columns:  column-width 与 column-count 的简写属性。

用户界面

resize：none | both | horizontal | vertical   指定一个元素是否是由用户调整大小

box-sizing：content-box | border-box | inherit   

border-box：对元素指定宽度和高度包括了 padding 和 border 

outline-offset：length | inherit 

还有其他属性但是不常用