＊＊＊＊＊　現在、編集中　＊＊＊＊＊

ＣＳＳでアニメーション・２つのセレクタ：ｔｒａｎｓｉｔｉｏｎとａｎｉｍａｔｉｏｎ

概要：ＣＳＳだけでアニメーションする方法として、２つのセレクタ：「ｔｒｎｓｉｔｉｏｎ」と「ａｎｉｍａｔｉｏｎ」を利用出来る。

２つのアニメーションの主な相違点

相違点
transition
animation

ループ（繰り返し）
動作は１回限りで、ループしない
停止や回数入れない限り連続して動作

アニメション動作
動作時間と拡大・縮小、カラーなどＣＳＳの範囲
@keyframesで細かい設定、角度や回転軸など

実行タイミング
アクションがないと動作しない
ページが読み込まれると動作

２つのアニメーションの簡易事例

transition

マウス・ホバーで動作。　

事例－１

Word Press

  <!-- html -->
  <p class="trans_txt">
  <a name="trans_1">Word Press</a>
  </p>

<a name="trans_1">Word Press</a>

</p>

  /* css */
.trans_txt a{
  display:block;
  transition:background-color 3.0s,
  color 4.0s, 
  font-size 2.0s, 
  font-weight 5.0s, 
  color 6s}
.trans_txt a:hover{
  color:red;
  font-size:1.5em;
  text-align:center;
  font-weight:bold;
  background-color:#0ff;}

/* css */

.trans_txt a{

display:block;

transition:background-color 3.0s,

color 4.0s,

font-size 2.0s,

font-weight 5.0s,

color 6s}

.trans_txt a:hover{

color:red;

font-size:1.5em;

text-align:center;

font-weight:bold;

background-color:#0ff;}

事例－２

animation

ページ表示と同時に動作。

事例ーＡ

WordPressはブログやウェッブを作成するオープンソースの・

transition

transition-duration: 変化が始まって終わるまでの時間を指定
transition-property: 変化が適用されるCSSのプロパティ
transition-delay: 変化の度合いを指定
transition: ４つを一括で指定できるショートハンド・プロパティ

transition-timing-function:値;

ease: 開始時と終了時は緩やかに変化
linear: 変化が適用されるCSSのプロパティ
ease-in: 開始時は緩やかに変化、終了に近づくと早く変化
ease-out: 開始時は早く変化し、終了時は緩やかに変化
ease-in-out: 開始時と終了時は、かなり緩やかに変化
cubic-bezier(0.42, 0, 0.58, 1.0): (x軸の値, y軸の値, x軸の値, y軸の値); 変化の度合いを3次ベジェ曲線で指定