css3animation动画，你会用了吗？-cyy

2020-11-12
1155

animation关键帧使用介绍：

<!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>

帧顺序与起始与终点帧特性：

顺序颠倒不影响；

起点帧不写的话，是使用元素默认的状态；

终点帧不设置的话，也是会回到元素默认的状态；

<!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>

同时声明关键帧规则：

<!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>

多个动画使用与时间配置：

当动画数量超过定义的动画时间数量时，多出的动画会从头循环时间

<!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>

属性重叠对动画的影响：

当属性重叠时，前面的会被后面的覆盖

<!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>