【備忘録】CSS3のtransitionの使い方
ごくまれに
「カーソルを乗せた時に画像を回転させたい」
などの指定があったりします。
JSで書くのも正直めんどくさい…w
そんな時に手軽にCSSでアニメーションができる
「transitionプロパティ」があります。
transitionプロパティは何となく使っていたのですが
正直詳しくは理解していなかった（ｵｲ）ので勉強をかねて書いておきます。
今回は:hoverでの動きで割と使いそうな記述をメモしておこうかと。
↓の画像を動かしてみます。
ちなみにtransitionプロパティは:hoverなどが必要だそうです。
自動では動かないということですね。
transitionの記述の仕方
一括指定
要素 {
transition: プロパティ 完了時間 開始時間（遅延） イージング関数;
}
個別指定
要素 {
transition-property: プロパティ;
transition-duration: 完了時間;
transition-delay: 開始時間（遅延）;
transition-timing-function: イージング関数;
}
※「イージング関数」に関しては今回は省きます。
動かしてみる
横に移動させる
ホバーすると0.5秒かけて右に50px動く
CSS
|
1 2 3 4 5 6 7 |
img { transition: margin-left 0.5s; } img:hover { margin-left: 50px; } |
もしくは
|
1 2 3 4 5 6 7 8 9 |
img { position: relative; left: 0; transition: left 0.5s; } img:hover { left: 50px; } |
背景の色を変える
ホバーすると2秒後に0.5秒かけて背景色を変える
CSS
|
1 2 3 4 5 6 7 8 |
img { background-color: #1A60BF; transition: 0.5s 2s; } img:hover { background-color: #D0E2FB; } |
回転させる
ホバーすると2秒かけて180度回転する
CSS
|
1 2 3 4 5 6 7 |
img { transition: transform 2s; } img:hover { transform: rotate(180deg); } |
拡大&回転させる（複合）
ホバーすると360度回転（2秒）しながら幅400pxに拡大（2秒）する
CSS
複数の場合「,」で区切ります。
|
1 2 3 4 5 6 7 8 9 10 |
img { transition: transform 2s, width 2s, height 2s; } img:hover { transform: rotate(360deg); width: 400px; height: auto; } |
横に移動させ背景の色を変え回転しながら拡大させる（複合）
今までの全部乗せ的な
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
img { position: relative; left: 0; background-color: #0000FF; transition: left 0.5s, background-color 2s, transform 2s, width 2s, height 2s; } img:hover { left: 50px; background-color: #de4d4d; transform: rotate(360deg); width: 400px; height: auto; } |
う～ん…
いろいろやっておいて何ですが
思ったことは
Webサイトはまず動きよりも
コンテンツ内容の充実
を図りましょう…w
この記事の投稿者
