jQuery缓动动画

Question

我需要显示一个动画，其中输入框从顶部下降，下降后展开，用户可以在该框中键入一些文本使用jQuery缓动。与https://www.meperdi.es/效果相同

Answer 1

也许一些CSS和一些jQuery addclass可能会有所帮助？https://jsfiddle.net/moongod101/s4L1909p/

Answer 2

查看您作为示例发布的动画，您可以使用jQuery在没有的情况下为输入设置动画。

事实上，千万不要使用jQuery来制作动画，因为它的效率非常低。

仍然可以像在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);
  }
}