悬停动画反弹

Posted 2023-03-06

【中文标题】悬停动画反弹

【英文标题】：Hover animation bounce

【发布时间】：2020-06-17 16:20:09

【问题描述】：

我正在尝试使 H2 和跨度文本在我创建的悬停动画结束时具有一点反弹效果。我正在尝试做的可以看到in the following example。为了清楚起见，在该示例中使用了 SCSS。我没有使用 SCSS，所以我不能 100% 确定我想要做的事情只用普通的 CSS 是可能的，但我当然希望这是因为这是我在项目中使用的。所以下面的代码向你展示了我能做什么。 H2 和 span 文本在悬停时有一个基本的起点和终点动画。我希望它在最后有一点反弹（就像在我分享的链接示例中）我觉得我需要添加关键帧才能实现。但我不知道是否可以在悬停时添加关键帧动画，特别是如果我希望它在鼠标移出时动画回到原来的位置。我错了吗？我很感激你们可能有的任何解决方案。谢谢。

body 
  background-color: black;


.featured-list li 
  display: inline-block;
  margin-right: .8%;


.featured-list a 
  display: block;


.featured-list 
  text-align: center;
  padding: 0;
  margin: 0 auto;


a.feature-img img 
  width: 425px;
  border-radius: 5px;
  transition: .2s linear;


a.feature-img 
  text-align: center;



.f-cta, .f-img-content h2 
  font-family: 'Abel',Helvetica,Arial,Lucida,sans-serif;
  font-weight: 100;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;


.f-img-content h2 
  color: #fff;
  top: -60%;
  transition: .2s linear;


.f-cta 
  background: #fff;
  width: 50%;
  border-radius: 3px;
  padding: 7px;
  color: #000;
  top: 120%;
  font-size: 1.3em;
  transition: .2s linear;


.f-img-content 
  position: relative;
  text-align: center;
  overflow: hidden;


a.feature-img:hover img 
  opacity: .6;


a.feature-img:hover h2 
  transform: translateY(1065%);


a.feature-img:hover span.f-cta 
  transform: translateY(-600%);

<ul class="featured-list">
      <li><a href="#" class="feature-img">
        <div class="f-img-content">
          <img src="https://i.imgur.com/EENJU66.gif">
          <h2>Lorem Ipsum project title</h2>
          <span class="f-cta">View Project</span>
        </div>   
      </a></li>
      <!--li><a href="#" class="feature-img">
      <img src="https://i.imgur.com/EENJU66.gif">
      </a></li>
      <li><a href="#" class="feature-img">
      <img src="https://i.imgur.com/EENJU66.gif">
      </a></li>
      <li><a href="#" class="feature-img">
      <img src="https://i.imgur.com/EENJU66.gif">
      </a></li-->
    </ul>

【参考方案1】：

您只需要三次贝塞尔转换。

类似这样的东西 - https://easings.net/#easeInOutBack 或与您的示例相同：

transition:all .3s cubic-bezier(.3, 0, 0, 1.3);

随便玩玩吧:)

【讨论】：

非常感谢！我正在考虑类似的事情，我只是对三次贝塞尔数字应该是什么感到厌烦。这是一个很好的起点。谢谢！

不客气！一旦你开始使用它们，它就是一个全新的世界，至少对我来说是这样的：D