css动画及css过渡

最新推荐文章于 2024-04-25 16:16:15 发布

m0_60526657

最新推荐文章于 2024-04-25 16:16:15 发布

阅读量3.6k

点赞数 7

本文链接：https://blog.csdn.net/m0_60526657/article/details/119809363

版权

一、css动画

1.定义动画：使用@keyframes定义动画，关键帧可以使用关键字from~to，也可以使用 0%~100%

2.配置动画：

1） animation-name 动画名字

取值：@keyframes定义的动画的名字

2）animation-duration 动画持续的时间

取值：单位可以使s，也可以是ms，默认是0

3） animation-iteration-count 动画迭代次数

取值：数字，默认值为1，不能为负数，可以为小数比如0.5表示播放一半

infinite 无限循环

4） animation-delay 动画延迟执行时间

取值：动画延迟，即元素在加载成功后到动画运行前的时间。单位为s 、ms ,默认值为0s，即动画加载成功后立刻运行。
例如：animation-delay: 3s;

             5） animation-direction       动画方向
                      取值：normal            默认值，动画按照正常顺序播放
                                 reverse           播放帧的顺序反转，播放的起点为帧的结束
                                 alternate         播放帧的顺序交替反转，即第一次播放从帧的开始播放到帧的结束，第二次播放就从帧的结束播放到帧的开始，与此同时，速度曲线也交替反转。反转时ease-in交替为ease-out
                                alternate-reverse   与alternate类似，不过第一次播放时候需要反转。

              6） animation-fill-mode   填充模式（指定了CSS动画在执行前和执行后如何将样式应用到它的目标上。）
                            取值：none                 不改变默认行为，默认值
                   forwards            在动画结束后，目标将保留在执行期间所遇到的最后一个关键帧所设置的计算值。
                       backwards         在延迟时间内，目标将保留在执行期间所遇到的第一个关键帧所设置的计算值。
                       both                 向前和向后填充模式都被应用。

               7）animation-timing-function   动画的速度曲线
               取值：ease                  默认值，先快后慢
                                        linear                 线性增长，匀速
                        ease-in              先慢后快
                                        ease-out             先快后慢
                                        ease-in-out         先慢后快再慢

例：

<!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>动画练习</title>
    <style>
        /*@keyframes a_color{/*定义动画
            from{
                background-color:aquamarine;
            }
            to{
                background-color: blueviolet;
            }
        }*/
        .box{/*配置动画*/
           /* width: 200px;*/
            height: 300px;
            animation-name: width;/*动画的名字*/
            animation-duration: 10s;/*动画持续3s*/
            animation-delay: 2s;/*动画延迟执行2s*/
            /*animation-iteration-count: infinite;/*动画迭代次数，无限循环，也可以取数值*/
            animation-direction: reverse;/*动画方向，播放帧的顺序翻转，先紫后绿*/
            animation-fill-mode: forwards;/*动画的填充模式，动画结束后，目标将保留最后一个关键帧*/
            animation-timing-function: linear;/*动画的速度曲线，线性增长*/
        }
        @keyframes width{
            25%{
                width: 300px;
                background-color: bisque;
            }
            75%{
                width: 500px;
                background-color: blueviolet;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

二、第三方动画库 https://animate.style/#best-practices

1.先把源码下载到本地

2.在head中用link标签引入

<div class="animate__animated animate__bounce">hello 动画库！</div>

animate__bounce为动画的样式，可更换。

三、css过渡 transition

        transition 是
          transition-property             过渡属性
          transition-duration             持续时间
          transition- timing-function     时间曲线
          transition-delay                过渡延迟
          的速写形式

过渡和动画的区别
1）过度需要触发
2）不是所有的属性都能过渡

可以过渡的css属性：
background border Box-shadow flex margin padding color font text opacity visibility z-index width height max-height Max-width Min-height Min-width left right top bottom outline

例：

<!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>过渡</title>
    <style>
        .box{
            color: #333;
            font-size: 30px;
            background-color: #333;
        }
        .box:hover{
            transition-property: background-color;/*过渡属性 背景颜色*/
            transition-duration: 2s;/*持续时间*/
            transition-timing-function: linear;/*匀速*/
            background-color: blueviolet;
        }
        .btn{
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            border-radius: 5px;
            background-color: #7e8d9c;
            margin-top: 2em;
        }
        .btn:hover{
            transition-property: opacity ;/*过渡属性，透明度*/
            transition-duration: 0.5s;/*持续时间*/
            opacity: 0.8;/*透明度*/
        }
    </style>
</head>
<body>
    <div class="box">hello 过渡</div>
    <div class="btn">主要按钮</div>
</body>
</html>