transitionとanimation

CSS3アニメーション！と一言で表していたりしますが
指定方法としては２種類です。
ささっ！とできるのがtransition 凝ったことができるのがanimationと言われている感じでしょうか。

transition

とやかくアレコレ文字が多いものよりまずは実物を見たほうが早いんじゃないかと

 .tran01Area span
 {
   display: inline-block;
   width: 300px;
   background-color: #0067A3;
   color:#FFF;
   padding: 6px;
   transition-property: width;
   transition-duration:1s;
   transition-timing-function:ease-out;
   transition-delay:0.5s;
 }
 .tran01Area span:hover
 {
   width: 500px;
   padding:10px;
 }

こんな感じでやってます。
んでは各プロパティを少し説明します

transition-property

ここでは、transistionが有効になるCSSプロパティを指定します。
上記例では、widthのみの指定となりましたので以下の動きになります。
1:マウスオーバー
2:paddingは通常通り即時実行で広がる
3:widthはtransistion指定あるので、0.5秒まって、1秒かけて500pxまで伸ばす

複数のプロパティを同じように動かしたい場合はカンマで区切ってあげます。
transition-property: width,padding;とすると同じようににゅるんと動かすことができます。

 .tran02Area span
 {
   display: inline-block;
   width: 300px;
   background-color: #0067A3;
   color:#FFF;
   padding: 6px;
   transition-property: width,padding;
   transition-duration:1s;
   transition-timing-function:ease-out;
   transition-delay:0.5s;
 }
 .tran02Area span:hover
 {
   width: 500px;
   padding:10px;
 }

transition-duration

こいつは、アニメーションが何秒で完了するのか、を指定します。
この例は1秒なので通常の状態から、:hoverの状態になるまで1秒かけて動かしていっています。
基本は【秒】指定なので、0.5sとするとそのまま 0.5秒ってことになります。

 .tran03Area span
 {
   display: inline-block;
   width: 300px;
   background-color: #0067A3;
   color:#FFF;
   padding: 6px;
   transition-property: width,padding;
   transition-duration:3s;
   transition-timing-function:ease-out;
   transition-delay:0.5s;
 }
 .tran03Area span:hover
 {
   width: 500px;
   padding:10px;
 }

transition-timing-function

所謂、easing の指定を意味します。
結果、durationの指定秒数完了しますが、その中で動きの変化をつけることができます。
ここに指定できるのは以下の通りです。

1. ease:

   開始と完了を滑らかにする(初期値)

2. linear:

   開始と完了は一定

3. ease-in:

   ゆっくり始まる

4. ease-out:

   ゆっくり終わる

5. ease-in-out:

   ゆっくり始まってゆっくり終わる

6. cubic-bezier(数値, 数値, 数値, 数値):

   3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定
   なにいってだコイツ

めんどくさくなったのでソースは書きませんが。
まぁ、若干完了までの動作が違ってくるわけです。
cubic-bezier 説明がややこしかったですね
覚える気にもならねぇ。
いや、ごめんなさい。本音が。まぁ平たく言えばオリジナルeasing設定できまっせ！って事です。
各内容の話とかは各自で調べといてください。いい加減ですいません。
ジェネレーター
こんなのもあるのでまた必要なときにご活用ください。

transition-delay

アニメーション開始までの【待て】の秒数を指定します。
0Sで即時実行 5Sで5秒後に実行みたいな感じになります。

1行にまとめたい系

各プロパティを分けて色々書いてますが、こいつらも１行にまとめてペペッと書くことができます。

 .tran12Area span
 {
   display: inline-block;
   width: 300px;
   background-color: #0067A3;
   color:#FFF;
   padding: 6px;
   transition:width 1s ease-in 3s;
 }
 .tran03Area span:hover
 {
   width: 500px;
 }

指定順もきちんとあり transition:【property】 【duration】 【timing-function】 【delay】;
の順番での指定となります。
また、基本的に各プロパティは省略する事ができます。

transition-propertyの初期値

こいつはどのCSSプロパティが対象なの？って指定をしていました。
これを省略すると、対象プロパティの全てを対象にします。
比較は以下のデモを参照ください。

 .tran13Area span,
 .tran14Area span
 {
   display: inline-block;
   width: 300px;
   background-color: #0067A3;
   color:#FFF;
   padding: 6px;
 }

 .tran13Area span
 {
   transition:width 1s ease-in 3s;
 }
 .tran14Area span
 {
   transition:1s ease-in 3s;
 }

 .tran13Area span:hover,
 .tran14Area span:hover
 {
   width: 500px;
   padding:10px;
 }

transition-durationの初期値

これは0です。
アニメーションしないと同義になります。こは流石に省略する意味がないですね。
なので例もないです。

transition-timing-functionの初期値

これはeaseです。
まぁ、そのまんま・・・ですかね・・・

transition-delayの初期値

これは0です。
タメが無くなります。一番省略されるのはこの子なんだろうなと思ってたりもします。

指定方法の応用

プロパティバラバラ、1行まとめでもどっちにも言える事ですが
このプロパティはこうしたい 的なものがある時があります。
例えば、widthは3s paddingは5sかけたい的な
そんな場合は分けて書いてあげましょう
デモでは１行版のみでやってます。長ったらしく分けて書く意味が分かりません

 .tran15Area span
 {
   display: inline-block;
   width: 300px;
   background-color: #0067A3;
   color:#FFF;
   padding: 6px;
 }

 .tran15Area span
 {
   transition: width 3s ease 1s,padding 3s ease 2s;
 }

 .tran15Area span:hover
 {
   width: 500px;
   padding:10px;
 }

応用してみませう

デモはwidthとpaddingだけでなんか物足りない感じでしたが
少し応用してやってみようと思います。

ハンバーガーメニュー

よくあるハンバーガーメニューをいじいじしてみます。
各線に関してはspanでborderつける感じでやってます。
] で、その要素を動かせばOKなのですね
不格好なのは見逃してくだち！！

.tran16Area{
  display: block;
  width: 40px;
  border:1px #ddd solid;
  padding: 5px;
}
  .tran16Area span
  {
    border-top: 3px #000 solid;
    display: block;
    width: 30px;
    margin-top: 5px;
    transition: transform 0.5s ease 0s,opacity 0.5s ease 0s;
  }
  .tran16Area span:nth-of-type(1)
  {
    transform:rotate(0deg) translate(0px,0px);
    transform-origin: 0% 0%;
  }
  .tran16Area span:nth-of-type(2)
  {
    opacity: 1;
  }
  .tran16Area span:nth-of-type(3)
  {
    transform:rotate(0deg) translate(0px,0px);
    transform-origin: 0% 0%;
  }

  .tran16Area span:first-child
  {
    margin-top: 0px;
  }

  .tran16Area.open span
  {
    transition: transform 0.5s ease 0s,opacity 0.5s ease 0s;
  }
    .tran16Area.open span:nth-of-type(1)
    {
      transform:rotate(35deg) translate(2px, -2px);
    }
    .tran16Area.open span:nth-of-type(2)
    {
      opacity: 0;
    }
    .tran16Area.open span:nth-of-type(3)
    {
      transform:rotate(-35deg) translate(0px, 2px);
    }

マウスオーバーでぐるんぐるん

マウスオーバーでクルクル回転させてみましょうか。

.tran17Area{
  display: block;
  width: 40px;
  border:1px #ddd solid;
  padding: 5px;
}
  .tran17Area span
  {
    border-top: 3px #000 solid;
    display: block;
    width: 30px;
    margin-top: 5px;
    transition: transform 0.5s ease 0s,opacity 0.5s ease 0s;
  }

  .tran17Area span:first-child
  {
    margin-top: 0px;
  }    
  .tran17Area span:nth-of-type(1)
  {
    transform:rotate(0deg) translate(0px,0px);
    transform-origin: 0% 0%;
  }
  .tran17Area span:nth-of-type(2)
  {
    opacity: 1;
  }
  .tran17Area span:nth-of-type(3)
  {
    transform:rotate(0deg) translate(0px,0px);
    transform-origin: 0% 0%;
  }
  .tran17Area:hover
  {
    transition: transform 1s ease 0s;
    transform:rotateX(360deg);
    transform:rotateY(360deg);
  }

と適当にやっていたりしましたが
まずは
アニメーションさせたい要素に対して
transition: 何を？何秒？どんな感じに？何秒待つん？;
を指定して
要素にトリガーをつける→hoverだったり クラス付与だったり
ちなみに、クラス付与に関してはJSでしかできません。
クリックもね。共存して仲良くやりましょう。

animation

transitionのお話が長くなりました。
animationのお話をしませう。
基本的な所は一緒ですので、ある程度は短くなるかも

animationのプロパティ

大体はtransitionと変わりません。

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction

はい、animationで指定できるプロパティは上記6つ CSSのお作法通り、バラバラで指定もできますが、animationにまとめる事もできます。
まとめる時の順番は上記の通り、便利なんでひとまとめの方で覚えておきましょう。ｲﾋﾋ

animation-name

アニメーション名を指定します。
アニメーション名ってなんだよって感じですね。へへへ。
transitionではCSSプロパティ名を指定してやってましたがこいつはCSSプロパティをまとめて指定できる
そいでもって細かく指定ができる。って感じです。詳しくは後述！！！

animation-duration

こいつは 「何秒かけてアニメーションやんの？」の指定
1s 等基本単位は秒になります。

animation-timing-function

いわゆる「easing」の指定ですね。
基本指定内容はtransitionと一緒です。面倒なので同じことは書きません。

animation-delay

「開始までの待ち時間」
同じく秒単位で指定してあげましょう。

animation-iteration-count

「アニメーションの繰り返し回数」
新しいプロパティがやってきました。
そのままの意味、何回アニメーションしたいの？って指定です。
基本整数指定 infiniteを指定することで無限にアニメーションが動きます。

animation-direction

「アニメーションを交互に反転再生させるかどうかを指定する」
（ ＾ω＾）・・・？
このプロパティで指定できる値は２つ
normal：普通方向のアニメーションを繰り返す(デフォルト)
alternate:奇数回では普通方向の再生、偶数回では逆方向の再生になりアニメーションを繰り返す
ですって。まぁこの辺は正直実際見てみるのが早いですね。
追ってデモを確認しましょう。

animation-nameの指定について

一つの動きをまとめたアニメーションオブジェクトっぽいものを作ることから始めます。
こんな感じ

@keyframes anime1 
{
 0% {width: 50px; height: 50px; background-color: aqua;}
 100% {width: 200px; height: 50px; background-color: blue;}
}

では順番になにしてんの？って説明を

@keyframes

所謂 functuin() みたいな感じ、つまり只のCSS指定じゃないよ！！！
animationで使うやつだよ！って叫んでる所ですね

anime1

ここは名前部分です。
animation-nameプロパティでこいつを指定してあげます。

0% とか 100%とか

アニメーションの開始時点を0%とし、animation-durationの指定秒数を100%として計算されます
%の指定は多種多様好きな時に出来たりしますので、極端に言えば1%毎に指定しまくってもいいわけです。
animationが細かく指定できるってのはこの辺が由来してたりします。

animationを使ってみる会

早速ですが、簡単にやってみましょう。
今回もhover時に動作する感じで。

.ani1Area:hover{
  -moz-animation: ani1Animation 5s ease 0s infinite normal;
  -webkit-animation: ani1Animation 5s ease 0s infinite normal;
  -o-animation: ani1Animation 5s ease 0s infinite normal;
  -ms-animation: ani1Animation 5s ease 0s infinite normal;
}
@-moz-keyframes ani1Animation{
  0%{ width:310px; }
  10%{ width:400px; }
  40%{ height:50px; }
  70%{ width:200px; }
  100%{ width:600px; }
}
@-webkit-keyframes ani1Animation{
  0%{ width:310px; }
  10%{ width:400px; }
  40%{ height:50px; }
  70%{ width:200px; }
  100%{ width:600px; }
}
@-o-keyframes ani1Animation{
  0%{ width:310px; }
  10%{ width:400px; }
  40%{ height:50px; }
  70%{ width:200px; }
  100%{ width:600px; }
}
@-ms-keyframes ani1Animation{
  0%{ width:310px; }
  10%{ width:400px; }
  40%{ height:50px; }
  70%{ width:200px; }
  100%{ width:600px; }
}

意味不明に分割にしましたが、該当する所できちんと値はあたっていますね。
上記を少しいじって反転再生するように指定してみます。

.ani2Area:hover{
  -moz-animation: ani1Animation 5s ease 0s infinite alternate;
  -webkit-animation: ani1Animation 5s ease 0s infinite alternate;
  -o-animation: ani1Animation 5s ease 0s infinite alternate;
  -ms-animation: ani1Animation 5s ease 0s infinite alternate;
}

最初に指定したものは100%になってから初期値に戻ってやりなおすので、若干カクカクしてましたが
反転再生をONにすることによりスムーズに動いているのがわかります。
後、animation-name、使い回しできてるって気が付きましたか？
一つ作っておいて同じ動きしたい別要素なんかはこんな感じで使えば無駄ソースがなくなるのでいいですね