CSS 动画演示

各种 CSS 动画效果的实时预览和代码展示

动画列表

弹跳动画

元素上下弹跳效果

CSS 代码

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}

.bounce {
  animation: bounce 1s ease-in-out infinite;
}

使用说明

1.

将 CSS 代码复制到你的样式文件中

2.

在 HTML 元素上添加对应的 class 名称

3.

可以通过修改 animation 属性来调整动画时长、延迟等参数

4.

使用 animation-iteration-count 控制播放次数

常用动画属性

animation-duration: 动画持续时间

animation-timing-function: 动画速度曲线

animation-delay: 动画延迟时间

animation-iteration-count: 播放次数 (infinite 为无限)

animation-direction: 动画方向 (normal, reverse, alternate)

animation-fill-mode: 动画结束后的状态