【第11回】プログラミング初心者向けCSS3講座【トランジション】

こんにちは、はるおです。これからHTMLとセットで使用される言語、CSS講座を始めます。CSSはHTMLで構成された文章を装飾する(文字色、文字サイズ、位置など)ための言語です。今回の記事から数回にわたって、現バージョンのCSS3について初心者向けに解説していこうと思います。

【HMTL5講座】

【第0回】プログラミング初心者向けHTML5講座

  

 

【前回記事】

【第10回】プログラミング初心者向けCSS3講座【トランスフォーム】

  

【次回記事】

【第12回】プログラミング初心者向けCSS3講座【マルチカラムについて】

本記事では、下記の内容を解説します。

 

 

 

○この記事でわかること

・トランジションについてわかる

  

この記事を書いている僕は、プログラミング学習歴8ヶ月。

基礎学習が終わり、最近はLP作成などの実績も少しずつ出してきております。

 

 

また、Twiiterも最近始めたのでこちらの方もフォローしていただけると嬉しいです。

 

Twitterアカウント @clearyou66

 

トランジションについて

 

今回紹介するプロパティは、「transition」というものになります。こちらのプロパティを使用すると、:hoverなどを用いた際に、スタイルを重ねることで変化をもたらすことができるようになります。

 

過去の記事(第9回)で、animationというプロパティについても紹介したのですが、transitionとよく似ています。違いとしては、animationはページに遷移した瞬間に変化が発生するのに対して、transitionは:hoverなどに対して変化が訪れます。

 

対象としては、:hoverや、:checked、:active、:target、:focus、その他jQueryにより、要素にクラスをつけた際にも、変化が適用されます。その他詳しい部分は以下で紹介していきます。

 

transition-property

トランジションの対象となる属性を選択し、指定するためのプロパティとなります。どの属性名に対して変化を行わせるかを選択することができるようになります。もし、全ての属性を対象にしたい場合は、「all」を指定します。

 

transition-property:

属性名;

トランジションの対象になる属性の名前を選択して、指定します。全ての属性に変化を適用したい場合には、「all」を指定します。

none; 属性を対象にしません。

 

 

transition-duration

トランジションによる変化にかける時間を指定するためのプロパティとなります。時間の指定の仕方は、秒による指定「s」や、ミリ秒による指定「ms」などで指定することができます。「マウスが乗ってから○秒後に変化」といった形で使用します。

 

transition-duration:

○s; ○秒後に変化を適用します。

○ms; ○ミリ秒後に変化を適用します。

 

 

transition-timing-function

トランジションによる変化の変化具合を指定することができるプロパティとなります。使用方法は前回紹介したanimationの、animation-timing-functionと同じ使用方法となります。それについては以下の通りです。

 

transition-timing-function:

linear; 最初から最後まで同じ速度のトランジションが行われます。

ease; 最初は早く、後からゆっくりとトランジションします。

ease-in; 最初はゆっくり、後は早めのトランジションをします。

ease-out;

最初は早め、後はゆっくりとトランジションをします。最初の早さはeaseより早いです。

ease-in-out;

最初はゆっくり、途中から早くなり、最後はまたゆっくりとなります。

step-start; 最初からトランジション変化後の状態になります。

step-end; 最後、瞬時にトランジション変化後の状態にします。

steps(n,flag);

n段階でトランジションを行います。そして、「flag」の部分に値を指定します。

start 最初から1段階目の変化が起こります。

end 初期値。トランジション1周後に最初の1段階目の変化が起きます。

 

 

transition-delay

トランジションによる変化を開始する際に、遅延時間を発生させるためのプロパティとなります。遅延時間の指定方法はtransition-durationと同様に、秒による指定「s」や、ミリ秒による指定「ms」によって指定します。

 

 

transition-delay:

○s; ○秒後に変化を適用します。

○ms; ○ミリ秒後に変化を適用します。

 

 

transition

transitionは、上記で紹介してきたプロパティをまとめるための、一括指定するためのプロパティとなります。transition-property、transition-duration、transition-timing-function、transition-delayなどをまとめて指定できます。

ただし注意点としまして、時間に関係するプロパティにつきましては、1つ目の値がtransition-duration、2つ目の値がtransition-delayという風に、順番が解釈されるので注意しましょう。使用方法は以下の通りです。

transition: 属性名 変化の時間 タイミング 遅延時間;

none; どの属性も対象としません。

 

 

 

今回の宿題

 

今日の内容に関連のある簡単な宿題を出しますので、次回の講座までにやっておきましょう。

 

宿題:transitionを用いて、変化をつけてみよう。

 

ということで第11回のCSS3講座を終わります。

 

 

 

エディタについてはこちらの記事で説明しているので参考までにどうぞ。

【初心者必見】最強におすすめのエディタ「Atom」について徹底解説

 

 

僕の失敗=駆け出しエンジニア(プログラミング初心者)の失敗 だと思うので、僕の失敗談はすべてこれからの駆け出しエンジニアたちに還元していきたいというスタンスです。

 

また、本記事は超初心者向けに解説しているため、難しい単語や不要な説明は省略させていただいております。わからないことがあればコメント欄にて気軽にご質問ください。

 

僕のプロフィールついては以下の記事にまとめてありますので、時間がある方は見ていっていただけると嬉しいです。

 

 

WordPressで記事投稿をする方法を自己紹介で学習する【初投稿】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です