css实现bounce动画

最新推荐文章于 2025-02-21 14:39:32 发布

疯狂橙子

最新推荐文章于 2025-02-21 14:39:32 发布

阅读量1.6k

点赞数 3

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_44207333/article/details/108215271

版权

本文介绍了一种使用CSS实现的弹跳动画效果，通过关键帧动画定义了元素的上下弹动过程，包括动画的缓动函数和变形原点设置。

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

html:

<img className="bounce" src="https://avatar.csdnimg.cn/7/1/5/3_weixin_44207333.jpg" alt=""/>

css:

.bounce {
  animation: bounce 2.5s infinite 0.5s both;
  transform-origin: center bottom;
}

@keyframes bounce {
  0%,
  7%,
  25%,
  36%,
  45%,
  50% {
    animation-timing-function: ease-out;
    transform: translate3d(0, 0, 0);
  }

  15%,
  16% {
    animation-timing-function: ease-in;
    transform: translate3d(0, -42px, 0);
  }

  30% {
    animation-timing-function: ease-in;
    transform: translate3d(0, -24px, 0);
  }

  41% {
    animation-timing-function: ease-in;
    transform: translate3d(0, -12px, 0);
  }

  47% {
    animation-timing-function: ease-in;
    transform: translate3d(0, -3px, 0);
  }
}