【第9回】プログラミング初心者向けCSS3講座【アニメーション】

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

【HMTL5講座】

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

  

 

【前回記事】

【第8回】プログラミング初心者向けCSS3講座【flexbox】

  

【次回記事】

次回記事を更新し次第リンクを貼っておきます。

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

 

 

 

○この記事でわかること

・アニメーションについてわかる

  

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

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

 

 

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

 

Twitterアカウント @clearyou66

 

アニメーション について

 

 

アニメーションをつけるために、CSSにはanimationというプロパティが用意されています。それは「animation」というものになります。今回はこの「animation」について学習を進めていきます。

@keyframes

animationを使用する際には、「@keyframes」によりフレームを定義しておく必要があります。これにより、アニメーション開始時と終了時の状態を、「to」と「from」で定義します。

 

@keyframes 〇〇 {

from {    //0%時の値を指定する。

color: red;

50% {    //50%時の値を指定する。

color: blue;

to {      //100%時の値を指定する。

color: green;

このように、「from」で0%時(変化前)「to」で100%時のアニメーション(変化後)を指定することができます。また、途中のアニメーションを変化を指定したい場合は、「○%」という形で指定できます。

 

 

animation-name

animation-nameでは、@keyframesに指定した名前を指定します。フレーム名を指定することで、@keyframesに指定したアニメーションを呼び出すことができます。

animation-name:

フレーム名; @keyframesで指定したフレーム名を指定します。

none; アニメーションを指定しません。

 

 

animation-duration

アニメーションにかける時間を指定します。指定方法は小文字の「s」を使って、秒単位で指定します。使用方法は以下の通りです。

animation-duration: 1.5s;

 

 

animation-timing-function

アニメーションが始まるタイミングを指定します。

 

animation-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段階目の変化が起きます。

 

 

animation-delay

アニメーションを開始するまでの時間を遅らせるプロパティとなります。時間指定した分だけアニメーションを遅らせることができる。

animation-delay:

○s; 秒単位で指定します。

○ms; ミリ秒で指定します。

 

 

animation-iteration-count

アニメーションの繰り返しの回数を指定するためのプロパティとなります。

animation-iteration-count:

回数; 回数で指定します。

infinite; アニメーションを無限に繰り返し行います。

 

 

animation-direction

アニメーションの逆再生を行う際のルールを指定するためのプロパティとなります。

 

animation-direction:

normal; 初期値です。通常の流れでアニメーションが進行します。

reverse; アニメーションが逆再生で行われます。

alternate;

開始->終了->開始->終了の流れでアニメーションが行われます。開始から終了までで1回、終了から開始までで1回というカウントになります。

alternate-reverse;

終了->開始->終了->開始という流れになります。終了から開始で1回、開始から終了までで1回となる。

 

 

animation-fill-mode

アニメーションの開始時、終了時の効果の適用を指示します。

animation-fill-mode:

none; アニメーションが適用されない。

forwards; アニメーションを終了したままにしておきます。

backwards; アニメーション開始時のスタイルを適用します。

both; 開始時には開始時、終了時には終了時のスタイルが指定されます。

 

 

animation-play-state

アニメーションの実行や、一時停止をすることができるようになります。

animation-play-state:

running; アニメーションを実行している状態です。

paused; アニメーションを一時停止します。

 

 

animation

上記のプロパティを一括指定するためのプロパティとなります。ただし、時間が関係するプロパティは、animation-duration、animation-delayの順番で適用されます。

 

 

 

 

 

今回の宿題

 

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

 

宿題:今回はなし。

 

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

 

 

 

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

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

 

 

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

 

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

 

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

 

 

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

コメントを残す

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