CSS定位和动画

    定位
        定位=定位模式+偏移量
定位模式：用于指定一个元素在文档中的定位方式。
偏移量：决定了该元素的最终位置
        语法
            选择器{
    position:定位模式
}
            top：定位元素和定位位置上边的距离
bottom：定位元素和定位位置下面的边距
left：定位元素和定位位置左侧距离
right：定位元素和定位位置右侧距离
            静态
                 div{
      position: static;
   }
特点：静态定位 按照标准流特性摆放位置，它没有边偏移。

            相对
                div{
      position: relative;
   }

特点：
1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何变化
2.相对定位会提升元素的层级。
3.相对定位不会使元素脱离文档流。
4.相对定位不会改变元素的性质块还是块，行内还是行内。
 相对定位是参照于元素本身在文档流中的位置进行定位的。坐标参考系是以自己的位置（x，y）作为原点（0，0）。
            绝对
                div{
      position: absolute;
   }
特点：
1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化。 
2.开启绝对定位后，元素会从文档流中脱离。
3.绝对定位会改变元素的性值，行内变成块，块的高度被内容撑开的。
4.绝对定位会使元素提升一个层级。
参照位置：绝对定位是相对于元素最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（也就是body）
            固定
                 div{
      position: fixed;
   }
特点：
1.固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样。
2.固定定位不占有原先位置，脱离标准流。
3.固定定位的元素不会随网页的滚动条滚动。
参照位置：以浏览器的可视窗口为参照点移动元素。
            粘滞
                div{
      position: sticky;
   }

特点：
1.粘滞定位和相对定位的特点基本一致。
2.粘性定位占用原有的位置
3.不同的是粘滞定位在元素到达某一个位置时就将其固定。
    过渡、变形与动画
        语法规则
        选择器{
    transition:property duration timing-function delay
}
tansition属性实现简单的动画效果
transition属性是一个复合属性，主要包含property、duration、timing-function、delay等子属性
        timing-function：规定过渡效果的时间曲线
取值：
linear:规定以相同速度开始至结束的过渡效果
ease：规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in：规定以慢速开始的过渡效果
ease-out：规定以慢速结束的过渡效果
ease-in-out：规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值
        transiton子属性
            property：规定应用过渡的CSS属性的名称

取值：
none：没有属性会获得过渡效果
all：默认值，所有属性获得过渡效果
property:定义 应用过渡效果的CSS属性名称列表

        选择器{
    transform:none | transiform-functions
}
tansform-functions:用于设置变形函数，可以是一个或多个变形函数列表
        关键帧语法规则
            @keyframes animationname{
    keyframes-selector{css-style}
}
animationname是当前动画的名称
keyframes-selector:是关键帧选择器
css-style:当前关键帧的动画状态