html - 是否有 CSS 弹跳过渡

Question

你好我想知道是否有一个过渡使紫色div(当你悬停在向下的感觉上时向下滑动的那个？图片)在到达尽头时反弹？

这是代码-和jsFiddlle Demo link

HTML

<div class="img">
    <div class="hover"><h2>project 1</h2></div>
</div>

CSS

.img {
    width: 457px;
    height: 288px;
    background-image: url("http://i59.tinypic.com/xdulh2.png");
    position:relative;
    overflow:hidden;
}

h2 {
font-family: avenir;
font-weight: bold;
font-size: 40px;
color: #000;
}

.hover {
    position:absolute;
    top:-100%;
    width: 457px;
    height: 288px;
    background: rgba(130,76,158,0.5);
     -webkit-transition:all 1s; 
   
}

.img:hover .hover {
    top:0;   
}

一个转换的例子我的意思是你可以在这里看到http://www.ollygibbs.com

Answer 1

CSS Transition 没有bounce-style 的计时功能，所以我们必须用CSS 动画关键帧来编码。这里的问题是 - 如何轻松地将弹跳(或任何其他)函数分解为特定样式的关键帧系列？

这是我构建transition.css时遇到的问题，所以我构建了一个工具“easing.css”来帮助我从任意方程生成关键帧。

这个想法很简单；假设我们要制作弹跳效果:

1. 我们先为我们想要的效果做一个计时函数f(t)，比如

   Math.abs(Math.sin(1.2 + (t ** 1.4) * 23)) * ( 1 - t ) ** 2.8

2. 根据这个函数的输出如何变化，我们用 0 到 1 的不同间隔对这个函数进行采样。

3. 使用采样的 (t, f(t)) 对生成 css 动画关键帧。

4. 在需要过渡时应用结果动画。

有了上面的概念，easing.css还提供了几个定时功能预置让你可以把玩。以下是通过 easing.css 生成的 15 帧弹跳动画，您可以通过增加帧数或调整提供的计时功能使其更像真正的弹跳:

.your-block {
  animation: YourAnimation 2s linear 1s;
}
@keyframes YourAnimation {
  0% { height: 7px; }
  8% { height: 24px; }
  10% { height: 36px; }
  17% { height: 99px; }
  19% { height: 83px; }
  21% { height: 69px; }
  24% { height: 57px; }
  25% { height: 56px; }
  27% { height: 59px; }
  34% { height: 100px; }
  36% { height: 88px; }
  38% { height: 80px; }
  48% { height: 100px; }
  72% { height: 100px; }
  100% { height: 100px; }
}