CSS3提高： CSS3 动画

最新推荐文章于 2023-01-11 22:55:16 发布

真爱计划

最新推荐文章于 2023-01-11 22:55:16 发布

阅读量465

点赞数

分类专栏： Web前端入门HTML5+CSS3+前端项目文章标签： css3 动画 css

本文链接：https://blog.csdn.net/weixin_64612659/article/details/127638534

版权

Web前端入门HTML5+CSS3+前端项目专栏收录该内容

29 篇文章 2 订阅

订阅专栏

动画

动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

动画的基本使用

制作动画分为两步：

1.先定义动画

2.再使用（调用）动画

1. 用keyframes 定义动画（类似定义类选择器）

@keyframes 动画名称 {
   0%{
        width:100px;
   }  
   100%{
        width:200px;
   }
}

动画序列

0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。

在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* from to 等价于  0% 和  100% */
        /* @keyframes move {
            from {
                transform: translate(0, 0);
            }
            to {
                transform: translate(1000px, 0);
            }
        } */
        /* 动画序列 */
        /* 1. 可以做多个状态的变化 keyframe 关键帧 */
        /* 2. 里面的百分比要是整数 */
        /* 3. 里面的百分比就是 总的时间（我们这个案例10s）的划分 25% * 10  =  2.5s */
        
        @keyframes move {
            0%{
                transform: translate(0,0)
            }
            25%{
                transform: translate(1000px,0)
            }   
            50%{
                transform: translate(1000px,500px)
            }
            75%{
                transform: translate(0,500px)
            }
            /* 不加100% 那个会不是自己回去的 而是重新开始了 */
            100%{
                transform: translate(0,0)
            }
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation-name: move;
            animation-duration: 10s;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

2. 元素使用动画

div {
       width: 200px;
       height: 200px;
       background-color: aqua;
       margin: 100px auto;
       /* 调用动画 */
       animation-name: 动画名称;
       /* 持续时间 */
       animation-duration: 持续时间;
    }

动画跟我们2d转换很相似，但功能更加强大，例如打开页面就实现自动移动，2d转换就实现不了

动画常用属性

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了animation-play-state属性。
animation-name	规定@keyframes动画的名称。（必须的）
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的）
animation-timing-function	规定动画的速度曲线，默认是“ease”。
animation-delay	规定动画何时开始，默认是0。
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是“normal“,alternate逆播放
animation-play-state	规定动画是否正在运行或暂停。默认是"running",还有"paused"。
animation-fill-mode	规定动画结束后状态，保持forwards回到起始backwards

动画简写属性

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

animation: myfirst 5s linear 2s infinite alternate;

/* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: move 2s linear 0s 1 alternate forwards;

这代码效果跟上面的是一样的，但是要注意的顺序还有影响的例如持续时间和何时开始都是时间，那么写在前面的肯定为持续时间，前面俩个属性一定要写 name duration

简写属性里面不包含 animation-play-state

暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用

想要动画走回来，而不是直接跳回来：animation-direction ： alternate

盒子动画结束后，停在结束位置： animation-fill-mode ： forwards

案例：热点图案例

就是放4个div

这个的原因是3个pulse叠在一起了，所有要用绝对定位，不占位置

布局效果

<!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>
        body{
            background: #333;
        }
        .map{
            width: 747px;
            height: 617px;
            background: url(media/map.png) no-repeat;
            margin: 0 auto;
            position: relative;
            
        }
        .city{
            top: 227px;
            right: 193px;
            position: absolute;
            color: #fff;
            
        }
        .dotted{
            border-radius: 50%;
            width: 8px;
            height: 8px;
            background-color: #09f;
        }
        .city div[class^="pulse"]{
            /* 保证小波纹在父元素里面水平垂直居中 放大之后向四周发散 */
            position: absolute;
            width: 8px;
            height: 8px;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            box-shadow:  0 0 12px #009dfd;
            border-radius: 50%;

        }
    </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>
</body>
</html>

pulse2被划掉了，这是因为权重不一样

完整代码

<!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>
        body{
            background: #333;
        }
        .map{
            width: 747px;
            height: 617px;
            background: url(media/map.png) no-repeat;
            margin: 0 auto;
            position: relative;
            
        }
        .city{
            top: 227px;
            right: 193px;
            position: absolute;
            color: #fff;
            
        }
        .tb{
            top: 500px;
            right: 80px;
        }
        .gz{
            top: 532px;
            right: 173px;
        }
        .dotted{
            border-radius: 50%;
            width: 8px;
            height: 8px;
            background-color: #09f;
        }
        .city div[class^="pulse"]{
            /* 保证小波纹在父元素里面水平垂直居中 放大之后向四周发散 */
            position: absolute;
            width: 8px;
            height: 8px;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            box-shadow:  0 0 12px #009dfd;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }
        .pulse2{
            animation-delay: 0.4s !important;
        }
        .pulse3{
            animation-delay: 0.8s !important;
           
        }
        @keyframes pulse{
            0%{

            }
            70%{
                /* transform: scale(); 我们不要用这个 这会导致阴影也会变大 */
                width: 40px;
                height: 40px;
                opacity: 1;
            }
            100%{
                width: 70px;
                height: 70px;
                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>

速度曲线细节

animation-timing-function：规定动画的速度曲线，默认是“ease”

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

steps()就是你要用几步来完成你的动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            overflow: hidden;
            font-size: 20px;
            width: 0;
            height: 30px;
            background-color: pink;
            /* 让我们的文字强制一行内显示 */
            white-space: nowrap;
            /* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
            animation: w 4s steps(10) forwards;
        }
        
        @keyframes w {
            0% {
                width: 0;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>

<body>
    <div>世纪佳缘我在这里等你</div>
</body>

</html>

案例：奔跑的熊大

感觉是关键帧动画

图片的大小为1600px---100px 所以我们设置了一个div200px-100px刚好挡住了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #ccc;
        }
        
        div{
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* 我们元素可以添加多个动画，用逗号分各 */
            animation: bear 1s steps(8) infinite,move 3s forwards;
        }
        @keyframes bear{
            0%{
                background-position: 0 0;
            }
            100%{
                background-position: -1600px 0;
            }
        }
        @keyframes move{
            0%{
                left: 0;
            }
            100%{
                /* margin-left: -100px; */
                transform: translate(-50%);
                left: 50%;
            }
        }
    </style>
</head>

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

</html>