我想为一个元素设置动画,就好像你在俯视地球一样.元素向你跳跃,击中它的顶点,然后向下跌落一点.轨迹的侧视图如下：
_ / \ / | | |
我无法通过关键帧动画获得逼真的效果.我看起来像这样人造：
/\ / \ / / /
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;
}
如何在动画上放置抛物线函数以获得重力效果？我以为我可以使用Bezier Curves,但CSS标准不允许在[0,0]之外的点.
解决方法
我认为你可以使用贝塞尔曲线来做到这一点.
在你的情况下,它可能是这样的：
-webkit-transition: all 500ms cubic-bezier(0.310,0.440,0.445,1.650); -moz-transition: all 500ms cubic-bezier(0.310,1.650); -ms-transition: all 500ms cubic-bezier(0.310,1.650); -o-transition: all 500ms cubic-bezier(0.310,1.650); transition: all 500ms cubic-bezier(0.310,1.650); /* custom */ -webkit-transition-timing-function: cubic-bezier(0.310,1.650); -moz-transition-timing-function: cubic-bezier(0.310,1.650); -ms-transition-timing-function: cubic-bezier(0.310,1.650); -o-transition-timing-function: cubic-bezier(0.310,1.650); transition-timing-function: cubic-bezier(0.310,1.650); /* custom */
我自己没有这样做,请查看此链接：
我放了一个外部div来使悬停稳定：
<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,1.650);
}
.container:hover .moving {
zoom: 1.5;
}
编辑
