css3 animation動畫，你會用了嗎？ -cyy

時間 2020-11-16

標籤 css html jquery bootstrap flex 動畫 spa scala code orm 欄目 CSS 简体版

原文原文鏈接

animation關鍵幀使用介紹：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">
    <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: #34495e;
        }
        main{
            width:100px;
            height:100px;
            background:white;
            animation-name:hd;
            animation-duration:2s;
        }
        /* @keyframes hd{
            from{
                background:white;
            }
            to{
                background:#e91e63;
            }
        } */
        @keyframes hd{
            0%{
                background:white;
            }
            25%{
                transform:scale(2);
            }
            65%{
                transform:scale(1);
            }
            100%{
                background:#e91e63;
            }
        }
    </style>
</head>
<body>
    <main></main>
</body>
</html>

幀順序與起始與終點幀特性：html

順序顛倒不影響；jquery

起點幀不寫的話，是使用元素默認的狀態；bootstrap

終點幀不設置的話，也是會回到元素默認的狀態；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">
    <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: #34495e;
        }
        main{
            width:100px;
            height:100px;
            background:white;
            animation-name:hd;
            animation-duration:2s;
        }
        @keyframes hd{
            100%{
                background:#e91e63;
            }
            0%{
                background:white;
            }
            
        }
    </style>
</head>
<body>
    <main></main>
</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: #34495e;
        }
        main{
            width:400px;
            height:400px;
            border:1px solid #ddd;
        }
        div{
            width:100px;
            height:100px;
            background:pink;
            animation-name:hd;
            animation-duration:4s;
        }
        @keyframes hd{
            25%{
                transform:translate(300px,0);
            }
            50%{
                transform:translate(300px,300px);
            }
            75%{
                transform:translate(0,300px);
            }
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

同時聲明關鍵幀規則：spa

<!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: #34495e;
        }
        main{
            width:400px;
            height:400px;
            border:1px solid #ddd;
        }
        div{
            width:100px;
            height:100px;
            background:pink;
            animation-name:hd;
            animation-duration:4s;
        }
        @keyframes hd{
            25%{
                transform:translate(300px,0);
            }
            50%{
                transform:translate(300px,300px);
                background:pink;
                border-radius:0;
            }
            75%{
                transform:translate(0,300px);
            }
            25%,75%{
                background:#abcdef;
                border-radius:50%;
            }
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

多個動畫使用與時間配置：scala

當動畫數量超過定義的動畫時間數量時，多出的動畫會從頭循環時間code

<!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: #34495e;
        }
        main{
            width:400px;
            height:400px;
            border:1px solid #ddd;
        }
        div{
            width:100px;
            height:100px;
            background:pink;
            animation-name:translate,background;
            animation-duration:4s;
            animation-duration:4s,2s;
        }
        @keyframes translate{
            25%{
                transform:translate(300px,0);
            }
            50%{
                transform:translate(300px,300px);
            }
            75%{
                transform:translate(0,300px);
            }
        }
        @keyframes background{
            25%{
                background:#c9e91e;
            }
            50%{
                background:#ffc107;
            }
            75%{
                background:#2196f3;
            }
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

屬性重疊對動畫的影響：orm

當屬性重疊時，前面的會被後面的覆蓋

<!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: #34495e;
        }
        main{
            width:400px;
            height:400px;
            border:1px solid #ddd;
        }
        div{
            width:100px;
            height:100px;
            background:pink;
            animation-name:translate,background;
            animation-duration:4s;
            animation-duration:4s,2s;
        }
        @keyframes translate{
            25%{
                transform:translate(300px,0);
            }
            50%{
                transform:translate(300px,300px);
            }
            75%{
                transform:translate(0,300px);
            }
        }
        @keyframes background{
            25%{
                background:#c9e91e;
                transform:translate(300px,0);
            }
            50%{
                background:#ffc107;
            }
            75%{
                background:#2196f3;
            }
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</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{
            background-color: dimgrey;
        }
        main{
            width:100vw;
            height:100vh;
            background-color: #34495e;
            transform:scale(0);
            animation-name:scale,background;
            animation-duration:2s;
            animation-fill-mode:forwards;
            display:flex;
            justify-content: center;
            align-items: center;
        }
        main::after{
            content:'CYY';
            color:white;
            font-size:2em;
            opacity:0;
            animation-name:opacity;
            animation-duration:1s;
            animation-delay:2s;
            animation-fill-mode:forwards;
        }
        @keyframes opacity{
            to{
                opacity:.8;
            }
        }
        @keyframes scale{
            25%{
                transform:scale(.5);
            }
            50%{
                transform:scale(1) rotate(360deg);
            }
            75%{
                transform:scale(.5);
            }
            100%{
                transform:scale(1);
            }
        }
        @keyframes background{
            25%{
                background:#c9e91e;
            }
            50%{
                background:#ffc107;
            }
            75%{
                background:#2196f3;
            }
            100%{
                background:#f48eb1;
            }
        }
    </style>
</head>
<body>
    <main>
  
    </main>
</body>
</html>

動畫屬性中間值詳解：

有中間值的屬性才能夠進行動畫，不然就是突變

animation-iteration-count 控制動畫播放次數

<!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: #34495e;
        }
        main{
            width:400px;
            height:400px;
            border:1px solid #ddd;
        }
        div{
            width:100px;
            height:100px;
            background:pink;
            animation-name:translate,background;
            animation-duration:2s;
            animation-iteration-count:2;
            animation-iteration-count:2,1;
            /* 無限循環 */
            animation-iteration-count:infinite;
        }
        @keyframes translate{
            25%{
                transform:translate(300px,0);
            }
            50%{
                transform:translate(300px,300px);
            }
            75%{
                transform:translate(0,300px);
            }
        }
        @keyframes background{
            25%{
                background:#c9e91e;
            }
            50%{
                background:#ffc107;
            }
            75%{
                background:#2196f3;
            }
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</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: #34495e;
        }
        .heart{
            width:200px;
            height:200px;
            background:#e93e1e;
            position:relative;
            transform:rotate(45deg) scale(.5);
            animation-name:hd;
            animation-duration:2s;
            animation-iteration-count:infinite;
            opacity:.5;
            
        }
        @keyframes hd{
            20%{
                transform:rotate(45deg) scale(1);
                opacity:1;
            }
            40%{
                transform:rotate(45deg) scale(.5);
                opacity:.5;
            }
            60%{
                transform:rotate(45deg) scale(1);
                opacity:1;
            }
            80%{
                transform:rotate(45deg) scale(.5);
                opacity:.5;
            }
            100%{
                transform:rotate(45deg) scale(1);
                opacity:1;
            }
        }
        .heart::before{
            content:'';
            width:200px;
            height:200px;
            background:#e93e1e;
            transform:translateX(-100px);
            position:absolute;
            border-radius:50%;
        }
        .heart::after{
            content:'';
            width:200px;
            height:200px;
            background:#e93e1e;
            transform:translateY(-100px);
            position:absolute;
            border-radius:50%;
        }
    </style>
</head>
<body>
    <div class="heart"></div>
</body>
</html>

animation-direction 控制動畫方向的四種模式：

<!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: #34495e;
        }
        ul{
            width:400px;
            height:100px;
            list-style:none;
            display:flex;
        }
        li{
            color:#e93e1e;
            flex:1;
            border:1px solid #ddd;
            display:flex;
            justify-content: center;
            position: relative;;
        }
        li span{
            position:absolute;
            bottom:0;
        }
        li:nth-child(1)>i{
            /* 默認值normal，不加也能夠 */
            /* 正向，循環時突變 */
            animation-direction:normal;
        }
        li:nth-child(2)>i{
            /* 反向，循環時突變 */
            animation-direction:reverse;
        }
        li:nth-child(3)>i{
            /* 正向，循環時過渡 */
            animation-direction:alternate;
        }
        li:nth-child(4)>i{
            /* 反向，循環時過渡 */
            animation-direction:alternate-reverse;
        }
        i.fa{
            font-size:3em;
            animation-name:scale;
            animation-duration:2s;
            animation-iteration-count:infinite;
            position:absolute;
        }
        @keyframes scale{
            to{
                transform:scale(2);
            }
        }
    </style>
</head>
<body>
    <ul>
        <li><i class="fa fa-heart" aria-hidden="true"></i><span>normal</span></li>
        <li><i class="fa fa-heart" aria-hidden="true"></i><span>reverse</span></li>
        <li><i class="fa fa-heart" aria-hidden="true"></i><span>alternate</span></li>
        <li><i class="fa fa-heart" aria-hidden="true"></i><span>alternate-reverse</span></li>
    </ul>
</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: #34495e;
        }
        
        div{
            width:100px;
            height:100px;
            background:radial-gradient(at center,#ffeb3b,#ff893b);
            border-radius:50%;

            animation-name:ball;
            animation-duration:.7s;
            animation-iteration-count:infinite;
            animation-direction:alternate-reverse;
        }
        section{
            width:200px;
            height:40px;
            background:rgba(0,0,0,.3);
            border-radius:50%;
            position:absolute;
            transform:translateY(50px);
            z-index:-1;
            filter:blur(5px);

            animation-name:shadow;
            animation-duration:.7s;
            animation-iteration-count:infinite;
            animation-direction:alternate-reverse;
        }
        @keyframes shadow{
            to{
                height:20px;
                background:rgba(0,0,0,.1);
                filter:blur(35px);
            }
        }
        @keyframes ball{
            to{
                transform:translateY(-300px);
            }
        }
    </style>
</head>
<body>
    <div></div>
    <section></section>
</body>
</html>