css3动画常用属性

最新推荐文章于 2025-04-02 07:51:43 发布

黄丫丫07

最新推荐文章于 2025-04-02 07:51:43 发布

阅读量84

点赞数

文章标签： css3 css 动画

本文链接：https://blog.youkuaiyun.com/m0_51495354/article/details/128090764

版权

<!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>Document</title>

    <style>

        @keyframes move {

            0% {

                transform: translate(0, 0);

            }



            100% {

                transform: translate(1000px, 0);

            }

        }



        div {

            width: 100px;

            height: 100px;

            background-color: pink;

            /* 动画名称 */

            animation-name: move;

            /* 持续时间 */

            animation-duration: 2s;

            /* 运动曲线 */

            animation-timing-function: ease-in;

            /* 何时开始 */

            animation-delay: 2s;

            /* 重复次数 */

            /* animation-iteration-count: infinite; */

            /* 是否反方向播放 */

            animation-direction: alternate;

            /* 设置结束状态 */

            /* 动画结束后的状态，默认是backwards回到起始状态 我们可以让他停留在结束状态forwards */

            animation-fill-mode: forwards;

        }



        div:hover {

            /* 鼠标经过div 让这个div停止动画 鼠标离开继续动画 */

            animation-play-state: paused;

        }

    </style>

</head>



<body>

    <div></div>

</body>



</html>