CSS3 の transition、transform、translate の覚え方

CSS3 の 三大覚えにくい "trans" さんたちの簡単な覚え方。

 

・transition ← アニメーション(tion(ション)) をするよ〜。プロパティだよ〜。

・transform ← トランスフォーマーになる(変形する)よ〜、フォーム(form・形態)を変えるよ〜、プロパティだよ〜。

・translate ← いろいろと移動したら遅刻(late)したよ〜、位置が変わるよ〜。

例)

.tion {

  transition: all 1s ease-out; // アニメーション(tion)するよ〜

}

.form, .late{

  transform: translateX(100px); // 形態をX軸に100px移動(遅刻)するよ〜

}

 

うん、スミマセン、ノリです。