前端css 动画过渡类型以及不同写法

news2024/11/16 9:57:30

动画过渡简写和复合写法

拆开写

transition-property: height background; 单独设置宽高或者all

transition-duration: 2s; 运动时间

transition-timing-function: linear; 不同速度类型

transition-delay: 5s; 延迟时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: yellow;
            transition-property: height background;
            /* 单独设置宽高或者all、 */
            transition-duration: 2s;
            /* 运动时间 */
            transition-timing-function: linear;
            /* 不同速度类型 */
            transition-delay: 5s;
            /* 延迟时间 */
        }
        div:hover{
            height: 600px;
            background: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

复合写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: red;
            transition:all 2s linear 2s;
            /* all:所有属性
            2s   动画时间
            linear  默认匀速
            2s  延迟2s
            
            */
        }
        div:hover{
            width: 400px;
            height: 600px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

6种不同类型的过渡

cubic-bezier.comhttps://cubic-bezier.com/#.17,.67,.83,.67

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
        }
        li{
            width: 200px;
            height: 50px;
            border: 1px solid gray;
        }
        ul:hover li:nth-child(1){
            width: 600px;
            transition: all 2s linear;
        }
        ul:hover li:nth-child(2){
            width: 600px;
            transition: all 2s ease;
        }
        ul:hover li:nth-child(3){
            width: 600px;
            transition: all 2s ease-in;
        }
        ul:hover li:nth-child(4){
            width: 600px;
            transition: all 2s ease-in-out;
        }
        ul:hover li:nth-child(5){
            width: 600px;
            transition: all 2s ease-in-out;
        }
        ul:hover li:nth-child(6){
            width: 600px;
            transition: all 2s cubic-bezier(.17,.67,1,-0.06);
        }
    </style>
</head>
<body>
    <ul>
        <li>匀速</li>
        <li>逐渐慢</li>
        <li>加速</li>
        <li>减速</li>
        <li>先加速后减速</li>
        <li>贝塞尔曲线</li>
    </ul>
</body>
</html>