jQuery Easing Animation

Question

I need to show an animation where an input box falls from top, expands after falling and user can type in some text in that box using jQuery easing.. same effect like https://www.meperdi.es/

Answer 1

Maybe some CSS and some jQuery addclass may help? https://jsfiddle.net/moongod101/s4L1909p/

Answer 2

Looking at the animation you posted as an example, you can animate the input without using jQuery.

In fact - never use jQuery for animations, as it's very inefficient.

Still - animating the input can be done like in this fiddle

input.anim{
  display:block;
  margin:3rem auto;
  animation: showExtend 1.2s cubic-bezier(.25,1.52,.59,.9) forwards;
}


@keyframes showExtend{
  from{
    transform: translate(0%, -5000%) rotate(35deg) scale(1,.1);
  }
  50%{
    transform: translate(0%, 15%) rotate(15deg) scale(1,.5);
  }
  to{
    transform: translate(0,0) rotate(0deg) scale(1,1);
  }
}