如何在CSS动画中获得重力效果? [英] How to get a gravity effect in a CSS animation?

问题描述

我想为一个元素设置动画，就像您低头看着地球一样.元素跳向您，达到顶点，然后稍微回落.轨迹的侧视图是这样的:

I want to animate an element as if you're looking down at the Earth. The element jumps towards you, hits its apex, and falls back down a little. A side view of the trajectory would be like this:

     _
   /   \
  /     |
 |
 |

我无法通过关键帧动画获得逼真的效果.矿山看起来像这样:

I wasn't able to attain a realistic effect with keyframe animations. Mine looks artificial like this:

    /\
   /  \
  /
 /
/

CSS

@keyframes springIn {
    0% {
        transform: scale(0.0);
    }
    80% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1.0);
    }
}

.someElement {
    animation: springIn 1s linear 1s 1 forwards;
}

如何在动画上放置抛物线函数以获得重力效果?我以为可以使用贝塞尔曲线，但是CSS标准不允许[0，0]之外的点.

How do you put parabolic function on the animation to get the gravity effect? I thought I could use Bezier Curves, but the CSS standard does not allow points outside of [0, 0].

推荐答案

我认为您可以使用贝塞尔曲线来实现.

I think that you can do it using bezier curves.

在您的情况下，可能是这样的:

in you case, it could be something like that:

-webkit-transition: all 500ms cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-moz-transition: all 500ms cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-ms-transition: all 500ms cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-o-transition: all 500ms cubic-bezier(0.310, 0.440, 0.445, 1.650); 
transition: all 500ms cubic-bezier(0.310, 0.440, 0.445, 1.650); /* custom */

-webkit-transition-timing-function: cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-moz-transition-timing-function: cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-ms-transition-timing-function: cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-o-transition-timing-function: cubic-bezier(0.310, 0.440, 0.445, 1.650); 
transition-timing-function: cubic-bezier(0.310, 0.440, 0.445, 1.650); /* custom */

我还没有自己做，请检查此链接:

I haven't done it by myself, check this link:

我已经在JSFiddle中做了一个示例.

I have made an example in a JSFiddle.

我放置了一个外部div以使悬停稳定:

I put an outer div to make the hover stable:

<div class="container">
    <div class="moving"></div>
</div>

，CSS如下:

.moving {
    position: absolute; width: 200px; height: 150px; top: 50px;  left: 50px;
    background-color: green;
    -webkit-transition: all 5s cubic-bezier(0.310, 0.440, 0.445, 1.650); 
}

.container:hover .moving {
    zoom: 1.5;
}

编辑

只是一张贝塞尔曲线所能得到的图像(来自Easy Animation工具页面)，以表明物体速度不需要保持恒定(几乎可以是抛物线的)

Just an image of what can you get with a bezier curve (from the ease animation tool page) to show that the object speed doesn't need to be constant (and can be almost parabolic)

这篇关于如何在CSS动画中获得重力效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！