当前位置：首页 > news >正文

CSS Day11- 动画

news 来源：原创 2025/5/10 2:26:04

11.1 动画语法

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 动画名 */
            animation-name: yidong;
            /* 设置动画时间 */
            animation-duration: 3s;
            /* 设置延迟时间 */
            animation-delay: 0.2s;
        }

        @keyframes yidong {

            /* 第一种写法：from to */
            /* from {
                background-color: red;
            }

            to {
                transform: translate(500px);
                background-color: skyblue;
            } */
            
            /* 第二种写法：使用百分比进行设置 */
            0%{
                background-color: green;
            }
            40%{
                background-color: red;
                transform: translateY(700px);
            }
            80%{
                background-color: yellow;
                transform: translate(200px,400px);
            }
            100%{
                background-color: pink;
                transform: translate(400px,500px);
            }
        }

    </style>
</head>

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

</html>

设置动画的类型 animation-timing-function: linear; ease 默认值平滑动画 linear 线性过渡 ease-in 从慢到快 ease-out 从快到慢 ease-in-out 慢快慢 steps 分步执行

设置动画的执行次数 animation-iteration-count: 1; 参数值可以是数字 infinite 无限次循环（常用）

动画执行的方式 animation-direction: alternate-reverse; normal 默认值从from到to运行，每次都是这样 reverse 从to到from运行，每次都是这样 alternate 从from到to运行，重复执行时动画会反向执行 alternate-reverse 从to到from运行,重复执行时动画反向执行

动画填充模式 animation-fill-mode: backwards; none 默认值动画执行完毕0，回到原来的位置 forwards 动画执行完毕时，会停留在动画结束的位置 backwards 动画执行完毕时，回到开始的位置

11.2 过渡

过渡和动画类似，动画是页面一加载就直接执行的属性，过渡是必须有触发条件才会执行

.box {
            width: 100px;
            height: 100px;
            background-color: pink;
            /*opacity: 0;*/   /* 不透明度 */
            /* 动画和过渡相似，动画是页面一加载就直接执行的属性，过渡是必须有触发条件才会执行 */

            /* 第一步 设置哪个属性需要过渡效果 
             transition-property 设置需要过渡的属性，属性之间用逗号（,）隔开
                 all代表所有需要过渡的属性
            */
            /* transition-property: height, width, background-color, opacity; */
            transition-property: all;
            /* 设置过渡时间 */
            transition-duration: 1s;
        }

        .box:hover {
            height: 200px;
            width: 200px;
            background-color: orange;
            opacity: 1;
        }