HTML学习笔记——过度属性和动画

最新推荐文章于 2025-05-22 14:37:19 发布

原创最新推荐文章于 2025-05-22 14:37:19 发布 · 855 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #animation

前端专栏收录该内容

17 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>过度属性transition动画animation</title>
    <style>
        div{
            border:1px solid red;
            background-color:red;
            width:100px;
            height:100px;
            transition:background-color 1s linear 2s;
            /* 过度属性,过度所需时间,过度动画函数,过度延迟时间 */
        }
        div:hover{
            /* 过度触发机制:hover,active,focus,checked */
            background-color:blue;
        }
        p{
            background-color:red;
            width:100px;
            height:100px;
            animation:name1 2s linear infinite;
            /* 调用关键帧:名字,过度时间,动画函数(匀速),无限次循环 */
        }
        @keyframes name1{/* 设置关键帧 */
            0%{
                width:0px;
                transform:translate(100px, 0);/* 侧移 */
            }
            25%{
                width:20px;
                transform:translate(200px, 0);
            }
            50%{
                width:50px;
                transform:translate(300px, 0);
            }
            75%{
                width:20px;
                transform:translate(200px, 0);
            }
            100%{
                width:0px;
                transform:translate(100px, 0);
            }

        }
    </style>
</head>
<body>
    <div>

    </div>
    <p></p>
</body>
</html>