css的animation动画

qq_37694877

已于 2022-04-26 14:24:19 修改

阅读量191

点赞数

CC 4.0 BY-SA版权

分类专栏： html css 文章标签： html5 css

于 2022-04-26 14:11:31 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37694877/article/details/124426577

html 同时被 2 个专栏收录

20 篇文章

订阅专栏

css

9 篇文章

订阅专栏

本文介绍了如何在HTML中使用CSS定义名为'move'的动画，通过关键帧控制元素从起点到终点的平移，并配合:hover伪类实现鼠标悬停暂停动画。适合初学者了解CSS动画基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在style中先定义动画，后调用动画。
0%表示开始，100%表示结束。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        @keyframes move {
            0% {
                transform:translate(0,0);
            }
            25% {
                transform: translate(100px,0);
            }
            50% {
                transform: translate(100px,100px);
            }
            75% {
                transform: translate(0,100px);
            }
            100% {
                transform: translate(0,0);
            }
        }
        div {
            width:30px;
            height:30px;
            background-color:aquamarine;
            animation-name:move;
            animation-duration:10s;
            animation-direction:alternate;
            animation-iteration-count:infinite;
        }
        div:hover{
            animation-play-state:paused;
        }
    </style>
</head>

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