动画-Animation/@keyframes

最新推荐文章于 2024-08-26 16:53:52 发布

中枢叹号

最新推荐文章于 2024-08-26 16:53:52 发布

阅读量718

点赞数 1

文章标签：动画 css3 前端

本文链接：https://blog.csdn.net/NewHouser/article/details/127527048

版权

动画的使用流程有两步，分为定义动画和使用动画，定义动画相当于制作动画，有两种制作方法，一个是 from{}···to{}；另一个是百分比。制作完动画之后，再在需要的地方通过 animation 来使用制作好的动画效果。

1、定义动画——from{}···to{}

@keyframes 自定义动画名称{
from {
    //改变前的样式
}
to {
    //改变后的样式
}

2、定义动画——百分比

百分比指的是动画全过程的时间占比，动画过程从头到尾是100%。

@keyframes 自定义动画名称{
    0% {
        //初始样式
    }
    50% {
        //动画一半进度时的样式
    }
    100% {
        //动画结束时的样式
    }
}

3、使用动画

animation动画的属性（可属性连写，复合写法），不分先后顺序，当写了两个时间值的时候，前面的是动画时间，后面的是延迟时间

自定义的动画名称——animation-name （连写必填）
动画时间——animation-duration（取值数字，单位：s）（连写必填）
速度曲线——animation-timing-function：

取值 linear，可以理解为匀速线性；
取值为step（数字），即将完整的动画时长等分为几块（帧），比如一个6秒的动画，设置step（3），便将原动画分为2秒的三个动画，并按顺序播放，简单理解为，设置几，动画就卡几下，一般适用于精灵图动画
取值为ease，意为平滑播放
取值为ease-in，先慢再快
取值为ease-out，先快再慢
ease-in-out，慢-快-慢

重复次数——animation-iteration-count（取值为数字，无单位；取值为 infinite，表示无线循环）
延迟时间——animation-delay，（取值为数字，单位：s），表示动画延迟指定时间后再执行
动画方向——animation-direction：

取值normal，默认，正向
取值reverse，反向运行
取值alternate，正反交替，可以理解为视频放完后，再倒放回去，重复
取值alternate-reverse，反正交替

动画结束后的状态——animation-fill-mode：

取值forwards，动画结束的状态
取值backwards，默认值，开始时的状态

暂停动画——animation-play-state：取值为paused

复合写法以及分开写法示例：

/*复合写法，例举*/
animation: name 1s infinite alternate; 

/*拆分写法，例举部分*/
animation-name: change;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease;
animation-play-state: paused;

示例：

动画实现示例动画：

完整代码：

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        li {
            list-style: none;
        }
        
        img {
            width: 200px;
        }
        
        .box {
            width: 600px;
            height: 112px;
            border: 5px solid rgb(0, 82, 169);
            margin: 100px auto;
            overflow: hidden;
        }
        
        .box ul {
            width: 2000px;
            animation: move 7s infinite linear;
        }
        
        .box li {
            float: left;
        }
        
        @keyframes move {
            to {
                transform: translateX(-1400px);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li><img src="./images/1.jpg" alt="" /></li>
            <li><img src="./images/2.jpg" alt="" /></li>
            <li><img src="./images/3.jpg" alt="" /></li>
            <li><img src="./images/4.jpg" alt="" /></li>
            <li><img src="./images/5.jpg" alt="" /></li>
            <li><img src="./images/6.jpg" alt="" /></li>
            <li><img src="./images/7.jpg" alt="" /></li>
            <!-- 当显示567移动的时候,后面的区域会显示空白样式，所有需要在第7张后面再插入需要补上的图片，实现连续滚动的效果 -->
            <li><img src="./images/1.jpg" alt="" /></li>
            <li><img src="./images/2.jpg" alt="" /></li>
            <li><img src="./images/3.jpg" alt="" /></li>
        </ul>
    </div>
</body>

</html>