css动画

最新推荐文章于 2024-05-22 12:04:08 发布

华、、

最新推荐文章于 2024-05-22 12:04:08 发布

阅读量328

点赞数 12

分类专栏： css 前端动画文章标签： css 前端

本文链接：https://blog.csdn.net/2201_75918981/article/details/137248900

版权

前端同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

动画

1 篇文章 0 订阅

订阅专栏

css中也能做出动态效果，这里需要借助css中的动画。

制作动画分为两步：
①先定义动画：

//用keyframes定义动画（类似定义类选择器）
    @keyframes 动画名称{
        0%{
            width:100px;
        }
        100%{
            width:200px;
        }
    }

②再使用动画：

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

例如以下代码：

<!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>
        @keyframes move {
            0% {
                transform: translate(0px);    //起始位置为（0，0）
            }

            5% {    //执行时间为前5%
                transform: translate(100px);    //移动到位置为（100px，0）
            }

            50% {    //执行时间为5%到50%
                transform: translate(100px, 100px);    //移动到位置为（100px，100px）
            }

            75% {    //执行时间为50%到75%
                transform: translate(0px, 100px);    //移动到位置为（0，100px）
            }    

            100% {    //执行时间为75%到100%    //移动到位置为（0，0）
                transform: translate(0px);
            }
        }

        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation-name: move;    //使用上面定义好的“move”动画
            animation-duration: 2s;    //执行一次的时间为2秒
            animation-iteration-count: infinite;    //无限循环
        }
    </style>
</head>

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

</html>

运行结果：我们可以看到一个粉红色的div盒子沿着向右100px，再向下100px，再向左100px，再向上100px的路线无休止运动。