CSS3过渡属性 + CSS3动画属性 + 转换 +grid布局

过渡:transition

transition-property 需要过渡的样式,默认值是all

  例如:transition-property:width,height;

transition-duration 运动时间 默认是 0 s

  例如:transition-duration:3s;

transition-delay 延迟时间 默认是 0 s

  例如:transition-delay:2s;

transition-timing-function 运动形式 (默认是ease)

属性值:

• ease：（慢速开始，然后变快，然后慢速结束）
• linear：（匀速）
• ease-in：(加速)
• ease-out：（减速）
• ease-in-out：（先加速后减速,大部分加速,最后小部分减速）
• cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ） 这个是贝塞尔曲线的官网 (http:cubic-bezier.com)
• steps（） 实现一个关键逐帧动画的功能

1\ 这个transition所有的属性可以简写:
2\ 简写的时候前面时间是执行,后面时间是延迟,顺序不能换.
3\ 如果所有样式都要过渡 all可以不写
4\ 如果过渡放在初始的样式位置,那么鼠标移入和移出都有过渡
5\ 如果过渡放在结束位置,只有鼠标移入有过渡效果

动画animation

在这个动画之前，先看Keyframes关键帧，支持animation动画的只有webkit内核的浏览器

animation-name:bianse;

是用来定义一个动画的名称,bianse是由Keyframes创建的动画名 bianse要和Keyframes中的bianse一致

animation-duration 运动时间 默认是 0 s

animation-delay 延迟时间 默认是 0 s

animation-timing-function (运动形式)

动画的播放方式，具有以下六种变换方式：

• ease
• ease-in
• ease-in-out
• linear
• cubic-bezier
• steps()

animation-iteration-count (每次都是从开始到结束)

是用来指定元素播放动画的循环次数，其可以取值为数字，其默认值为“1”；infinite为无限次数循环。

animation-direction

定义是否应该轮流反向播放动画。
如果 animation-direction 值是 “alternate”，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放

animation-fill-mode:forwards; 可以最后停留显示是最后一帧样式

animation-fill-mode:backwards; 定义在延迟等待的时候,显示的结果是关键帧里面显示的第一帧样式.

animation-play-state:paused; 暂停动画

 简写:
     animation:bianse 3s 10s liner infinite;

keyframes使用:
(bianse是动画名字 animation-name)

  @keyframes bianse{
               from{
                   初始状态显示
                          }
             40%{
                    这个阶段显示
                       }
              60%{

              }
               to{
              结束状态属性
             }
        }

animation和transition的区别？

- 相同点：
   都是随着时间改变元素的属性值。
不同点：
     transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；
     而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元
     素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属
     性值。

变形属性：transform

• transform翻译成汉语具有"变换"或者"改变"的意思。
• 通过此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果,
  2D变换，是在一个平面对元素进行的操作。可以对元素进行水平或者垂直位移、旋转或者拉伸 .
  最能体现transform 属性强大实力的是实现元素的3D变换效果, 3D变换效果要想完全显示,需要属性transform-style:preserve-3d;

transform的所有属性值

1、transform：none;默认值

定义不进行转换。

2、transform：translate（200px）; 移动 平移 单位是px

平移，默认是X轴移动，可以单位是%，这个%是自己的，不是父元素的

 transform ：translateX(200px); 根据X轴给定的参数，从当前元素位置移动。
 transform ：translateY(200px); 根据Y轴给定的参数，从当前元素位置移动。
 transform ：translateZ(200px);  定义 3D 转换，只是用 Z 轴的值。z轴给正数是往前移动,Z轴是负数,是往后移动.
(如果直接写translateZ移动,代码是对的,但是看不到效果,需要视距来配合,如果transform里面写了视距,又写了其他的,视距要先写,  视距有两种写法:
     作为属性值就是 transfrom:perspective();
     作为属性 perspective:800px; 是需要给父元素添加,数值越大,代表越远,看到的效果不明显,数值越小,看到的效果明显.   )

 简写:
 transform ：translate(10px,20px); 定义 2D 平移移动。
 transform ：translate3d(10px,20px,30px);  定义 3D 平移移动。
 transform ：translateX(200px)   translateY(200px)   translateZ(200px);

3、transform：rotate（）；旋转 单位是deg deg度数

transform ：rotate(30deg); 旋转 单位deg 默认是Z轴旋转
transform ：rotateX(30deg); 根据X轴给定的参数，从当前元素位置旋转。
x轴的位置在盒子的中间, 正数往里面转,负数往外面转,需要配合视距.
 transform ：rotateY(30deg); 根据Y轴给定的参数，从当前元素位置旋转。
transform ：rotateZ(30deg);  定义 3D 转换，只是用 Z 轴的值。

简写: 
  transform ：rotate3d(0,0,1,30deg);  定义 3D 旋转。
  前面3个参数是0或者1,0表示该轴不旋转,1表示该轴旋转
 transform ：rotateX(30deg)   rotateY(30deg)   rotateZ(30deg);
 不支持三个数简写在一起的形式.
 不支持这种的: transform ：rotate3d(10px,20px,30px); 

修改轴的位置,通过新属性 transform-orign:水平的 垂直的;

单词:left right center top bottom 数字+单位

注意: 平移旋转一块用的时候,先旋转的话,轴会发生改变.

4、transform：scale（）;缩放 没有单位 默认值是1

 transform ：scaleX(2); 通过设置 X 轴的值来定义缩放转换
 transform ：scaleY(2); 通过设置 Y 轴的值来定义缩放转换
 transform ：scaleZ(2); 通过设置 Z 轴的值来定义 3D 缩放转换。
 transform ：scale(2,5); 定义 2D 缩放
 transform ：scale3d(2,3,4); 定义 3D 缩放。
 transform ：scaleX(2)   scaleY(3)  scaleZ(3);该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数，可以取负值。
 只不过取负值时，会先让元素进行翻转（顺时针180deg），然后在进行缩放

5、transform：skew（）；倾斜 单位是deg

 (注意点：倾斜没有Z轴的写法)

 transform ：skewX(30deg); 通过设置 X 轴的值来定义倾斜转换
 transform ：skewY(30deg);通过设置Y 轴的值来定义倾斜转换
 transform ：skew(30deg,130deg); 定义2D倾斜
 transform ：skewX(30deg)  skewY(130deg)  ;

6、transform：matrix（）；矩阵

7、transform：perspective（）；景深 视距 单位是px

  perspective-origin:right bottom;站在右下角去看   站在哪个视角看 跟着perspective一起用. 

确定坐标系:
2d场景，在屏幕上水平和垂直的交叉线x轴和y轴
3d场景，在垂直于屏幕的方法，相对于3d多出个z轴
Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向

grid布局

• 采用网格布局的区域，称为"容器"。
• 容器内部采用网格定位的子元素，称为"项目"。
• 注意：项目只能是容器的顶层子元素，不包含项目的子元素。Grid 布局只对项目生效。

Grid布局中添加在容器（父元素）上的属性

1、display：grid； display：inline-grid；指定一个容器采用网格布局

2、grid-template-columns 属性 设置每列的列宽,参数的个数决定是几列

A、grid-template-columns: 100px 100px 100px;
B、grid-template-columns: repeat(3, 33.33% 200px 300px);
repeat()接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。
C、grid-template-columns: 1fr 1fr; fr关键字（fraction 的缩写，意为"片段"）

3、grid-template-rows属性 定义每一行的行高

4、grid-gap属性是grid-column-gap和grid-row-gap的合并简写，设置行和列间距

5、place-items：place-items属性是align-items属性和justify-items属性的合并简写形式，设置单元格内容在水平垂直的对齐方式。

justify-items/align-items: start | end | center | stretch;

6、place-content属性是align-content属性和justify-content属性的合并简写形式。设置整个内容区域在容器里面的水平和垂直位置。

place-content: <align-content> <justify-content>。

justify-content/align-content: start | end | center | stretch | space-around | space-between | space-evenly;

7、grid-template-areas 属性 网格布局允许指定"区域"（area）

 .container {
       display: grid;
       grid-template-columns: 100px 100px 100px;
       grid-template-rows: 100px 100px 100px;
       grid-template-areas: 
                       'a b c'
                       'd e f'
                       'g h i';
                   }

Grid项目属性(添加在子级元素上的)

1、grid-area属性指定项目放在哪一个区域

grid-area:a1;或者
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

2、place-self 设置项目自己的对齐方式

place-self是align-self和justify-self的简写
place-self：start | end | center | stretch；