CSS3 Cubic-Bezier（贝塞尔）曲线动态过渡效果

概览

在两个或多个元素之间变化时，可以使用 transition 属性来为元素添加变化的过渡动画，以使运动过程变得润滑流畅，而不是僵化的机械运动，而 Cubic-Bezier（贝塞尔）曲线是目前主流的通用方法。

CSS

body { /*body 背景颜色*/
  background: #66666661;
}
div.container { /*建立 div 容器*/
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
a { /*实体：社交媒体图标和层盒子。*/
  color: #fff;
  background: #2196f3;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  position: relative;
  display: inline-block;
  width: 120px;
  height: 100px;
  padding-top: 12px;
  margin: 0 2px;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-font-smoothing: antialiased;
}
a:hover { /*链接的悬停背景颜色*/
  background: #03a9f4;
}
svg { /*媒体图标的大小和位置*/
  font-size: 45px;
  vertical-align: middle;
  display: inline-block;
  position: relative;
  top: 20%;
}

a span { /*弹出文本样式和动画效果*/
  color: #666666;
  position: absolute;
  bottom: 0;
  left: 0px;
  right: 0px;
  padding: 15px 7px;
  z-index: -1;
  font-size: 14px;
  border-radius: 5px;
  background: #fff;
  visibility: hidden;
  opacity: 0;
  -o-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
a:hover span { /*文本悬停位置*/
  bottom: 120px;
  visibility: visible;
  opacity: 1;
}

DIV

<div class="container">
  <section>
    <a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
  <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
</svg>
      <span>twitter</span>
    </a>
    <a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
  <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
</svg>
      <span>facebook</span>
    </a>
  </section>
</div>

调试

https://static.hexingxing.cn/v3/css3/transition/cubic-bezier()/