css3 transition過渡效果 -cyy

時間 2020-11-16

標籤 css html jquery css3 bootstrap 函數工具 flex 動畫 spa 欄目 CSS 简体版

原文原文鏈接

css3過渡使用場景分析：css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        main{
            width:400px;
            height:400px;
        }
        div{
            width:200px;
            height:200px;
            background-color: cornflowerblue;
            transition:1s;
        }
        div:hover {
            border-radius:50%;
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

屬性中間值對過渡的影響：html

沒有中間值的屬性沒法實現過渡動畫效果jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        main{
            width:400px;
            height:400px;
        }
        div{
            width:200px;
            height:200px;
            background-color: cornflowerblue;
            transition:1s;
            border:10px solid pink;
        }
        div:hover {
            border-radius:50%;
            width:400px;
            height:400px;
            border:20px dotted lightblue;
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

定製css過渡效果屬性：css3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        main{
            width:400px;
            height:400px;
        }
        div{
            width:200px;
            height:200px;
            background-color: cornflowerblue;
            border:10px solid white;
            /* 過渡屬性 */
            transition-property:background,width,height,border-radius;
            transition-property:all;
            /* 過渡持續時間 */
            transition-duration:2s;
            margin-bottom:50px;
        }
        main:hover div{
            background-color: pink;
            border-radius:50%;
            width:400px;
            height:400px;
        }
        div:nth-child(1){
            transition-property:all;
        }
        div:nth-child(2){
            transition-property:none;
        }
    </style>
</head>
<body>
    <main>
        <div></div>
        <div></div>
    </main>
</body>
</html>

transitionend動畫API接口：bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        main{
            width:400px;
            height:400px;
        }
        div{
            width:200px;
            height:200px;
            position:relative;
        }
        div::before{
            position:absolute;
            width:200px;
            height:200px;
            background-color: cornflowerblue;
            border-radius:10%;
            content:'cyy';
            display:flex;
            justify-content: center;
            align-items: center;
            color:white;
            font-size:2em;
            transition:2s;
            cursor:pointer;
        }
        div:hover::before{
            transform:rotate(360deg);
        }
        div::after{
            position:absolute;
            width:200px;
            bottom:-55px;
            content:'cyy is cute~';
            color:white;
            font-size:1.2em;
            text-align:center;
            transition:2s;
            cursor:pointer;
            transform:translateX(-999px);
        }
        div.move::after{
            transform:translateX(0);
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>

    <script>
        document.querySelector('div').addEventListener('transitionend',function(e){
            console.log(e)
            document.querySelector('div').className = 'move';
        })
    </script>
</body>
</html>

transition-duration 過渡時間使用技巧：函數

過渡時間與過渡屬性一一配對，當過渡時間數量少於過渡屬性時，會循環回到最初的過渡時間工具

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        main{
            width:400px;
            height:400px;
        }
        div{
            width:200px;
            height:200px;
            background-color: cornflowerblue;
            transition-property:background,width,height;
            /* 過渡屬性height會選擇過渡時間1s */
            transition-duration:1s,2s;
        }
        div:hover {
            width:400px;
            height:400px;
            background-color: pink;
            border-radius:50%;
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

不一樣狀態過渡時間效果控制：flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        main{
            width:400px;
            height:400px;
        }
        div{
            width:200px;
            height:200px;
            background-color: cornflowerblue;
            transition-property:background,width,height;
            /* 過渡屬性height會選擇過渡時間1s */
            transition-duration:1s,2s;
        }
        div:hover {
            width:400px;
            height:400px;
            background-color: pink;
            border-radius:50%;
            transition-property:background;
            /* 過渡屬性height會選擇過渡時間1s */
            transition-duration:1s;
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

transition-timing-function 控制運行軌跡：動畫

貝塞爾曲線工具網：https://cubic-bezier.com/#.11,.75,.92,.57spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        main{
            width:400px;
            height:400px;
        }
        div{
            width:200px;
            height:200px;
            background-color: cornflowerblue;
            transition-duration:3s;
            transition-timing-function:cubic-bezier(.15,.79,.72,-0.09);
        }
        div:hover {
            width:400px;
            height:400px;
            background-color: pink;
            border-radius:50%;
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

steps步進幀動畫控制效果：

steps() 設置間隔參數，能夠實現分步過渡

第一個參數指定了時間函數中的間隔數量（必須是正整數）
第二個參數可選，接受 start 和 end 兩個值，指定在每一個間隔的起點或是終點發生階躍變化，默認爲 end。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        main{
            width:400px;
            height:400px;
        }
        div{
            width:200px;
            height:200px;
            background-color: cornflowerblue;
            transition-duration:1s;
            
            transition-timing-function:steps(3,end);
            transition-timing-function:steps(1,end);
            transition-timing-function:steps(1,start);
            transition-timing-function:step-start;
            transition-timing-function:step-end;
            transition-timing-function:steps(3,start);
        }
        div:hover {
            width:400px;
            height:400px;
            background-color: pink;
            border-radius:50%;
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

使用steps步進過渡製做時鐘：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        main{
            width:400px;
            height:400px;
            background:white;
            border-radius:50%;
            position:relative;
        }
        main::before{
            content:'';
            width:20px;
            height:20px;
            background-color: black;
            border-radius:50%;
            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);
        }
        main::after{
            content:'';
            width:2px;
            height:50%;
            background-color: black;
            border-radius:50%;
            position:absolute;
            left:50%;
            top:0;
            transform:translateX(-50%);
            transition:60s;
            transform-origin:bottom;
            transition-timing-function:steps(60,start);
        }
        main:hover::after{
            transform:translateX(-50%) rotate(360deg);
        }
    </style>
</head>
<body>
    <main>
        
    </main>
</body>
</html>

step-end與step-start使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        ul{
            width:400px;
            height:300px;
            display:flex;
            position:relative;
            list-style:none;
        }
        li{
            flex:1;
            border:1px solid #ddd;
            text-align:center;
        }
        ul::before{
            content:'start';
            width:200px;
            height:100px;
            background:orange;
            position:absolute;
            top:0;
            left:0;
            transition-duration:1s;
            font-size:2em;
            color:white;
            transition-timing-function:step-start;
            z-index:2;
        }
        ul::after{
            content:'end';
            width:200px;
            height:100px;
            background:purple;
            position:absolute;
            bottom:0;
            left:0;
            transition-duration:1s;
            font-size:2em;
            color:white;
            transition-timing-function:step-end;
            z-index:2;
        }
        ul:hover::before,ul:hover::after{
            transform:translateX(200px);
        }

    </style>
</head>
<body>
    <main>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </main>
</body>
</html>

純css圖片切換效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        main{
            width:400px;
            height:200px;
            overflow:hidden;
        }
        main:hover section{
            transform:translateX(-50%);
        }
        section{
            width:800px;
            height:200px;
            display:flex;
            transition:1s;
            transition-timing-function:step-start;
        }
        div{
            width:400px;
            height:200px;
            overflow:hidden;
        }
        img{
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
    <main>
        <section>
            <div><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2329224269,1458878414&fm=26&gp=0.jpg" alt=""></div>
            <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605093891148&di=5a12000e61c98e16a488d9570ce09b4d&imgtype=0&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D4042660312%2C2429876079%26fm%3D214%26gp%3D0.jpg" alt=""></div>
        </section>
    </main>
</body>
</html>

transition-delay 延遲過渡使用：

多用於下拉導航顯示，鼠標移入必定時間後再顯示；鼠標移入馬上移出則不顯示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        main{
            width:400px;
            height:200px;
            overflow:hidden;
        }
        main:hover section{
            transform:translateX(-50%);
        }
        section{
            width:800px;
            height:200px;
            display:flex;
            transition:1s;
            transition-delay:1s;
        }
        div{
            width:400px;
            height:200px;
            overflow:hidden;
        }
        img{
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
    <main>
        <section>
            <div><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2329224269,1458878414&fm=26&gp=0.jpg" alt=""></div>
            <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605093891148&di=5a12000e61c98e16a488d9570ce09b4d&imgtype=0&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D4042660312%2C2429876079%26fm%3D214%26gp%3D0.jpg" alt=""></div>
        </section>
    </main>
</body>
</html>

transition 組合設置所有過渡規則：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #474747;
        }
        div{
            width:200px;
            height:200px;
            background:lightblue;

            transition:border-radius linear 1s,background ease 1s 1s;
        }
        body:hover div{
            border-radius:50%;
            background:pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

紅心點贊案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color: #f3f3f3;
        }
        main{
            width:50px;
            height:50px;
            position:relative;
            border:1px solid #ddd;
        }
        i.fa{
            font-size:50px;
            color:#95a5a6;
            position:absolute;
            transition:1s;
        }
        main.heart i.fa{
            transform:scale(3);
            color:crimson;
            opacity:0;
        }
        main.heart i.fa:nth-child(1){
            transform:scale(1);
            opacity:1;
        }
    </style>
</head>
<body>
    <main onclick="heart()">
        <i class="fa fa-heart" aria-hidden="true"></i>
        <i class="fa fa-heart" aria-hidden="true"></i>
    </main>

    <script>
        function heart(){
            $('main').toggleClass('heart');
        }
    </script>
</body>
</html>