animation动画案例

时间：2022-05-24 18:27:26

最近一直苦恼做一个banner的进度条，原先用js改变width值，但明显卡顿。后来用了animation，超级好用。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<style>

    .rotation {

        animation: rotation 8s linear;

        width: 50px;

        background:red;

        height:2px;

    }

    @keyframes rotation {

        % {

            transform: translateX() ;

        }

        % {

            transform: translateX(50px) ;

        }

    }

</style>

<body>

<div class="rotation">

</div>

</body>

</html>

相关文章