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

れる際には、50 ％の時間（ 250 ミリ秒）が経過した時点で表示のサイズは

100 ％に到達します。しかし消える際には、トランジション全体の時間

（500 ミリ秒）をかけて 100 ％に到達します。このせいで、2 倍の時間がか

かっているように感じられます。

この点を修正するのに必要な変更は、トランジションの継続時間を上書

きすることだけです。 transition‐durationで時間だけを指定する

か、短縮記法の transitionを使ってすべてのパラメーターを記述しま

す。後者の場合、 easeはデフォルト値なので記述する必要はありません

（下記コード参照）。

      

弾むようなトランジションには、さまざまな適用例が考えられます。そ

の一部については、このシークレットの冒頭でも紹介しました。しかし、

このようなトランジションがまったく適していないケースもあります。例

えば、色が変化するトランジションがこれに当てはまります。図8.12 の

ように、色が弾性的に変化するのはとても面白いのですが、 UI としては

一般的に望ましくありません。



input:not(:focus)+.callout{

 transform:scale(0);



transition:.25s;

}

.callout{

 transform‐origin:1.4em‐.4em;

 transition:.5scubic‐bezier(.25,.1,.3,1.5);

}