CSS变形

通过变形可以对元素的位置，大小和角度进行修改。

transform属性用于设置元素的变形，需要通过不同的变形函数实现元素不同的变形，变形不会影响其它元素的位置。

transform-origin(arg1, arg2)属性设置变形的原点。

平移函数参数单位一般是px，也可以使用百分比，表示元素自身宽高的一定百分比。

translateX(dis)函数元素沿着X轴平移。
translateY(dis)函数元素沿着Y轴平移。
translateZ(dis)函数元素沿着Z轴平移，视觉上会感受到元素大小的变化。
translate3d(dis1, dis2, dis3)函数元素按顺序沿着3个轴变化。

旋转函数参数单位可以是 deg度数 | turn圈数

rotateX(ang)函数元素沿着X轴旋转。
rotateY(ang)函数元素沿着Y轴旋转。
rotateZ(ang)函数元素沿着Z轴旋转。
rotateX3d函数元素沿着X轴旋转。

缩放函数

scaleX(dis)函数元素沿着X轴缩放。
scaleY(dis)函数元素沿着Y轴缩放。
scaleZ(dis)函数元素沿着Z轴缩放。
scale(dis)函数元素沿着X轴和Y轴缩放。

perspective属性用于设置透视的效果。

    <style>
        body {
            perspective:  800px;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
            margin: 200px auto;
        }

        .box:hover {
            transform: translateX(100px) translateY(100px) translateZ(100px);
        } 
    </style>

CSS过渡

transition属性是 [transition-property]、[transition-duration]、[transition-timing-function] 和 [transition-delay]的一个简写属性，可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。

transition-property属性应用过渡的属性，默认是all，也可以同时写多个属性。

transition-duration属性过渡时间，可以分别给多个属性设置过渡时间。

transition-timing-function属性设置过渡的时间的曲线，默认值是ease，还可以设置其它属性。

linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
cubic-bezier(p1, p2, p3, p4)贝塞尔曲线
steps(x)分步

transition-delay属性延迟过渡。

        <style>
            div {
                width: 100px;
                height: 100px;
                margin-top: 30px;
                margin-left: 0;
                transition-property: margin-left;
                transition-delay: 0.5s;
                transition-duration: 4s;
            }

            .box1 {
                background-color: tomato;
            }

            .box2 {
                background-color: rgb(62, 173, 159);
                transition-timing-function: steps(10, jump-start);
            }

            .box3 {
                background-color: bisque;
                transition-timing-function: ease-in;
            }

            .box4 {
                background-color: skyblue;
                transition-timing-function: ease-out;
            }

            .box5 {
                background-color: yellowgreen;
                transition-timing-function: ease-in-out;

            }

            .box6 {
                background-color: blueviolet;
                transition-timing-function: cubic-bezier(0,-0.73,.9,.14);
            }

            body:hover .box1 {
                margin-left: 800px;
            }

            body:hover .box2 {
                margin-left: 800px;
            }

            body:hover .box3 {
                margin-left: 800px;
            }

            body:hover .box4 {
                margin-left: 800px;
            }

            body:hover .box5 {
                margin-left: 800px;
            }

            body:hover .box6 {
                margin-left: 800px;
            }
        </style>

CSS动画

动画和过渡的区别在于，过渡是需要触发条件的，比如鼠标悬浮、点击等等，而动画是自动执行的。

animation属性 是 [animation-name]，[animation-duration], [animation-timing-function]，[animation-delay]，[animation-iteration-count]，[animation-fill-mode]和 [animation-play-state] 属性的一个简写属性形式。

animation-name属性用于自主设定动画的名字。

animation-duration属性设定动画的执行时间。

animation-iteration-count属性设定动画的执行次数。

animation-delay属性设置动画第一次执行的延迟。

animation-direction属性动画的方向

reverse 动画反向执行
alternate 动画正反方向来回执行

animation-fill-mode属性设置动画的填充模式。

none 默认值延迟时元素保持不变动画执行结束恢复原状。
forwards 延迟时元素保持不变，动画执行结束后保持最终状态。
backwards 延迟时元素变为from状态，动画执行结束后恢复原状。
both 以上两种的结合

animation-play-state属性设置动画的播放状态。

paused 暂停
running 开始

        .box1 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            animation-name: demo;
            animation-duration: 5s;
            animation-iteration-count: 2;
        }

@keyframes name属性设置关键帧，name是动画的名称。

from是开始帧
to是结束帧

        @keyframes demo {
                from {
                    margin-left: 0;
                }
            
                to {
                    margin-left: 600px;
                }
        }

也可以采用百分比设置帧数

        @keyframes demo {
            0% {
                margin-left: 0;
            }

            0%, 50% {
                background-color: yellowgreen;
            }
            
            60% {
                background-color: rgb(216, 59, 32);
            }

            100% {
                margin-left: 600px;
                background-color: rgb(216, 59, 32);
            }
        }

CSS过渡与动画

CSS变形

CSS过渡

CSS动画