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