40 动画 animation属性
(复合属性)
animation: name duration timing-function delay iteration-count direction fill-mode;
从左往右依次是:动画的名称、时间、速度曲线、延迟时间、播放的次数、播放顺序、动画播放完结后的状态。
40.1 @keyframes
规则
用于创建动画,animation属性只有配合@keyframes
规则才能实现动画效果,@keyframes
规则的语法如下:
@keyframes mymove{
keyframes-selector{css-styles;}
}
mymove:表示当前动画的名称(也就是后面讲到的animation-name属性定义的名称),它将作为引用时的唯一标识,因此不能为空。
keyframes-selector:关键帧选择器,即指定当前关键帧要应用到整个动画过程中的位置,值可以是一个百分比、from或者to。其中,form和0%效果相同,表示动画的开始;to和100%效果相同,表示动画的结束。当两个位置应用同一个效果时,这两个位置使用英文逗号隔开,写在一起即可,例如"20%,80%{opacity:0.5;}"。
css-styles:定义执行到当前关键帧时对应的动画状态,由css样式属性进行定义,多个属性之间用分号隔开,不能为空。
40.2 animation-name属性
用于定义要应用的动画名称
animation-name: mymove | none;
40.3 animation-duration 属性
用于定义完成整个动画效果所需要的时间
animation-duration: time;
time参数是以秒(s)或者毫秒(ms)为单位的时间。
40.4 animation-timing-function 属性
用来规定动画的速度曲线
animation-timing-function: value;
属性值 | 描述 |
---|---|
linear | 动画从头到尾的速度是相同的 |
ease | 默认属性值,动画以低速开始,然后加快,在结束前变慢 |
ease-in | 动画以低速开始 |
ease-out | 动画以低速结束 |
ease-in-out | 动画以低速开始和结束 |
cubic-bezier(n,n,n,n) | 在cubic-bezier函数中自己的值,取值范围一般是从0-1之间的数值 |
40.5 animation-delay 属性
用于定义执行动画效果延迟的时间
animation-delay: time;
40.6 animation-iteration-count 属性
用于定义动画的播放次数
animation-iteration-count: number | infinite;
属性初始值为1。如果属性值为数字(number),则表示播放动画的次数,即动画循环播放多少次;如果是infinite,则指定动画循环播放。
40.7 animation-direction 属性
用于定义当前动画播放的方向
animation-direction: normol | alternate;
normol为默认属性值,动画会正常播放,alternate 属性值会使动画在次数为奇数时(如1、3、5等)正常播放,而在次数为偶数时(如2、4、6等)逆向播放。因此首先要定义动画播放次数,动画播放次数大于等于2时,animation-direction 属性才会生效。
40.8 animation-fill-mode 属性
在不播放动画时(在开始之前,结束之后,或两者都结束时),animation-fill-mode 属性规定目标元素的样式。
animation-fill-mode: none;
- none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
- forwards - 元素将保留由最后一个关键帧设置的样式值(依赖 animation-direction 和 animation-iterationcount)。
- backwards - 元素将获取由第一个关键帧设置的样式值(取决于 animation-direction),并在动画延迟期间保 留该值。
- both - 动画会同时遵循向前和向后的规则,从而在两个方向上扩展动画属性。
41 2D/3D 变形
41.1 2D 变形
-
平移
transform: translate(x-value, y-value);/*参数值常用单位为像素或百分比*/
当参数值为正数时,(向右和向下)移动元素。负数,则向相反方向移动。
-
缩放
transform: scale(x-value, y-value);/*参数值可以为正数、负数、小数,不需要加单位*/
正数用于放大元素,负数用于翻转缩放元素,小于1的小数用于缩小元素。
-
倾斜
transform: skew(x-value, y-value);
-
旋转
transform: rotate(angle);
angle表示要旋转的角度,单位为deg,角度为正数值,顺时针旋转,否则按照逆时针方向旋转。
更改变换的中心点
transform-origin: x-axis y-axis z-axis;/*默认值为50%、50%、0px*/
参数 | 描述 |
---|---|
x-axis | 定义视图被置于x轴的何处,属性值可以为百分比、px等具体值,也可以是top、right、left等等 |
y-axis | 定义视图被置于轴y的何处,属性值可以为百分比、px等具体值,也可以是top、right、left等等 |
z-axis | 定义视图被置于z轴的何处,该值不能是一个百分比值,一般为像素单位 |
注:如果一个元素需要设置多种变形效果,可以用空格把多个变形属性值隔开。参数x-axis、y-axis表示水平和垂直位置的坐标位置,用于2D变形,参数z-axis表示空间纵深坐标位置,用于3D变形。
41.2 3D 变形
X轴:水平向右,X右边是正值,左边是负值。 Y轴:垂直向下,Y下面是正值,上面是负值。 Z轴:垂直屏幕,往外面是正值,往里面是负值。
-
rotateX() 指定元素围绕X轴旋转
transform: rotateX(a);/*a为旋转角度,正数顺时针,负数逆时针*/
-
rotateY() 指定元素围绕Y轴旋转
transform: rotateY(a);/*a为旋转角度,正数顺时针,负数逆时针*/
-
rotateZ() 指定元素围绕Z轴旋转
transform: rotateZ(a);/*a为旋转角度,正数顺时针,负数逆时针*/
-
rotate3d()
transform: rotate3d(1,0,1,45deg);/*要沿着某轴转动,就将该轴的值设为1,否则为零。45deg为旋转的角度*/
-
perspective属性
视距,设置透视效果。包括两个属性:none和具有单位的数值(一般单位为像素),属性值越小,透视效果越突出。放在被透视的父元素中使用。
除了旋转,3D变形还包括移动和缩放
42 Flex 布局
Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。行内元素也可以使用 Flex 布局。
.box{
display: flex | inline-flex;
}
采用 Flex 布局的元素,称为 Flex 容器
(flex container),简称 容器
。它的所有子元素自动成为容器成员,称为 Flex 项目
(flex item),简称 项目
。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉 点)叫做 main start,结束位置叫做 main end;交叉轴的开始位置叫做 cross start,结束位置叫做 cross end。 .box{ display: flex; } .box{ display: inline-flex; } 项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size,占据的交叉轴空间叫做 cross size。
42.1 容器的属性
以下 6 个属性设置在容器上:
属性 | 描述 |
---|---|
flex-direction | 决定主轴的方向。 |
flex-wrap | 如果一条轴线排不下,如何换行 |
flex-flow | flex-direction 属性和 flex-wrap 属性的简写属性。 |
justify-content | 定义项目在主轴上的对齐方式。 |
align-items | 定义项目在交叉轴上如何对齐。 |
align-content | 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。 |
-
flex-direction 属性 决定主轴的方向(即项目的排列方向)。
.box{ flex-direction: row | row-reverse | column | column-reverse; }
它可能有4个值:
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
-
flex-wrap 属性
默认情况下,项目都排在一条线(又称 轴线 )上。 flex-wrap 属性定义,如果一条轴线排不下,如何换行。
.box{ flex-wrap: nowrap | wrap | wrap-reverse; }
它可能取三个值:
- nowrap(默认):不换行。
- wrap:换行,第一行在上方。
- wrap-reverse:换行,第一行在下方。
-
flex-flow 属性
flex-flow
属性是flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
。.box{ flex-flow: <flex-direction> <flex-wrap>; }
-
justify-content 属性 定义了项目在主轴上的对齐方式。
它可能取 6 个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右:
- flex-start(默认值):左对齐。
- flex-end:右对齐。
- center: 居中。
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。但项目之间的间隔比项目与边框的间隔大一倍。
- space-evenly:每个项目两侧的间隔相等,且项目之间的间隔和下项目与边框的间隔相等。
-
align-items 属性 定义项目在交叉轴上如何对齐。
它可能取 5 个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下:
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline:项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为 auto,将占满整个容器的高度
-
align-content 属性 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
该属性可能取 6 个值:
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
42.2 项目的属性
以下 6 个属性设置在项目上:
属性 | 描述 |
---|---|
order | 定义项目的排列顺序。数值越小,排列越靠前,默认为 0。 |
flex-grow | 定义项目的放大比例,默认为 0,即如果存在剩余空间,也不放大。 |
flex-shrink | 定义了项目的缩小比例,默认为 1,即如果空间不足,该项目将缩小。 |
flex-basis | 定义了在分配多余空间之前,项目占据的主轴空间(main size)。它的默认值为 auto,即项目的 本来大小。 |
flex | flex-grow 、 flex-shrink 和 flex-basis 的简写,默认值为 0 1 auto 。后两个属性可选。 |
align-self | 允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。默认值为 auto 。 |
-
order 属性 定义项目的排列顺序。数值越小,排列越靠前,默认为 0。
-
flex-grow 属性 定义项目的放大比例,默认为 0,即如果存在剩余空间,也不放大。
如果所有项目的 flex-grow 属性都为 1,则它们将等分剩余空间(如果有的话)。 如果一个项目的 flex-grow 属性为 2,其他项目都为 1,则前者占据的剩余空间将比其他项多一倍。
-
flex-shrink 属性 定义了项目的缩小比例,默认为 1,即如果空间不足,该项目将缩小。
如果所有项目的 flex-shrink 属性都为 1,当空间不足时,都将等比例缩小。 如果一个项目的 flex-shrink 属性为 0,其他项目都为 1,则空间不足时,前者不缩小。
-
flex-basis 属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主 轴是否有多余空间。它的默认值为 auto,即项目的本来大小。
它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
-
flex 属性是 flex-grow 、 flex-shrink 和 flex-basis 的简写,默认值为 0 1 auto 。后两个属性可选。
该属性有两个快捷值: auto ( 1 1 auto )和 none ( 0 0 auto )。 建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
-
align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。默认值为 auto ,表 示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch 。
.item{ align-self: auto | flex-start | flex-end | center | baseline | stretch; }
该属性可能取 6 个值,除了 auto ,其他都与 align-items 属性完全一致。