HTML5のCSSアニメーションには多様なパラメータが用意されていて
少ないコード量で膨大なパターンを手軽に試行錯誤することができる

今回の件であれば
キーフレーム(何ミリ秒後にどういう状態にしたいか)の概念を取り入れるとか、
途中の状態の計算方法としてイージング(ease)を使ってみるとか