CSS定位与CSS动画$\quad$ 布局是指的屏幕平面上的，定位是垂直于屏幕的。一个div的分层： static-默认

CSS定位

1.布局和定位的区别

$\quad$ 布局是指的屏幕平面上的，定位是垂直于屏幕的。一个div的分层：

2.position属性

2.1可取值范围

static-默认值，呆在文档流中。
relative-相对定位，升起来但是不脱离文档流。可以配合z-index配置层叠样式，z-index默认值为auto用于不创建层叠上下文，可设置为... -2 -1 0 1 2...等值
absolute-绝对定位，定义基准是第一个祖先里面的非static的元素。用于脱离原来的位置，另起一层，比如对话框的关闭按钮，鼠标提示等，同样可以配合z-index使用。需要注意：1.absolute一般配合在父元素中指定position:relative使用，否则就是以整个屏幕作为基准。2.如果不写top / left,则某些浏览器会位置错乱。
fixed-固定定位，定位基准是viewport(视口)，也就是页面显示的窗口。一般用于制作一些固定在窗口的按钮。需要注意：尽量不要在手机上使用该属性。
sticky-粘滞定位

一个div的分层：

CSS动画

1.浏览器渲染的过程

根据HTML构建HTML树(DOM树)
根据CSS构建CSS树(CSSDOM)
将两棵树合并渲染为一棵树(render tree)
Layout布局(文档流，盒模型，计算大小和位置)
Paint绘制(把边框颜色、文字颜色、阴影等画出来)
Compose合成(根据层叠关系展示画面)

更加详细的内容介绍，可以参考：

developers.google.com/web/fundame…

2.transform

$\quad$ 可以通过： MDN学习地址,查看详细说明。

2.1四个常用功能

位移：translate
缩放：scale
旋转：rotate
倾斜：skew

2.2 transform之translate

translateX<length-percentage> --向X方向移动(%以自身的宽度为基准)
translateY<length-percentage> --向Y方向移动(%以自身的高度为基准)
translateZ<length> --向Z方向移动 $\quad$ 由于默认情况下，对于页面，我们的视点在页面的正上方，所以Z轴方向上的移动，我们无法看出区别。所以，需要指定视点：

.demo{
            perspective: 1000px; /*指的是页面正中心，往屏幕里面1000像素的位置*/
            border: 1px solid red;
     }

$\quad$ X，Y方向的缩放可以缩写为：translate(X,Y)，比如translate(50px,50px)。X，Y，Z三个方向的缩放可以缩写为translate3d(X,Y,Z)，比如translate(50px,50px,100px)，更多内容可以参考MDN-translate。

经验：如果需要让元素处于决定定位元素的正中心，可以使用translate(-50%,-50%)。例如：

<div class="demo">
    <div id="child">css动画</div>
</div>

#child{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }

        .demo{
            border: 1px solid black;
            height: 500px;
            position: relative;
        }

2.2 transform之scale(缩放)

常用写法：scaleX(<number>)|scaleY(<number>)|scale(<number>,<number>?) 示例：

<div class="demo">
    <div id="child">css动画</div>
</div>

#child:hover{
            transform: scaleX(2);
        }

鼠标覆盖的时候，就可以将原图形放大为原来的两倍，加上transition: all 1s;就可以实现动画的效果。

2.3 transform之rotate(旋转)

常用写法：rotate([<angle>|<zero>])|rotateX([<angle>|<zero>])|rotateY([<angle>|<zero>])|rotateZ([<angle>|<zero>]) 示例：

        #child:hover{
            transform: rotate(45deg);
            transition: all 1s;
        }

2.4 transform之skew(倾斜)

常用写法：skewX([<angle>|<zero>])|skewY([<angle>|<zero>])|skew([<angle>|<zero>],[<angle>|<zero>])

2.5组合使用

$\quad$ 以上提到的几种变化可以组合使用，用空格隔开即可。

3.transition(过渡-用于补充中间帧)

$\quad$ 可以通过： MDN学习地址,查看详细说明。语法：

1.transition:属性名时长过渡方式延迟
例如：transition:left 1s linear
2.可以用逗号分隔不同的属性
例如：translation:width 1s linear,height 1s linear
3.过渡方式包括：linear(线性) | ease(默认) | ease-in(淡入) | ease-out(淡出) | ease-in-out(淡入并淡出) |cubic-bezier|step-start|step-end|stpes , 具体含义可以参考：timing-function in mdn
4.延迟时间与时长写法一致，都可以用s ms单位。

3.1 注意：不是所有的属性都可以添加过渡

display:none =>block 就无法实现过渡
透明度的过渡，可以通过visibility:hidden => visible实现。但是需要注意，如果使用opacity 1=>0的过渡，即使元素不可见，但是任然占用页面的位置
颜色的过渡，可以实现，其本质也是数字上的变化

3.2 过渡过程如何添加中间状态

$\quad$ 过渡的过程必须要有起始两个状态，比如hover或者非hover ，那么需要增加中间状态的时候，如何实现呢？

1.使用两次transform(不推荐)
2.使用animation，示例：声明关键帧：

        @keyframes aniAction {
           0%{
               transform: none;
           }

           50%{
               transform: translateX(100px);
           }

           100%{
               transform: translateX(100px) translateY(100px);
           }
       }

在translate中调用动作：

        #head:hover{
           animation: aniAction 1.5s forwards;
           /*forwars用于停在最后一帧*/
       }

@keyframes-MDN教程

animation语法 $\quad$ animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名

时长：以s | ms为单位
过渡方式：与transition取值一样，如linear ease等
次数： 1 2 3 ....infinite(无限次)
方向：reverse|alternate|alternate-reverse
填充模式：none|forwards|backwards|both
是否暂停：paused|runnning

animation-MDN教程

4.使用animation做一个跳动的红心

$\quad$ 跳动的心-Github地址