定义@keyframes bounce设置transform位移，将animation绑定到文字元素并设为无限循环，通过调整关键帧时间、位移值和缓动函数控制跳动节奏与幅度，实现自然的文字跳动效果。
要使用 CSS 的 animation 制作文字跳动效果，核心是结合 @keyframes 定义动画帧，并通过 transform 属性控制文字的上下位移，模拟“跳动”感。
html5全屏可拖拽的横向图片布局
下载
html5基于TweenMax来制作拖拽图片预览动画特效。拖拽效果使用的是Draggabilly插件。这是一款html5和CSS3可拖拽的横向图片预览布局。该布局将所有图片在屏幕中央进行横向排布，可以通过鼠标前后拖拽图片。当点击图片的标号数字时，隐藏所有的缩略图，在屏幕上显示当前被点击的图片放大，文本内容展示效果。
1. 定义跳动动画的关键帧
使用 @keyframes 创建一个名字如 bounce 的动画，在不同阶段调整元素的垂直位置：
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
2. 应用动画到文字元素
将定义好的动画绑定到目标文字上，设置持续时间、重复方式等：
.bounce-text {
display: inline-block;
font-size: 24px;
color: #333;
animation: bounce 0.6s ease infinite;
}
3. 调整节奏与幅度提升真实感
跳动感是否自然取决于关键帧的时间点和位移值：- 缩短动画周期（如 0.5s）可实现快速轻快的跳动
- 增加 translateY 值（如 -15px）会让跳跃更高
- 配合 ease-out 或 cubic-bezier(.2, .8, .6, 1) 可增强弹跳缓动效果
4. HTML 示例结构
只需简单标签即可：跳动的文字
基本上就这些。通过控制 keyframes 和 animation 参数，你可以轻松实现各种风格的文字跳动效果，比如心跳式、弹球式或呼吸式跳动。
