CSS3の普及がすすみ、今ではCSSだけでホームページに動きをつけられるようになっています。

アプリのようにクリックやスクロールなどの操作に合わせて動かすことはできないものの、CSSだけで出来る表現の幅はグンと広がりました。

FlashやJavaScriptだけで要素を動かそうとすると動作が重くなりがちなので、適宜CSSと使い分けることでブラウザの負荷を小さくすることにもつながります。

『transition』、もしくは『animation』、どちらかのプロパティを使うことで、要素を動かせます。

transitionとは、直訳で「移り変わり」、「変遷」、「変化」という意味で、このプロパティは時間経過とともに変化させるために使います。

マウスカーソルをボタンに乗せたときに、ボタンの色を滑らかに変えたり、影をつけたり、という表現を可能にします。

次の4つのプロパティを使って設定します。

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

transition-property

滑らかに変化させたいCSSプロパティ名を指定します。複数の場合はカンマ区切りで指定できます。

例：opacityとwidthを変化させたい場合

E {
  transition-property: opacity,width;
}
    

transition-duration

何秒かけて変化させるかを設定するプロパティです。数値+sで秒数を指定します。

例：0.5秒かけて変化させる場合

E{
  transition-duration: 0.5s;
}
    

transition-timing-function

加速曲線(変化の仕方)を指定します。

例：開始と完了を滑らかにする場合

E{
  transition-timing-function: ease;
}
    

transition-timing-functionプロパティには、他にも次の値が用意されています。

transition-delay

変化するまでの待機時間を指定します。数値+sで秒数を指定します。

例：読み込み完了後0.5秒待ってから変化させる場合

E{
transition-delay:0.5s;
}
    

上記4つのプロパティのショートハンド(省略形)として、transitionプロパティも使えます。

例：background-colorプロパティを0.5秒後に1秒かけて滑らかに変化させる

E{
transition: background-color 1s ease 0.5s;
}
    

※ショートハンドを使う場合、先に出てくる秒数がtransition-durationの値になる点だけ注意が必要です

transitionを使ったアニメーションの注意点

hoverなどの疑似クラス側にtransitionプロパティを指定すると、マウスカーソルを離した時にtransitionが動作しない現象が起こります。

カーソルを合わせたときは滑らかに変化するけど、離したときはすぐ変化する。

注意：hover側にtransitionプロパティを書いてしまうと、要素からマウスカーソルを離したときに、transitionが発生しません。

a{
  background-color:#f66;
}
a:hover{
  transition:background-color 0.5s;
  background-color:#ccc;
}
    

animationは単語そのまま、アニメーションを設定するときに使うプロパティです。

transitionプロパティと違い、こちらは動きの繰り返しも設定することが可能です。

@keyframes規則で、経過点ごとの状態を設定して、次の7のプロパティを組み合わせて動作時間や繰り返し回数等を設定します。

• animetion-name
• animetion-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-timing-function

まず、@keyframes規則で、アニメーションを設定します

例：『anime2』という名前のアニメーションを作る

@keyframes anime2{
  0%{
    opacity:0;
    width:100px;
  }
  100%{
    opacity:1;
    width:200px;
  }
}
    

例はopacityとwidth、2つのプロパティを変化させています。

%値は経過点のことで、0%はアニメーション開始時点、100%はアニメーション終了時点の事を示します。

10秒のアニメーションの場合は、0%が0秒時点、50%は5秒時点、100%は10秒時点を示します。

animation-name

@keyframesで宣言したアニメーションの名称を指定します。

例：アニメーションの名称が『anime2』だった場合

E{
  animation-name:anime2;
}
    

animation-delay

アニメーションが始まるまでの待機時間を指定します。

例：0.5秒待った後、アニメーションを開始させる場合

E{
  animation-delay:0.5s;
}
    

animation-direction

アニメーションを繰り返す場合の動作を指定します。

例：順方向と逆方向を交互に実行する場合

E{
  animation-direction: alternate;
}
    

animation-duration

アニメーションが始まって、完了するまでの時間を指定する

例：0.5秒かけて動かす場合

E{
  animation-duration:0.5s;
}
    

animation-fill-mode

アニメーションが完了したあと、初期状態に戻すか、そのままで止めるかを指定する。

例：最後の動きのまま止める場合

E{
  animation-fill-mode:forwards;
}
    

animation-iteration-count

繰り返す回数を数値で指定します。

例：5回繰り返す場合

E{
  animation-iteration-count:5;
}
    

回数を指定せず、永続的に繰り返す場合は次の値を指定します。

E{
  animation-iteration-count:infinite;
}
    

animation-timing-function

加速曲線(変化の仕方)を指定します。

例：開始と完了を滑らかにする場合

E{
  animation-timing-function:ease;
}
    

animation-timing-functionプロパティには、他にも次の値が用意されています。

上記7つのショートハンド(省略形)としてanimationプロパティも使えます。

例：anime1というアニメーションを、1秒かけて滑らかに動かす。繰り返す回数は3回で、完了後はそのまま止まる。順方向と逆方向を交互に繰り返す。ただし0.3秒後に変化が始まる。という設定

E{
  animation:anime1 1s ease 3 forwards alternate 0.3s;
}
      

※ショートハンドを使う場合、先に出てくる秒数がanimation-durationの値になる点だけ注意が必要です。

以上、CSSを使ったアニメーションの2つの方法でした。

プロパティの中に別のプロパティを書かないといけなかったり、変化の内容と時間を別々に設定しなければいけなかったりするので、初めは混乱することも多いと思います。

値を少しずつ変えて、実際の変化を見ることで少しずつ分かるようになると思います。実践あるのみです！

Webサイトに動きをつけようとすると、『Flashを使う』しかなかった時代もありました。

しかし、ブラウザの機能が充実したこと、多くのスマートフォンでは初期状態でFlashを実装していないことなど、様々な理由でFlashを使わない考えが主流になってきています。SEOにとっても良い動きだと思います。

検索エンジンはFlashの内容を適切に読み込めないとされていて、SEOを考えると不利な場面が多くなります。

Flashを使わず、CSSやJavaScriptなど、ブラウザの標準機能を使うことで、SEOにも強いサイトを構築できますので、アニメーション実装する際には可能な限りCSSアニメーションを積極的に取り入れていきましょう。