css3 里面的动画——帧动画

最新推荐文章于 2023-04-14 21:16:04 发布

原创最新推荐文章于 2023-04-14 21:16:04 发布 · 494 阅读

2 ·

CC 4.0 BY-SA版权

本文详细介绍了CSS3帧动画的属性，并通过两个案例展示了帧动画的应用：一是实现方块移动的效果，二是构建西游记主题的背景移动及角色动态行走的场景，包括悟空、八戒、沙僧和师傅的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.属性解释

动画名称：
animation-name: 起个名字;
动画执行时间：
animation-duration: 写个时间;
动画执行方式：
animation-timing-function

linear	匀速
ease	开始时慢，然后加快，在结束前再次变慢
ease-in	以低速开始
ease-out	以低速结束
ease-in-out	以低速开始和结束

动画的延迟：
animation-delay: 写个延迟时间;
动画播放次数：   infinite循环播放
animation-iteration-count: 定个循环次数;
播放方式：
animation-direction

normal	默认值。动画正常播放
reverse	反向播放
alternate	奇数次正向播放，偶数次反向播放
alternate-reverse	奇数次反向播放，偶数次正向播放

动画是否播放： paused（暂停）
animation-play-state: running（运行）;
动画停止到完成位置：
animation-fill-mode

none	不再应用任何元素
forwards	动画结束后，应用播放次数属性（播放几次）
backwarks	动画开始时，应用from中的属性值或to中属性值
both	遵循forwards和backwarks规则

2.案例一（方块移动）

（1）创建一个形状（这里创建一个盒子）

<body>
<div class="b">
</div>
</body>
<style>
        .b {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
</style>

（2）加上动画样式

<style>
        .b {
            animation:animate 1s 2s linear infinite alternate;
        }
        @keyframes animate {
            from{
                transform: translatex(0);
            }
            to{
                transform: translatex(200px);
            }
        }
</style>

效果展示：

3.案例二（西游记）

（1）加上背景布

<body>
<ul class="map">
    <li></li>
    <li></li>
</ul>
</body>
<style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .map {
            width: 200%;
            height: 100%;
            margin-left: -50%;
        }

        .map > li {
            list-style: none;
            float: left;
            width: 50%;
            height: 100%;
            background: url("./img/2.jpg") no-repeat center;
            background-size: 100% 100%;
        }
</style>

（2）背景加上动画效果

<style>
.map {
            animation: ul_animate 20s linear infinite;
        }

        @keyframes ul_animate {
            from {
               margin-left: -50%;
           }
           to {
               margin-left: 0;
           }
       }
</style>

效果展示：（背景是水平移动效果）

（3）加上悟空

<style>
.wukong {
        position: absolute;
        left: 300px;
        top: 50%;
        z-index: 999;
        width: 200px;
        height: 180px;
        background: url("./img/west_01_3ca39fe.png") no-repeat left top;
        }
</style>

效果展示：

（4）加上悟空动画效果（8帧:造成动态走路效果）

<style>
.wukong {
        animation: wukong 1s steps(8) infinite;
        }

        @keyframes wukong {
           from {
               background-position: 0 0;
           }
           to {
               background-position: -1600px 0;
           }
        }
</style>

（5）同理加上八戒、沙僧、师傅

<style>
.bajie{
            position: absolute;
            left: 500px;
            top: 50%;
            z-index: 999;
            width: 200px;
            height: 180px;
            background: url("./img/west_02_47bad19.png") no-repeat left top;
            animation: baba 1s steps(8) infinite;
        }
.shifu{
            position: absolute;
            left: 700px;
            top: 50%;
            z-index: 999;
            width: 170px;
            height: 240px;
            background: url("./img/west_03_f962447.png") no-repeat left top;
            animation:babb  1s steps(8) infinite;
        }
.shaseng{
            position: absolute;
            left: 900px;
            top: 50%;
            z-index: 999;
            width: 210px;
            height: 200px;
            background: url("./img/west_04_6516d80.png") no-repeat left top;
            animation:babc  1s steps(8) infinite;
        }


 @keyframes baba {
           from {
               background-position: 0 0;
           }
           to {
               background-position: -1600px 0;
           }
        }
 @keyframes babb {
            from {
                background-position: 0 0;
            }
            to {
                background-position: -1360px 0;
            }
        }
 @keyframes babc {
            from {
                background-position: 0 0;
            }
            to {
                background-position: -1680px 0;
            }
        }
</style>

效果展示：