5. CSS3 动画-CSDN博客

本文链接：https://blog.csdn.net/m0_66349719/article/details/128472473

动画

一. 动画的概念:

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

二. 动画的使用:

1. 定义动画:

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

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

2. 使用动画:

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

3. 动画序列做多个状态的变化(案例):

   <style>
     @keyframes move {
        /* 百分之0可以省略 */
        /* 0% {

            transform: translate(0,0);
        } */

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

        50% {
          transform: translate(1000px,500px);
        }
        75% {
          transform: translate(0px,500px);
        }
        100% {
          transform: translate(0,0);
        }
        
     }
     div {
        width: 200px;
        height: 200px;
        background-color: red;
        animation-name: move;
        animation-duration: 10s;

     }
    </style>

4. 常见的动画属性:

在这里插入图片描述

三. 动画的复合写法:

animation：动画名称(name) 持续时间(duration) 运动曲线(timing-function) 何时开始(delay) 播放次数(itaration-count) 是否反方向(directon) 动画起始或者结束的状态(fill-mode); 前两个属性不可省略
animation: myfirst 5s linear 2s infinite alternate;

四. 速度曲线:

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

在这里插入图片描述

案例奔跑的大熊:

原理: 通过背景图片的移动来实现,大熊奔跑的效果:

在这里插入图片描述

    <style>
        body {
            background-color: #ccc;
        }
        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(./images/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% {}
            100% {
                left: 50%;
               transform: translateX(-50%);
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

            transform: translateX(-50%);
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>