jQuery Easing Animation

Question

我需要显示一个动画，其中输入框从顶部落下，下落后展开，用户可以使用jQuery缓动在该框中键入一些文本。.效果与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);
  }
}