2018年11月22日(木)
これで使いこなせる！CSSできるtransitionの使い方
「transitionって何?」
「CSSだけでボタンに動きをつけたりしたい」「transition」と聞いて、「あのプロパティね」とすぐに思い出す人は初学者はほとんどいないのではないでしょうか?
初心者向けのCSSテキストがあれば、最初に学習するプロパティとは言い難いでしょう。ですが、CSS3で導入されたこのプロパティは、デザインに動きをつける効果（アニメーション）がり、身につけるとデザインの幅が確実に広がります。
難しそう、と思った人も安心してください。それほど難しいプロパティではありません。「transition」の基礎的動きを身にけることの学習コストは意外と低く、これまでjavascriptで実装していた単純な動的機能がCSSだけで実現するので、一度挙動を確認するだけでも価値があります。
これは初学者向けに書いていますので、既にCSSでアニメーションを作ってきた経験者は読み飛ばしても構いません。
この記事の内容
Transitionとは何か
transitionの定義
CSS3で新たに追加され、時間によるプロパティの変化を表現します。
これは...
0
60
11
66author:
creive（クリーブ）
クリエイティブを、アーカイブする。creive（クリーブ）は「クリエイティブ」をテーマに、デザインや制作、ライフハック等の情報を発信しているメディアです。
Ads
クリエイティブを、アーカイブする。creive（クリーブ）は「クリエイティブ」をテーマに、デザインや制作、ライフハック等の情報を発信しているメディアです。creive（クリーブ）の記事『これで使いこなせる！CSSできるtransitionの使い方』についてまとめています。
この記事は特にレスポンシブ・javascript・アニメーション・CSS3・Google・LINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のcreive（クリーブ）で全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとcreive（クリーブ）の記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
Ads
