CSS3.0（过渡、动画、弹性盒、响应式）总结（2）

过渡属性

transition:属性 时间 延迟时间 效果

property   duration  delay  timing-function

过渡属性谁变给谁加，使用复合写法只需要写时间即可生效，属性默认是all

---

动画属性

定义动画：

@keyframs 动画名｛from{} 50%{} to{}｝

使用动画：

复合写法 animation:动画名 时间 延迟时间 效果 次数 交替 停止 停在哪一帧

动画时间及延迟

animation-duration/ delay：s/ms

动画效果属性及属性值

animation-timing-function:linear/ease（默认值）/ease-in/ease-out/ease-in-out

分别表示：匀速/开始时候慢，中间增快结束时变慢/逐渐加速/逐渐减速/动画以低速开始和结束

动画执行次数

animation-interation-count:数字/infinte（无限次）

动画交替

animation-direction:reverse/alternate（正反交替）

动画停止

animation-play-state:running/paused(暂停)

动画停止位置
animation-fill-mode:backwards(停在第一个关键帧)/forwards(最后一个关键帧)

---

过渡和动画属性的区别：

1、过渡需要鼠标触发，动画不需要鼠标触发自动执行

2、动画可以循环

3、动画可以有多个状态，添加多个关键帧

4、动画可以停止

---

弹性盒布局及其属性

父元素属性

形成弹性盒display:flex

主轴方向flex-direction:row/row-reverse/column/column-reverse

主轴排列方式justify-content:flex-start/center/flex-end/space-between/space-around/space-evenly

交叉轴排列方式align-items:stretch/flex-start/center/flex-end

换行属性flex-wrap:nowrap（默认不换行）/wrap

多行元素交叉轴排列方式align-content:stretch/flex-start/center/flex-end/space-between/space-around/space-evenly

子元素属性

某个子元素在交叉轴的排列方式属性align-self

排列顺序order：数值（数值越大越靠后）

压缩属性flex-shrink:1表示默认值压缩/0代表不压缩

放大属性flex-grow:1表示拿取剩余的空间（0是默认值表示不放大）

子项宽flex-basis:数值PX/百分比

复合写法：flex:放大 压缩 宽

flex:1即可表示放大属性

---

弹性盒小结：

• 形成弹性盒后所有元素默认横着（主轴）从左致右排列，默认即使设置了宽度也会压缩（flex-shrink=1）至容器内；
• 默认子元素没有高度的话会在交叉轴方向自动拉伸至充满容器（有高度则不会）；
• 如果设置了flex-wrap:wrap后形成多行元素，没有高度同样会拉伸至容器高度刚好能够包含所有元素，如果子元素设置了高度，子元素可能会存在下间距，原因是子元素的拉伸间距默认是已经预留出来的，这时使用多行交叉轴排列属性即可正常调整样式；
• 容器给宽高再给弹性盒，子元素不设置高，使其自动拉伸，之后使用交叉轴排列方式居中即可（高度宽度由子元素内容撑开）实现子元素内容居中显示，如果子元素设置了100%的高度，则子元素不会居中
• 子元素高度不设置，默认拉伸至充满容器，但是如果给多行交叉轴排列属性的话，没有内容的子元素会高度塌陷为0
• 形成弹性盒之后，子元素宽度被压缩，但是图片不会被压缩
• 如何形成横向滚动条（移动端常用）：第一种情况：子元素宽度由内容撑开（不设宽），再给margin（margin不会被压缩），最后给overflow：auto即可/第二种情况：子元素设置宽，给子元素设flex-shrink:0不压缩，再给overflow:auto即可

---

响应式界面

根据不同的浏览器的视口大小改变样式

媒体查询

@media 媒体类型 and （媒体特性）｛｝

max-width:数值px     表示当视口低于该值时显示的样式

min-width:数值px     表示视口高于该值时显示的样式

写法如下

@media all and (max-width:300px){div{height:200px;color:red} p｛width:100px｝}