CSS定位、过渡、变形、动画

1、定位

组成：（1）定位模式
    定位模式用于指定一个元素在文档中的定位方式
    开启定位
        选择器{
    position:定位模式
}
            静态定位
                  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.不同的是粘滞定位在元素到达某一个位置时就将其固定。

（2）偏移量

偏移量
    偏移量则决定了该元素的最终位置
    top：定位元素和定位位置上边的距离
    bottom：定位元素和定位位置下面的边距
    left：定位元素和定位位置左侧距离
    right：定位元素和定位位置右侧距离

2、过渡

过渡
    语法规则
        选择器{
    transition:property duration timing-function delay
}
            tansition属性实现简单的动画效果
                duration：定义过渡效果花费的时间
                    time值：以秒或毫秒计，默认是0，意味着没有任何效果
                property：规定应用过渡的CSS属性的名称
                    none：没有属性会获得过渡效果
                    all：默认值，所有属性获得过渡效果
                    property:定义 应用过渡效果的CSS属性名称列表
                timing-function：规定过渡效果的时间曲线
                    linear:规定以相同速度开始至结束的过渡效果
                    ease：规定慢速开始，然后变快，然后慢速结束的过渡效果
                    ease-in：规定以慢速开始的过渡效果
                    ease-out：规定以慢速结束的过渡效果
                    ease-in-out：规定以慢速开始和结束的过渡效果
                    cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值
                delay：规定开始之前需要等待的时间
                    time值：以秒或毫秒计，默认是0
            transition属性是一个复合属性，主要包含property、duration、timing-function、delay等子属性

3、变形

变形
    语法规则
        选择器{
    transform:none | transiform-functions
}
            rotate(angel)：旋转元素（Angel是度数值，代表旋转角度）
            skew(x-angel,y-angel)：倾斜元素
            skewX(angel)：沿着X轴倾斜
            skewY：沿着Y轴倾斜
            scale(x,y)：缩放元素，改变元素的高度和宽度
            scaleX：改变元素的宽度
            scaleY：改变元素的高度
            translate(x,y)：移动元素对象，基于x和y坐标重新定位元素
            translateX(x)：沿着x轴移动元素
            translateY(y）：沿着Y轴移动元素
        tansform-functions:用于设置变形函数，可以是一个或多个变形函数列表

4、动画
    关键帧语法规则
        @keyframes animationname{
    keyframes-selector{css-style}
}
            animation属性，用于设置动画的名称、时间、时间曲线等属性，它是一个复合属性。
                选择器{
    animation:name duration timing-function 
        delay iteration-count 
}
            animation-name：规定@keyframes动画的名称
                keyframe name：规定需要绑定到选择器的keyframe的名称
                none:规定无动画效果（可用于覆盖来自级联的动画)
            animation-duration：规定动画完成一个周期所花费的时间
                time值：以秒或者毫秒计算，默认是0
            animation-timing-function：规定过渡效果的时间曲线
                linear:规定以相同速度开始至结束的过渡效果
                ease：规定慢速开始，然后变快，然后慢速结束的过渡效果。
                ease-in：规定以慢速开始的过渡效果
                ease-out：规定以慢速结束的过渡效果
                ease-in-out：规定以慢速开始和结束的过渡效果
                cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值
            animation-delay：规定开始之前需要等待的时间
                time值：以秒或毫秒计，默认是0
            animation-iteration-count：规定动画播放的次数
                n：定义动画播放次数的数值，默认为1
                infinite：规定动画应该为无限次播放
        animationname是当前动画的名称
        keyframes-selector:是关键帧选择器
        css-style:当前关键帧的动画状态