css3 - 图标元素动画效果5 - 弹性动画效果

最新推荐文章于 2025-05-07 15:21:28 发布

erdouzhang

最新推荐文章于 2025-05-07 15:21:28 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： css3

本文链接：https://blog.youkuaiyun.com/erdouzhang/article/details/71405074

css3 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了如何使用CSS3创建一种图标元素动画效果，即图标在达到终点后不会立即停止，而是会继续超过终点并反向回到终点，形成弹性往复的动画。通过速度曲线（贝塞尔曲线）可以更简便地实现这种效果。

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

在线演示（刷新一下动画效果明显）

让图标运动到终点时，并非减速停止在终点，而是到达终点后继续向上运动，超过一定距离后再反方向运动到终点，形成一种往复的效果。
我们可以使用帧动画来实现这样的效果，但是如果使用速度曲线（贝塞尔曲线）将更为简便。

这里写图片描述

html：

<div class="box icon1">
 <i class="fa fa-home fa-4x"></i>
</div>
<div class="box  icon2">
  <i class="fa fa-search fa-4x"></i>
</div>
<div class="box icon3">
  <i class="fa fa-qq fa-4x"></i>
</div>
<div class="box icon4">
  <i class="fa fa-envelope-o fa-4x"></i>
</div>

css：

body {background-color: pink;}
.box {
  cursor: pointer;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #96CEB4;
  position: relative;
  margin-right: 20px;

  -webkit-animation-fill-mode: both; /*解决动画闪现问题，具体参考见上一篇*/
  animation-fill-mode: both;

  -webkit-animation: move 1s cubic-bezier(.62,-0.91,.45,1.97);/*弹性动画*/
  animation: move 1s cubic-bezier(.62,-0.91,.45,1.97);
}

i {
  color: #FFEEAD;
  font-size: 48px;
  position: absolute;
  top: 16%;
  left: 20%;
}

/*定义动画*/
@-webkit-keyframes move { /*兼容性写法。move是关键帧的动画名称*/
  from { /*动画起始状态*/
    opacity: 0;
    -webkit-transform: translateY(100%);
  }
  to { /*动画结束状态*/
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}
@keyframes move {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}

/*动画延迟*/
.icon1 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.icon2 {
  -webkit-animation-delay: .1s;
  animation-delay: .1s;
}
.icon3 {
  -webkit-animation-delay: .2s;
  animation-delay: .2s;
}
.icon4 {
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}