CSS3動畫經常使用貝塞爾曲線-效果演示

CSS與貝塞爾曲線

CSS3動畫經常使用貝塞爾曲線實現更加天然，物理感的動畫。

demo演示

列舉了一些常見的貝塞爾曲線數值，用於作動畫的存檔。

.a1{
  animation: stretch 1s cubic-bezier(0.39, 0.575, 0.565, 1) infinite;
}

.a2{
  animation: stretch 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite;
}

.a3{
  animation: stretch 1s cubic-bezier(0.95, 0.05, 0.795, 0.035) infinite;
}

.a4{
  animation: stretch 1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}

.a5{
  animation: stretch 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}

.a6{
  animation: stretch 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

.a7{
  animation: stretch 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
}

P.S. 這個是我用的最多的，我以爲效果最天然。