CSS3动画

最新推荐文章于 2024-04-16 00:12:34 发布

ATTACH_Fine

最新推荐文章于 2024-04-16 00:12:34 发布

阅读量178

点赞数

本文链接：https://blog.csdn.net/qq_48094059/article/details/117355204

版权

动画的基本使用

制作动画分为两步：

先定义动画
在使用（调用）动画

用 keyframes 定义动画
调用

<title>动画</title>
    <style>
        /* 需求： 页面一打开，一个盒子就从左边走到右边 */
        /* 1.定义动画 */
        @keyframes move {

            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }

            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }

        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            /* 2.调用动画 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 0.6s;
        }
    </style>
</head>

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

ATTACH_Fine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS3动画

动画的基本使用制作动画分为两步：先定义动画在使用（调用）动画用 keyframes 定义动画调用<title>动画</title> <style> /* 需求：页面一打开，一个盒子就从左边走到右边 */ /* 1.定义动画 */ @keyframes move { /* 开始状态 */ 0% { transform:
复制链接

扫一扫