Question

你好我想知道是否有一个过渡使紫色div（当你将鼠标悬停在感觉向下的图片时向下滑动的那个）到达终点时反弹？

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

animate.css库将为您提供更完整的设置，您可以选择并选择所需的设置，但如果您必须自己编写代码，请使用我在 CODEPEN <中包含的代码/ strong>

基本上，您使用以下crossbrowser代码实例化反弹效果。此代码确定反弹，反弹速度以及反弹方向。如果你愿意，你可以选择缓和。

现在，弹跳是一件棘手的事情。因为它必须上下移动直到它停止。因此反弹必须逐渐降低高度。因此，这就是为什么你需要@ -keyframes，（注意你需要@ -webkit-keyframes和@ -moz-keyframes等来进行更完整的跨浏览器开发。这些关键帧可以让你在任何时候打破这种影响。特别是弹跳效果，通过减少它在Y轴上的位置（这意味着高度），效果每10％就会破裂，直到它最终停止。

-webkit-animation: bounce 1200ms ease-in; -moz-animation: bounce 1200ms ease-in; -o-animation: bounce 1200ms ease-in; animation: bounce 1200ms ease-in;

希望对你有所帮助。

P.S。我的代码看起来有些小问题，但你有一个足够好的开始。我在你的小提琴中添加了你的代码

Answer 2

嘿，如前所述，animate.css与css动画相当不错，但为了更好地控制动画，你可以用js添加它。你只需要添加一个小脚本。

$('.img').hover(function(){
    $('.hover').addClass('animated bounceInDown');
}, function() {
    $('.hover').removeClass('bounceInDown');
    $('.hover').addClass('bounceOutUp');
    setTimeout(function() {
        $('.hover').removeClass('animated bounceOutUp');  
 }, 1000);
});

查看这个小提琴example

之后，您只需要使用.bounceInDown .bounceOutUp关键帧动画的值（如果您愿意）。

这样动画或多或少有弹性

@keyframes bounceOutUp {
20% {
  -webkit-transform: translate3d(0, -60px, 0);
         transform: translate3d(0, -60px, 0);
}

40%, 45% {
   opacity: 1;
   -webkit-transform: translate3d(0, 30px, 0);
        transform: translate3d(0, 30px, 0);
}

100% {
   opacity: 0;
   -webkit-transform: translate3d(0, -800px, 0);
        transform: translate3d(0, -800px, 0);
 }
}

Answer 3

另一种方法（使用jquery）将使用jQuery .animate和easing插件。

    <div id="example">
        <p class="bounce"></p>
    </div>

    div { 
        width: 200px;
        height: 200px; 
        background: red;
    }

    .bounce {
        width: 100%;
        height: 0px;
        background: rgba(134,12,12,.4);
    }

    $('#example').on('mouseenter',function(){
        $('p').animate(
                { height: "200px" }, 
                1000, 
                "easeOutBounce"
             );
    })

[js小提琴示例] [1] [1]：http://jsfiddle.net/2ra7yumo/2/

它为动画提供了更多（或更简单）的控制。

Answer 4

CSS Transition没有反弹式计时功能，因此我们必须使用CSS动画关键帧对其进行编码。这里的问题是 - 如何轻松地将弹跳（或任何其他）函数分解为某种样式的关键帧系列？

这是我在构建transition.css时遇到的问题，因此我构建了一个工具＆＃34; easing.css＆＃34;帮助我从任意方程生成关键帧。

这个想法很简单;说我们想要反弹效果：

我们首先为我们想要的效果制作一个计时函数f（t），例如

Math.abs（Math.sin（1.2 +（t ** 1.4）* 23））*（1 - t）** 2.8
根据此函数输出的变化，我们以0到1的不同间隔对此函数进行采样。
使用采样（t，f（t））对生成css动画关键帧。
在需要转换时应用结果动画。

使用上面的概念，easing.css还提供了几个计时功能预设，以便您可以使用。下面是通过easing.css生成的15帧弹跳动画，你可以通过增加帧数或调整提供的计时功能使它更像真正的反弹：

from django.urls import path
path('accounts/', include('django.contrib.auth.urls')),

是否有CSS Bounce Transition

HTML

CSS

4 个答案: