In PPT Presentation, there is an option of Rise up. In that option, the object first moves up, slows down, and comes back and then stops finally. Link to the animation effect:
我们如何在 CSS 中做到这一点？
img {
height: 100px;
width: 100px;
position: absolute;
top: 60px;
left: 60px;
-webkit-animation: jump 1s ease-out;
-moz-animation: jump 1s ease-out;
animation: jump 1s ease-out;
}
@-webkit-keyframes jump {
0% {
transform: translateX(600px);
}
100% {
transform: translateX(0px);
}
}
@keyframes jump {
0% {
transform: translateX(600px);
}
100% {
transform: translateX(0px);
}
}<img src="http://i268.photobucket.com/als/jj6/SK_CR/Emblem%20BG%20PNGs/Circle.png">我的版本的作品，但不会像 PPT 动画一样向后跳。
1
Change the
animation-timing-functionfromease-outtocubic-bezier()
关键是，如果你想让球返回一个简单的translate动画，两个手柄的y 轴必须大于 1。
cubic-bezier(x1, y1, x2, y2)& lt;--这里，y1和y2应该是 & gt;1。
img {
height: 100px;
width: 100px;
position: absolute;
top: 60px;
left: 60px;
-webkit-animation: jump 1s cubic-bezier(0.3, 1.2, 0.8, 1.2);
animation: jump 1s cubic-bezier(0.3, 1.2, 0.8, 1.2);
}
@-webkit-keyframes jump {
0% {
transform: translateX(600px);
}
100% {
transform: translateX(0px);
}
}
@keyframes jump {
0% {
transform: translateX(600px);
}
100% {
transform: translateX(0px);
}
}<img src="http://i268.photobucket.com/als/jj6/SK_CR/Emblem%20BG%20PNGs/Circle.png">
1
Use a
cubic-bezier(0.02,1.24,1,1.18)instead ofease-out.
根据需要更改坐标值。
此外，-moz-前缀不是必需的，@keyframes在 Firefox 上是fully supported。
img {
height: 100px;
width: 100px;
position: absolute;
top: 60px;
left: 60px;
-webkit-animation: jump 1s cubic-bezier(0.02, 1.24, 1, 1.18);
animation: jump 1s cubic-bezier(0.02, 1.24, 1, 1.18);
}
@-webkit-keyframes jump {
0% {
transform: translateX(600px);
}
100% {
transform: translateX(0px);
}
}
@keyframes jump {
0% {
transform: translateX(600px);
}
100% {
transform: translateX(0px);
}
}<img src="http://i268.photobucket.com/als/jj6/SK_CR/Emblem%20BG%20PNGs/Circle.png">本站系公益性非盈利分享网址，本文来自用户投稿，不代表边看边学立场，如若转载，请注明出处
评论列表（55条）