04-动画

1.动画概述

可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。

2.语法

1.0%是动画的开始可以用from替代，100%是动画的完成可用to替代。

2.在CSS中用@keyframes中定义动画的样式，在用选择器调用animation调用动画

3.动画是是元素从一种样式逐渐变化成另一种样式的效果。可以任意改变动画节点。

@keyframes 动画名称 {
	0%{
		初始状态属性
	}
	100%{
		结束状态属性
	}
}

div {
	<!--调用动画-->
	animation-name:动画名称;
	<!--动画持续时间-->
	animation-duration:time;
}

3.用法

        @keyframes move {

            /* 初始状态 */
            0% {
                transform: translate(0, 0);
            }

            /* 结束状态 */
            100% {
                transform: translate(1200px, 0);
            }
        }
        .box1 {
            background-color: #f34;
            /* 调用动画名称 */
            animation-name: move;
            /* 动画持续时间 */
            animation-duration: 3s;
        }

4.多个动画序列用法

        @keyframes move {

            /* 初始状态 */
            0% {
                transform: translate(0, 0);
            }

            /* 百分比是动画总时间的百分比：10s+25%=2.5s */
            /* 百分比要是整数 */
            25% {
                transform: translate(1200px, 0);
            }

            /* 移动的位置时相对于初始位置，不是相对于自身 */
            50% {
                transform: translate(1200px, 500px);
            }

            75% {
                transform: translate(0, 500px);
            }

            100% {
                transform: translate(0, 0);
            }
        }

        div {
            width: 100px;
            height: 100px;
            background-color: #f34;
            animation-name: move;
            animation-duration: 10s;
        }

4.1总结

1.根据动画的时间，用百分比控制多个节点的动画状态。

2.节点的百分比必须是整数。

3.动画中的移动位置始终是相对于元素的初始位置。

5.动画属性

        div {
            width: 100px;
            height: 100px;
            background-color: #f34
            /* 动画名称(必写) */
            animation-name: move;
            /* 动画完成一个周期需要花费的时间(必写) */
            animation-duration: 3s;
        }
        
        .box2 {
            /* 动画的速度曲线，类似于过渡，默认是ease */
            animation-timing-function: ease;
            /* 动画何时开始，默认是0 */
            animation-delay: 2s;
        }

        .box3 {
            /* 动画播放的次数，默认是1，循环播放是infinite */
            animation-iteration-count: infinite;
        }

        .box4 {
            /* 要逆向播放必须要有循环播放 */
            animation-iteration-count: infinite;
            /* 动画下一周期是否逆向播放，默认是normal，逆向alternate */
            /* animation-direction: normal; */
            animation-direction: alternate;
        }

        .box5 {
            /* 动画结束后是否回到起始位置，默认是backwards，保持最终状态forwards */
            /* animation-fill-mode: backwards; */
            animation-fill-mode: forwards;
        }

        .box6:hover {
            /* 规定动画是否运行或者暂停，默认是running，暂停是paused */
            animation-play-state: paused;
        }

5.1动画属性简写

        .box1 {
            /* 书写顺序 */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            /* animation:动画名称 动画一周期时间 运动曲线 何时开始 运动次数 是否反向 运动结束后是否保留最终状态 */
            animation: move 3s linear 1s infinite alternate backwards;
        }

        .box2 {
            /* 动画名称和运动时间必写，其余的省略就是默认值 */
            animation: move 3s forwards;
        }

        .box2:hover {
            /* 运动暂停不能简写，一般和hover搭配使用 */
            animation-play-state: paused;
        }

        .box3 {
            /* 动画简写没有顺序之分，如果写了两个时间，第一个时间必须是运动时间，第二个必须是何时开始 */
            animation: 3s 1s linear backwards infinite alternate move;
        }

5.2总结

1.动画属性name和duration必写，其余的不写就是默认值。

2.动画属性简写除了动画时间和何时开始以外没有顺序之分。只有一个时间时，就是运动时间，何时开始取默认值0；有两个时间时，第一个时间必是运动时间，第二个是何时开始。

3.运动是否暂停不包含在简写范围内，需要搭配:hover使用。

5.3动画运动曲线属性

       .box1 {
            /* 默认ease，低速开始，逐渐加快，结束前变慢 */
            animation: width 2s ease infinite;
        }

        .box2 {
            /* linear匀速 */
            animation: width 2s linear infinite;
        }

        .box3 {
            /* ease-in运动以低速开始 */
            animation: width 2s ease-in infinite;
        }

        .box4 {
            /* ease-out运动以低速结束 */
            animation: width 2s ease-out infinite;
        }

        .box5 {
            /* ease-in-out运动以低速开始并结束 */
            animation: width 2s ease-in-out infinite;
        }

        .box6 {
            /* steps运动分为几步来完成 */
            animation: width 2s steps(10) infinite;
        }

        .box7 {
            /* steps运动分为几步来完成 */
            animation: width 2s steps(30) infinite;
        }

6.动画库调用动画

1.下载Animate.css网站的css文件
2.引包
3.在要加入动画的属性加上类名animated调用
4.最后添加你想要动画效果的类名即可

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./animate.css">
    <style>
        div {
            width: 100px;
            height: 80px;
            font-size: 20px;
            color: red;
        }
    </style>
</head>

<body>
    <div class="animated jello">小艾同学</div>
    <div class="animated bounceIn">小艾同学</div>
    <div class="animated bounceOutDown">小艾同学</div>
    <div class="animated fadeInLeft">小艾同学</div>
    <div class="animated flipInY">小艾同学</div>
    <div class="animated lightSpeedIn">小艾同学</div>
    <div class="animated rotateOut">小艾同学</div>
    <div class="animated hinge">小艾同学</div>
    <div class="animated zoomOutLeft">小艾同学</div>
</body>

</html>

7.案例

1.时钟

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clock {
            position: relative;
            width: 200px;
            height: 200px;
            border: 3px solid #000;
            border-radius: 50%;
            margin: 100px auto;
        }

        div[class^=line] {
            position: absolute;
            top: 0;
            left: 50%;
            width: 2px;
            height: 200px;
            background: #000;
        }

        /* 提权 */
        .clock .line1,
        .clock .line4 {
            width: 5px;
        }

        .line2 {
            transform: rotate(30deg);
        }

        .line3 {
            transform: rotate(60deg);
        }

        .clock .line4 {
            transform: rotate(90deg);
        }

        .line5 {
            transform: rotate(120deg);
        }

        .line6 {
            transform: rotate(150deg);
        }

        .cover {
            position: absolute;
            top: 10px;
            left: 12px;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            background-color: #fff;
            z-index: 2;
        }

        .second,
        .minute,
        .hour {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 50% 50% 0 0;
            background-color: #000;
            transform-origin: bottom center;
            z-index: 9;
        }

        .second {
            top: 5%;
            width: 3px;
            height: 45%;
            background-color: red;
            animation: clock 60s steps(60) infinite;
        }

        .minute {
            top: 20%;
            width: 5px;
            height: 30%;
            background-color: #09f;
            /* 60*60 */
            animation: clock 3600s steps(60) infinite;
        }

        .hour {
            top: 30%;
            width: 8px;
            height: 20%;
            /* 12*60*60 */
            animation: clock 43200s steps(60) infinite;
        }

        @keyframes clock {
            0% {
                transform: translate(-50%) rotate(0deg);
            }

            100% {
                transform: translate(-50%) rotate(360deg);
            }
        }

        .point {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: orange;
            z-index: 999;
        }
    </style>
</head>

<body>
    <div class="clock">
        <div class="cover"></div>
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
        <div class="line4"></div>
        <div class="line5"></div>
        <div class="line6"></div>
        <div class="second"></div>
        <div class="minute"></div>
        <div class="hour"></div>
        <div class="point"></div>
    </div>
</body>

</html>

2. 风车

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            float: left;
            width: 400px;
            height: 600px;
            margin-top: 100px;
        }

        .box .car {
            width: 400px;
            height: 400px;
            /* 2s匀速循环 */
            animation: fengCar 2s linear infinite;

        }

        .box .car [class ^=box] {
            position: absolute;
            /* 宽是高的一半 */
            width: 100px;
            height: 200px;
            /* 半圆 */
            border-radius: 200px 0 0 200px;
            background-color: #09f;
            background: linear-gradient(to top, #09f, #90f);
        }

        .box .car .box1 {
            left: 100px;
            top: 0;
        }

        .box .car .box2 {
            left: 250px;
            top: 50px;
            transform: rotate(90deg);
        }

        .box .car .box3 {
            left: 200px;
            top: 200px;
            transform: rotate(180deg);
        }

        .box .car .box4 {
            left: 50px;
            top: 150px;
            transform: rotate(-90deg);
        }

        .box .line {
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 5px;
            height: 400px;
            background: linear-gradient(to bottom, #09f, #90f);
            /* 将柱子藏到后面 */
            z-index: -1;
        }

        /* 鼠标经过悬停 */
        .box .car:hover {
            animation-play-state: paused;
        }

        @keyframes fengCar {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="car">
            <div class="box1"></div>
            <div class="box2"></div>
            <div class="box3"></div>
            <div class="box4"></div>
        </div>
        <div class="line"></div>
    </div>
    <div class="box">
        <div class="car">
            <div class="box1"></div>
            <div class="box2"></div>
            <div class="box3"></div>
            <div class="box4"></div>
        </div>
        <div class="line"></div>
    </div>
    <div class="box">
        <div class="car">
            <div class="box1"></div>
            <div class="box2"></div>
            <div class="box3"></div>
            <div class="box4"></div>
        </div>
        <div class="line"></div>
    </div>
</body>

</html>

3.加载

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
        }

        .loading,
        .loading::after,
        .loading::before {
            width: 10px;
            height: 40px;
            background-color: #f34;
            animation: loading 1s infinite ease-in-out alternate;
        }

        .loading {
            position: relative;
            margin: 100px auto;
            animation-delay: 0.2s;
        }

        .loading::after,
        .loading::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
        }

        .loading::after {
            margin-left: 15px;
            animation-delay: 0.4s;

        }

        .loading::before {
            margin-left: -15px;
        }

        @keyframes loading {
            0% {
                box-shadow: 0 0 #f34;
                height: 40px;
            }

            40% {
                box-shadow: 0 -20px #f34;
                height: 50px;
            }

            100% {
                box-shadow: 0 0 #f34;
                height: 40px;
            }

        }

        .box p {

            position: absolute;
            top: 50px;
            left: 690px;
            color: #f34;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="loading"></div>
        <p> loading....</p>
    </div>
</body>

</html>

4.帧动画

鱼

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            background-color: #09f;
        }

        .small_fish {
            width: 174px;
            height: 124px;
            background: url('https://user-gold-cdn.xitu.io/2020/4/8/17157d8bff70a368?w=174&h=1512&f=png&s=103179') no-repeat;
            animation: smallYao 1.5s steps(12) infinite, swiming 8s infinite;
        }

        .gold_shark,
        .blue_shark {
            width: 509px;
            height: 250px;
        }

        .gold_shark {
            background: url('https://user-gold-cdn.xitu.io/2020/4/8/17157da20113b126?w=516&h=3276&f=png&s=391429') no-repeat;
            animation: goldYao 1.5s steps(12) infinite, swiming 5s infinite;
        }

        .blue_shark {
            background: url('https://user-gold-cdn.xitu.io/2020/4/8/17157d9b58f869ec?w=509&h=3240&f=png&s=294128') no-repeat;
            animation: blueYao 1.5s steps(12) infinite, swiming 3s infinite;
        }

        @keyframes smallYao {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: 0 -1512px;
            }
        }

        @keyframes goldYao {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: 0 -3276px;
            }
        }

        @keyframes blueYao {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: 0 -3240px;
            }
        }

        @keyframes swiming {

            /* 初始 */
            0% {
                transform: translate(0px) rotate(0);
            }

            /* 游到头 */
            40% {
                transform: translate(890px) rotate(0);
            }

            /* 掉头,换方向 */
            50% {
                transform: translate(890px) rotate(180deg);
            }

            /* 回到起点 */
            90% {
                transform: translate(0px) rotate(180deg);
            }

            /* 换方向 */
            100% {
                transform: translate(0px) translate(360deg);
            }
        }
    </style>
</head>

<body>

    <div class="small_fish"></div>
    <div class="gold_shark"></div>
    <div class="blue_shark"></div>
</body>

</html>

阴阳师

<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.f4 {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			/* 高度是最高图片的高度 */
			height: 176px;
			/* background-color: #f34; */

		}

		div[class^="box"] {
			position: absolute;
			left: 0;
			bottom: 0;
			transform: translateX(-200px);
			animation: move 10s linear infinite;
		}

		div[class^="box"]::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			background-repeat: no-repeat;
			animation-timing-function: steps(2);
			animation-iteration-count: infinite;
		}

		.box1 {
			width: 154px;
			height: 121px;
		}

		.box1::after {
			width: 154px;
			height: 121px;
			background-image: url(https://user-gold-cdn.xitu.io/2020/4/8/17157df9ff38c0fb?w=308&h=121&f=png&s=14349);
			/* 分两步 */
			animation: box1after .4s;
		}

		@keyframes move {
			0% {
				transform: translateX(-200px);
			}

			100% {
				transform: translateX(1920px);
			}
		}

		@keyframes box1after {
			0% {
				background-position: 0 0;
			}

			100% {
				/* 整个图片的宽度 */
				background-position: -308px 0;
			}
		}

		.f4 .box2 {
			width: 167px;
			height: 176px;
			animation-delay: 1.5s;
		}

		.box2::after {
			width: 167px;
			height: 176px;
			background-image: url(https://user-gold-cdn.xitu.io/2020/4/8/17157e001b70cd4e?w=334&h=176&f=png&s=14686);
			/* 分两步 */
			animation: box2after .4s;
		}

		@keyframes box2after {
			0% {
				background-position: 0 0;
			}

			100% {
				/* 整个图片的宽度 */
				background-position: -334px 0;
			}
		}

		.f4 .box3 {
			width: 161px;
			height: 149px;
			animation-delay: 3s;
		}

		.box3::after {
			width: 161px;
			height: 149px;
			background-image: url(https://user-gold-cdn.xitu.io/2020/4/8/17157e08859240d6?w=322&h=149&f=png&s=16439);
			/* 分两步 */
			animation: box3after .4s;
		}

		@keyframes box3after {
			0% {
				background-position: 0 0;
			}

			100% {
				/* 整个图片的宽度 */
				background-position: -322px 0;
			}
		}

		.f4 .box4 {
			width: 171px;
			height: 157px;
			animation-delay: 4.5s;
		}

		.box4::after {
			width: 171px;
			height: 157px;
			background-image: url(https://user-gold-cdn.xitu.io/2020/4/8/17157e0d2d9f8e9b?w=342&h=157&f=png&s=15668);
			/* 分两步 */
			animation: box4after .4s;
		}

		@keyframes box4after {
			0% {
				background-position: 0 0;
			}

			100% {
				/* 整个图片的宽度 */
				background-position: -322px 0;
			}
		}
	</style>
</head>

<body>
	<div class="f4">
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
	</div>
</body>

</html>

5.地图

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #333;
        }

        .map {
            position: relative;
            width: 747px;
            height: 617px;
            margin: 0 auto;
            background: url(https://user-gold-cdn.xitu.io/2020/4/8/17157dbc721d5ce2?w=747&h=617&f=png&s=176409);
        }

        .map .city {
            position: absolute;
            top: 229px;
            right: 192px;
        }

        .map .tb {
            position: absolute;
            top: 498px;
            right: 79px;
        }

        .map .gz {
            position: absolute;
            top: 543px;
            right: 193px;
        }

        .map .city .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }

        /* 选择div里面以pulse开头的元素 */
        .map .city div[class^="pulse"] {
            /* 让波纹在city中水平垂直居中 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            /* 波纹设置阴影 */
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            /* 设置2s匀速循环播放 */
            animation: pulse 1.2s linear infinite;
        }

        /* 让波纹更有层次感，设置每个波纹的开始时间不一样 */
        /* 提权层叠 */
        .map .city div.pulse2 {
            animation-delay: .4s;
        }

        .map .city div.pulse3 {
            animation-delay: .8s;
        }

        @keyframes pulse {
            0% {}

            50% {
                width: 40px;
                height: 40px;
                opacity: 1;
            }

            100% {
                width: 80px;
                height: 80px;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <!-- 地图 -->
    <div class="map">
        <!-- 城市 -->
        <div class="city">
            <!-- 小点 -->
            <div class="dotted"></div>
            <!-- 波纹 -->
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
            <!-- 小点 -->
            <div class="dotted"></div>
            <!-- 波纹 -->
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city gz">
            <!-- 小点 -->
            <div class="dotted"></div>
            <!-- 波纹 -->
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

</html>