试图改变图像的位置和大小,同时 [英] Trying to change an image's position and size at the same time
问题描述
我和一个网球表情符号一个提交按钮的工作,我想,当用户点击它来制作动画在屏幕上。
I'm working with a tennis ball emoji for a submit button, and I'd like to animate it off the screen when the user clicks on it.
我想它可能向上移动屏幕,缩小了一点点,并继续关闭屏幕的顶部。我想对现实熄灭屏幕之前就应该反弹一点点,但是这很可能是一个不必要的并发症。
I'd like for it maybe to move up the screen and shrink a little bit, and continue off the top of the screen. I suppose for realism it should bounce a little bit before it goes off the screen, but that would probably be a needless complication.
下面是我到目前为止已有的jsfiddle :
Here's what I've got so far jsfiddle:
(function() {
$(document).on('click','#save',clicked)
function clicked(myEvent) {
myEvent.preventDefault()
var local = {}
local.width = ["50px", "swing" ]
local.height = [ "50px", "swing" ]
local.top = "-64px"
$(this).animate(local,"slow")
}
})()
的问题是,因为它的收缩它不移动在屏幕。
我想让它看起来像您投放的网球一个王牌。
The problem is that it's not moving up the screen as it's shrinking. I'd like for it to look like you're serving the tennis ball for an ace.
推荐答案
可能是这样的:的http:/ /jsfiddle.net/LaRWY/7/
@-webkit-keyframes bounce {
from, to {
top: 0;
-webkit-animation-timing-function: ease-out;
}
50% {
top: 220px;
-webkit-animation-timing-function: ease-in;
}
}
@keyframes bounce {
from, to {
top: 0;
animation-timing-function: ease-out;
}
50% {
top: 220px;
animation-timing-function: ease-in;
}
}
#save{
-webkit-animation-name: bounce;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 4.2s;
animation-name: bounce;
animation-iteration-count: infinite;
animation-duration: 4.2s;
position: absolute;
top: 100px;
}
这篇关于试图改变图像的位置和大小,同时的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!