今見てくれてる人の数

ホンキートンク・スーダラブルース

ゆるコラム、oF、邦ロックや歌謡曲、小説の感想。ドラクエ、JavaScript、ドラゴンボール超など。湘南あたりを転がってる石コロのゆるゆる生きてく超雑多な軌跡です。

CSS3アニメーション入門以前!  transform,taransition,animationの違い

こんにちは、ちゃんいーです。

今回はCSS3のプロパティ、
transform, taransition, animationの違いをが

自分の中でごっちゃになっていたので簡単にまとめてみました。

 

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

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

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

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

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

という違いになります。

この、ホイミスライムみたいなクラゲ君を使用して確認して行きます。

 

f:id:sudara_bluse:20171019082901p:plain

 

1,transform(変形)

45度傾けてみます。

f:id:sudara_bluse:20171019082901p:plain

1.img{
2.transform:rotate(45deg);
3.-webkit-transform:rotate(45deg);
4.-moz-transform:rotate(45deg);
5.}

 

 

2,taransition(変遷)

hover(スマホだとタップ)すると、1秒間かけて45度傾きます。

f:id:sudara_bluse:20171019082901p:plain

01.img{
02.transition: all 1s linear;
03.-webkit-transition: all 1s linear;
04.-moz-transition: all 1s linear;
05.}
06.img:hover{
07.transform:rotate(45deg);
08.-webkit-transform:rotate(45deg);
09.-moz-transform:rotate(45deg);
10.}

 

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

hover(スマホだとタップ)すると、5秒間かけて、大きさが1.5倍になり、右に200px移動します。

f:id:sudara_bluse:20171019082901p:plain

01.@keyframes move{
02.0%{transform:scale(1.0);}
03.50%{transform:scale(1.5);}
04.100%{transform:scale(1.5);transform:translateX(200px);}
05.}
06.@-webkit-keyframes move{
07.0%{-webkit-transform:scale(1.0);}
08.50%{-webkit-transform:scale(1.5);}
09.100%{-webkit-transform:scale(1.5);-webkit-transform:translateX(200px);}
10.}
11.@-moz-keyframes move{
12.0%{-moz-transform:scale(1.0);}
13.50%{-moz-transform:scale(1.5);}
14.100%{-moz-transform:scale(1.5);-moz-transform:translateX(200px);}
15.}
16.img:hover {
17.animation:move 5s;
18.-webkit-animation:move 5s;
19.-moz-animation:move 5s;
20.}

いかがでしたでしょうか。

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

 

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

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

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

 

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

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


2Q==

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

 

イージングなど詳しいところはこち等で。

www.flapism.jp