jQuery轻松动画

Question

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

Answer 1

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

Answer 2

以您发布的动画为例， 无需使用jQuery就可以对输入进行动画处理。

实际上-永远不要将jQuery用于动画，因为它效率很低。

仍然-可以像这个小提琴一样对输入进行动画处理

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);
  }
}