HTML5 弹跳动画（Bounce Animation）详解

最新推荐文章于 2025-04-12 15:36:31 发布

请叫我飞哥@

最新推荐文章于 2025-04-12 15:36:31 发布

阅读量1.2k

点赞数 23

分类专栏： HTML5 文章标签： html5 前端 html

本文链接：https://blog.youkuaiyun.com/qq_24459277/article/details/144956124

版权

HTML5 专栏收录该内容

45 篇文章

订阅专栏

HTML5 弹跳动画（Bounce Animation）详解

弹跳动画是一种动态效果，使元素在出现或消失时看起来像是在跳动。这种效果可以通过 CSS 动画或 JavaScript 来实现，增强用户体验。

1. 使用 CSS 实现弹跳动画

可以使用 CSS 的 @keyframes 来定义弹跳效果，并通过 animation 属性将其应用到元素上。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹跳动画示例</title>
    <style>
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-30px); /* 向上弹跳 */
            }
            60% {
                transform: translateY(-15px); /* 向上弹跳 */
            }
        }

        .bounce {
            display: inline-block;
            animation: bounce 1s infinite; /* 无限循环弹跳 */
        }
    </style>
</head>
<body>

    <h1 class="bounce">我在弹跳！</h1>

</body>
</html>

2. 使用 JavaScript 实现弹跳动画

如果您需要更复杂的控制（如在特定事件下触发弹跳），可以使用 JavaScript。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹跳动画示例</title>
    <style>
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-30px); /* 向上弹跳 */
            }
            60% {
                transform: translateY(-15px); /* 向上弹跳 */
            }
        }

        .bounce {
            display: inline-block;
        }
    </style>
</head>
<body>

    <div class="bounce" id="bounceElement">点击我弹跳</div>

    <script>
        const bounceElement = document.getElementById('bounceElement');

        bounceElement.addEventListener('click', () => {
            bounceElement.style.animation = 'bounce 1s'; // 添加弹跳动画
            bounceElement.addEventListener('animationend', () => {
                bounceElement.style.animation = ''; // 动画结束后清除动画
            });
        });
    </script>

</body>
</html>