「transitionって何?」 「CSSだけでボタンに動きをつけたりしたい」 「transition」と聞いて、「あのプロパティね」とすぐに思い出す人は初学者はほとんどいないのではないでしょうか? 初心者向けのCSSテキストがあれば、最初に学習するプロパティとは言い難いでしょう。 ですが、CSS3で導入されたこのプロパティは、デザインに動きをつける効果(アニメーション)がり、身につけるとデザインの幅が確実に広がります。 難しそう、と思った人も安心してください。それほど難しいプロパティではありません。「transition」の基礎的動きを身にけることの学習コストは意外と低く、これまでjavascriptで実装していた単純な動的機能がCSSだけで実現するので、一度挙動を確認するだけでも価値があります。 これは初学者向けに書いていますので、既にCSSでアニメーションを作ってきた経験者は読み飛ば
![これで使いこなせる!CSSできるtransitionの使い方](https://cdn-ak-scissors.b.st-hatena.com/image/square/820400568f27f07cd097d9a0f88c5e478a9789df/height=288;version=1;width=512/https%3A%2F%2Fcreive.me%2Fwp-content%2Fuploads%2F2018%2F11%2Fmorgan-harper-nichols-157838-unsplash-761x504.jpg)