我正在尝试使H2和span文本在我创建的悬停动画快结束时具有一些反弹效果。可以看到我正在尝试做的事情in the following example。只是在该示例中很清楚,正在使用SCSS。我没有使用SCSS,所以我不能100%地确定尝试使用纯CSS可以做到的事情,但是我肯定希望是因为那是我在项目中使用的东西。因此,以下代码向您展示了我的能力。 H2和跨度文本在悬停时具有基本的起点和终点动画。我希望它在最后有一点反弹(就像在我共享的链接示例中一样),我觉得我需要添加关键帧才能实现。但是我不知道是否有可能在悬停时添加关键帧动画,特别是如果我希望它在滑出鼠标时动画回到其原始位置时。我对此有错吗?我感谢你们可能提供的任何解决方案。谢谢。
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>
答案 0 :(得分:1)
您只需要三次贝塞尔变换。
类似这样的事情-https://easings.net/#easeInOutBack 或与您的示例相同:
transition:all .3s cubic-bezier(.3, 0, 0, 1.3);
随便玩吧:)