こんにちは、三橋です。

今回はcss3の新プロパティ、 transform,taransition,animationの違いを簡単にまとめてみました。

変形や、アニメーションに使用するプロパティ達です。

日本語に訳すとわかりやすいのですが、

transform 、、、、、、変形(傾けたり、拡大縮小)

taransition 、、、、、、変遷(時間をかけて状態変わる)

animation 、、、、、、Flashのような細かいアニメーション

という違いになります。

この、ステゴザウルスくんを使用して確認して行きます。

1,transform(変形)

45度傾けてみます。

img{
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
}

2,taransition(変遷)

hoverすると、1秒間かけて45度傾きます。

img{
    transition: all 1s linear;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
}
img:hover{
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
}

3,animation(アニメーション)

hoverすると、5秒間かけて、大きさが1.5倍になり、右に200px移動します。

@keyframes move{
0%{transform:scale(1.0);}
50%{transform:scale(1.5);}
100%{transform:scale(1.5);transform:translateX(200px);}
}
@-webkit-keyframes move{
0%{-webkit-transform:scale(1.0);}
50%{-webkit-transform:scale(1.5);}
100%{-webkit-transform:scale(1.5);-webkit-transform:translateX(200px);}
}
@-moz-keyframes move{
0%{-moz-transform:scale(1.0);}
50%{-moz-transform:scale(1.5);}
100%{-moz-transform:scale(1.5);-moz-transform:translateX(200px);}
}
img:hover {
      animation:move 5s;
      -webkit-animation:move 5s;
      -moz-animation:move 5s;
}

いかがでしたでしょうか。私を含め、何となく認識がごっちゃになってる方も多いのではないでしょうか。

transform 、、、、、、変形(傾けたり、拡大縮小)

taransition 、、、、、、変遷(時間をかけて状態遷移)

animation 、、、、、、Flashのような細かいアニメーション

となります。それではまた〜

参考図書：よくわかるHTML5+CSS3の教科書

基礎の基礎からcss3アニメまでわかりやすく学べる、HTML5/CSS3に入門する方におすすめな一冊です。