Блог

Я работаю с эмодзи теннисного мяча для кнопки отправки, и я хотел бы анимировать его с экрана, когда пользователь нажимает на него.

_{(источник:emojipedia.org)}

Я бы хотел, чтобы оно, возможно, переместилось вверх по экрану и немного уменьшилось, а затем продолжилось в верхней части экрана. Я полагаю, что для реалистичности оно должно немного подпрыгнуть, прежде чем оно исчезнет с экрана, но это, вероятно, было бы ненужным усложнением.

Вот что у меня пока есть 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")
    }
})()
  

Проблема в том, что оно не перемещается вверх по экрану, поскольку оно уменьшается.
Я бы хотел, чтобы это выглядело так, как будто вы подаете теннисный мяч для туза.

Вы должны полностью расположить шарик перед запуском JavaScript, используя CSS:

 #save {
    position: absolute;
    top: 100px;
}
  

Может быть что-то вроде этого: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;
}