34.前端笔记-CSS3-动画

1、动画

动画animation是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

2、动画的基本使用

1、先定义动画
2、在使用动画

2.1 定义动画keyframes

2.1.1 动画序列

0%是动画的开始，100%是动画的结束，范围是0-100。这样的规则就是动画序列
在@keyframes中规定某些CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
动画是使元素从一种样式逐渐变为另一种样式的效果。可以改变任意多的样式，任意多的次数
要用百分比规定变化发生的时间，或用关键词“from"和”to"，等同于0%和100%

2.1.2 语法

/*动画名称是自己取得*/
@keyframes 动画名称{
/*开始状态*/
	0%{
	width:100px;
	}
/*结束状态*/
	100%{
	width:200px;
	}
}

2.2 元素使用动画

2.2.1 语法

div{
	/*调用动画*/
	animation-name:动画名称;
	/*持续时间,单位是秒s*/
	animation-duration:持续时间; 
}

练习1：

打开页面，盒子就从左边走到右边

<!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>
        @keyframes moving{
            0%{
                transform:translateX(0);
            }
            100%{
                transform: translate(300px);
            }
        }
        div{
            width: 100px;
            height: 100px;
            background-color: orange;
            animation-name: moving;
            animation-duration: 2s;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

动画1

练习2：

设置动画多个状态，盒子转一圈回到原点

<!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>
        @keyframes move{
            0%{
                transform:translate(0);
            }
            25%{
                transform: translate(1000px,0);
            }
            50%{
                transform: translate(1000px,400px);
            }
            75%{
                transform: translate(0,400px);
            }
            100%{
                transform: translate(0,0);
            }

        }
        div{
            width: 100px;
            height: 100px;
            background-color: orange;
            /*动画名称*/
            animation-name: move;
            /* 持续时间 */
            animation-duration: 10s;
   
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

动画2

练习3：波纹放大

opacity:透明度属性0-完全透明 1.0完全不透明
position：定位
box-shadow:阴影
animation:pulse 1.2s linear infinite

<!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>
        .map {
            width: 100%;
            height: 616px;
            background: url(../images/map.webp) no-repeat;
        }

        .city {
            position: absolute;
            top: 381px;
            left: 721px;
            color: #fff;
        }

        .dotted {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: orange;
        }

        .city div[class^="wave"] {
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px rgb(229, 197, 137);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            animation: wave 1.2s linear infinite;
        }
        .city div.wave2{
            animation-delay: 0.4s;
        }
        .city div.wave3{
            animation-delay: 0.8s;
        }
        @keyframes wave{
            0%{}
            70%{
                width: 40px;
                height: 40px;
                opacity: 1;
            }
            100%{
                width: 80px;
                height: 80px;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="city">
            <!-- city没有设置宽带高度，所以dotted就是city的大小 -->
            <div class="dotted"></div>
            <div class="wave1"></div>
            <div calss="wave2"></div>
            <div class="wave3"></div>
        </div>
    </div>

</body>

</html>

动画3波纹效果

2.3 动画的属性

在这里插入图片描述

<!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>
        @keyframes move {
            0% {
                transform: translate(0);
            }

            25% {
                transform: translate(1000px, 0);
            }

            50% {
                transform: translate(1000px, 400px);
            }

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

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

        }

        div {
            width: 100px;
            height: 100px;
            background-color: orange;
            /*动画名称*/
            animation-name: move;
            /* 持续时间 */
            animation-duration: 10s;
            /* 何时开始 */
            animation-delay: 1s;
            /* 运动曲线 */
            animation-timing-function: ease;
            /* 循环播放次数,默认是1，无限infinite */
            animation-iteration-count: 2;
            /* 是否反方向播放：默认是normal,反方向写alternate
            循环播放次数必须设置大于1才可以看到反向效果 */
            animation-direction: alternate;
            /* 动画结束后的状态：默认是backwards回到起始状态，可以停留在结束状态forwards */
            animation-fill-mode: forwards;

        }

        /* 鼠标经过，动画停止 */
        div:hover {
            /* 规定动画是否正在运行或暂停，默认是running,暂停是paused */
            animation-play-state: paused;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

动画属性简写

前两个属性（动画名称持续时间）一定要写，其余可以省略
简写属性里不包括animation-play-state，要用的话得单独写

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态

animation: move 5s linear 2s infinate alternate;

速度曲线细节

animation-timimg-function:规定动画的速度曲线，默认是ease

值	描述
linear	匀速
ease	默认。低速开始-然后加快-结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
steps()	指定了时间函数中的间隔数量（步长）

<!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: 0;
            height: 30px;
            font-size: 20px;
            background-color: orange;
            white-space: nowrap;
            overflow: hidden;
            animation-name: change;
            animation-timing-function: steps(10);
            animation-duration: 4s;
            animation-fill-mode: forwards;
        }
        @keyframes change{
            0%{
                width: 0;
            }
            100%{
                width: 200px;
            }
        }
    </style>
</head>
<body>
    <div>我们一个家名字叫中国</div>
</body>
</html>

动画3步长

练习：极光下奔跑的熊

<!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>
        *{
            margin: 0;
            padding: 0
        }
        body {
            width: 100%;
            height: 550px;
            background: url(../images/media/bg2.png) repeat-x 0 100px;
            background-color: #e6eef0;
            vertical-align: middle;
            animation: mountain 8s linear forwards infinite;
        }
        .mountain{
            position: relative;
            top:200px;
            left: 0;
            width: 100%;
            height: 330px;
            background: url(../images/media/bg1.png) repeat-x 0 100px;
            /* background-color: #ccc; */
            vertical-align: middle;
            animation: mountain 8s linear forwards infinite;
        }

        div {
            position: absolute;
            width: 200px;
            height: 100px;
            top: 220px;
            background: url(../images/media/bear.png);
            animation: bear 1s infinite steps(8), run 3s forwards;
        }

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

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

        @keyframes run {
            0% {
                left: 0;
            }

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

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

            100% {
                background-position: -3840px 0;
            }
        }
    </style>
</head>

<body>
    <div class="mountain">
        <div></div>
    </div>

</body>

</html>

奔跑的熊