CSSシークレット ―47のテクニックでCSSを自在に操る

.25,1)と等価なので、 cubic‐bezier(.1,.25,1,.25)と指定すると

easeを反転させたトランジションを実行できます（図8.6）。これと元の

easeを組み合わせて以下のようにすると、さらにリアルな弾むアニメー

ションになります。



@keyframesbounce{

 60%,80%,to{

  transform:translateY(400px);

  animation‐timing‐function:ease;

 }

 70%{transform:translateY(300px);}

 90%{transform:translateY(360px);}

}

.ball{

 /*略*/

 animation:bounce3scubic‐bezier(.1,.25,1,.25);

}

329

シークレット42：弾むような動きのトランジション

図8.6

easeを反転させたタイミング関数

進

行

(50%,30%)

時間

図8.7

ビジュアライゼーションの助けを借り

ないと、ベジェ曲線を理解し記述でき

るようになるのは難しい。トランジシ

ョンでのタイミング関数として利用す

る場合にはなおさらである。しかし好

都合なことに、ビジュアライゼーショ

ンのためのオンラインツールは多数公

開 さ れ て い る 。 例 え ば 、 筆 者 は

cubic‐bezier.comを公開している

cubic‐bezier.com