【授業メモ】CSS3 変形アニメーション

CSS3 変形アニメーション

 

■transform(変形)

二次元での移動、拡大縮小、回転

 

・translate:二次元での移動

transform: translate(x軸方向の移動距離,ｙ軸方向の移動距離)　※間のカンマ忘れず！

.one {

  background: pink;

  transform: translate(300px,0)

}

 

・scale:二次元での拡大縮小

transform: scale(x軸方向の倍率,ｙ軸方向の倍率)　※間のカンマ忘れず！

.two {

  background: yellow;

  transform: scale(1.5,1.5);

}

 

・rotate:二次元での回転

transform: rotate(角度deg) ※「度」＝deg

.three {

  background: orange;

  transform: rotate(45deg);

}

 

 

■transition(動作を加えるとはじまるアニメーション）

CSS3で出来るアニメーションには二種類ある。

普通のいわゆるアニメーションは、何もしなくても勝手に始まるアニメーション

こちらのアニメーションは、hoverやク     リックなど、きっかけを与えるとはじまるアニメーション。

 

transform:

transition:1s;

transformで変化の指示をしたあとに、toransitionでその変化にかかるまでの秒数を指定する

 

数値で指定するものならなんでもできる！

・border-radiusで丸くする

・rgbで色を変える

・rgba　0→1で出現させる

・opacityでじんわり文字を消したり出したり

・画像をhoverしたらキャプションが出てくるとか・・・・・

とにかく工夫次第で色々な変化を加えられる！！！！！

 

例）1秒かけて、元の場所から300　200動かす

.box {

  width: 200px;

  height: 200px;

  margin-bottom: 20px;

}

 

.one {

  background: pink;

}

one:hover {

  transform: translate(300px,200px);

  transition: 1s;

}

 

 

 すごい！！！アニメーションってすごく難しいと思ってたけど・・・工夫次第で今風のおしゃれな動きとかもできそうです！！！！