乱雑モックアップ   らんざつ[乱雑] （名・形動）[文]ナリ 入り乱れていること。乱れていて秩序がないこと。また、そのさま。

animationとtransitionがcss3のアニメーション用プロパティで
transformは変形用のプロパティ、2Dと3Dは別なのか?一緒なのか?
とりあえずこの3つが頭の中でホットケーキになっちゃうくらいこんがらがっちゃってるので練習。
tで始まるのが多すぎるんだ。

animations

animationプロパティの特徴とか感じた事とか

• ループ出来る。
• keyframesを使って細かい設定が出来る。
• hoverで動かすとマウスが外れた時すぐに初期状態に戻るのが格好悪い。
• なのでループでずっと動かしているか、javascriptと絡めたりした方がいいのかな？と思ったり

animation使用例

webkit系のブラウザのみ動作します。

ほら、マウスが外れた瞬間ガチっと初期位置にもどるのが格好悪いでしょう？

html

  <div class="ani1 example">
    <ul>
      <li class="ease">ease</li>
      <li class="linear">linear</li>
      <li class="ease-in">ease-in</li>
      <li class="ease-out">ease-out</li>
      <li class="ease-in-out">ease-in-out</li>
    </ul>
  </div>

css

/*キーフレームはアニメーションの設計図みたいなものだと思ってます*/
@-webkit-keyframes 'ani1' {
0% {
-webkit-transform: translate(0, 0);
}
25% {
-webkit-transform: translate(75%, 100%);
}
50% {
-webkit-transform: translate(50%, 50%);
}
75% {
-webkit-transform: translate(25%, 100%);
}
100% {
-webkit-transform: translate(100%, 0%);
}
}

.ani1:hover li {
  -webkit-animation-name: 'ani1'; /*キーフレームを指定*/
  -webkit-animation-duration: 1s; /*処理にかかる時間、単位はs、これは1秒*/
  -webkit-animation-direction:alternate; /*偶数回時に逆再生させる*/
  -webkit-animation-iteration-count: infinite; /*ループ回数の指定、これは無限*/
}

/*animationのイージング*/
.ani1 li.ease {
  -webkit-animation-timing-function: ease;/*イージングの種類*/
}
.ani1 li.linear {
  -webkit-animation-timing-function: linear;/*イージングの種類*/
}
.ani1 li.ease-in {
  -webkit-animation-timing-function: ease-in;/*イージングの種類*/
}
.ani1 li.ease-out {
  -webkit-animationn-timing-function: ease-out;/*イージングの種類*/
}
.ani1 li.ease-in-out {
  -webkit-animation-timing-function: ease-in-out;/*イージングの種類*/
}

animation-timing-functionはkeyframesの中でも指定できたり色んなところに記述できる？

ショートハンドを使ってみる

CSS Animations Module Level 3を参照すると以下の記述でショートハンドになるそうな。

[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*

読み方(w3cが解説に使う記号の意味)がイマイチわかってないけど、.ani1:hover liの指定をショートハンドで書き直すとこんな感じ？
[]内の値が順番関係なしで重複しなければok？
でもそしたらdurationとdelayの区別はどうやってつけてるんだ？先に登場するほうがdurationなのかな。

.ani1:hover li {
-webkit-animation:'ani1' 1s infinite alternate;
}

動作確認

transitions

transitionプロパティの特徴とか感じた事とか

• ループさせられない。
• 変更前と変更後の2つをいったり来たりするので手軽に動きのあるロールオーバーメニューが作れる
• これ好きだな。

transition使用例

html

  <div class="tra1 example">
    <ul>
      <li class="ease">ease</li>
      <li class="linear">linear</li>
      <li class="ease-in">ease-in</li>
      <li class="ease-out">ease-out</li>
      <li class="ease-in-out">ease-in-out</li>
    </ul>
  </div>

css

.tra1 li {
  -webkit-transition-duration: 1s;
}
.tra1:hover li {
  -webkit-transform: translate(100%, 0);
}

/*transitionのイージング*/
.tra1 li.ease {
  -webkit-transition-timing-function: ease;
}
.tra1 li.linear {
  -webkit-transition-timing-function: linear;
}
.tra1 li.ease-in {
  -webkit-transition-timing-function: ease-in;
}
.tra1 li.ease-out {
  -webkit-transition-timing-function: ease-out;
}
.tra1 li.ease-in-out {
  -webkit-transition-timing-function: ease-in-out;
}

ショートハンド

animationsと同じでtransitionsのページを参考に
CSS Transitions Module Level 3

<p>[<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’> [, [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’>]]*</p>

この例だと特に使う必要がないけどこんな感じ？

.tra1 li {
  -webkit-transition: 1s;
}
.tra1:hover li {
  -webkit-transform: translate(100%, 0);
}
/*transitionのイージング*/
.tra1 .ease {
  -webkit-transition-timing-function: ease;
}
.tra1 .linear {
  -webkit-transition-timing-function: linear;
}
.tra1 .ease-in {
  -webkit-transition-timing-function: ease-in;
}
.tra1 .ease-out {
  -webkit-transition-timing-function: ease-out;
}
.tra1 .ease-in-out {
  -webkit-transition-timing-function: ease-in-out;
}

durationがないと上手く動かないな。

もしくはこんな感じ？

.tra1:hover li {
  -webkit-transform: translate(100%, 0);
}
/*transitionのイージング*/
.tra1 li.ease {
  -webkit-transition:1s ease;
}
.tra1 li.linear {
  -webkit-transition:1s linear;
}
.tra1 li.ease-in {
  -webkit-transition:1s ease-in;
}
.tra1 li.ease-out {
  -webkit-transition:1s ease-out;
}
.tra1 li.ease-in-out {
  -webkit-transition:1s ease-in-out;
}

もう少しシンプルな書き方が出来そうだけどなぁ。

transform

animationのkeyframesやtransitionの中で出てきたtransformは要素を変形させるプロパティでFirefoxも3.1から対応してるんですって(-moz-が必要)
参考 / CSS3大接近：第3回　transformプロパティ｜gihyo.jp
skew(ゆがみ)とかscale(拡大)とかrotate(回転)とかあってtransalteは移動。

translate(x座標, y座標)

機能	移動
初期値	0
値	ポジティブ，ネガティブどちらも可 ・％ ・相対値(emなど)，絶対値（pxなど）
適用できる要素	・ブロックレベル要素 ・インラインレベル要素
継承	なし（親要素に指定しても子要素に継承されません）
記述例	Firefox3.1betaの場合： ・-moz-transoform:translate(xxdeg); ・-moz-transoform:translateX(xxdeg); ・-moz-transoform:translateY(xxdeg); Webkit系（Safari3.1，Webkit,Google chromeの場合： ・-webkit-transform:translate(xxdeg); ・-webkit-transoform:translateX(xxdeg); ・-webkit-transoform:translateY(xxdeg);

参考

CSS Animations Module Level 3
CSS Transitions Module Level 3

CSS 2D Transforms Module Level 3
CSS 3D Transforms Module Level 3

しかし毎日暑いですねぇ…