【備忘録】CSS3のtransitionの使い方

 

 Web技術

ごくまれに
「カーソルを乗せた時に画像を回転させたい」
などの指定があったりします。

JSで書くのも正直めんどくさい…w
そんな時に手軽にCSSでアニメーションができる
「transitionプロパティ」があります。

transitionプロパティは何となく使っていたのですが
正直詳しくは理解していなかった(オイ)ので勉強をかねて書いておきます。

今回は:hoverでの動きで割と使いそうな記述をメモしておこうかと。
↓の画像を動かしてみます。

ちなみにtransitionプロパティは:hoverなどが必要だそうです。
自動では動かないということですね。

transitionの記述の仕方

一括指定
要素 {
 transition: プロパティ 完了時間 開始時間(遅延) イージング関数;
}

個別指定
要素 {
 transition-property: プロパティ;
 transition-duration: 完了時間;
 transition-delay: 開始時間(遅延);
 transition-timing-function: イージング関数;
}

※「イージング関数」に関しては今回は省きます。

動かしてみる

横に移動させる

ホバーすると0.5秒かけて右に50px動く

CSS

もしくは

背景の色を変える

ホバーすると2秒後に0.5秒かけて背景色を変える

CSS

回転させる

ホバーすると2秒かけて180度回転する

CSS

拡大&回転させる(複合)

ホバーすると360度回転(2秒)しながら幅400pxに拡大(2秒)する

CSS

複数の場合「,」で区切ります。

横に移動させ背景の色を変え回転しながら拡大させる(複合)

今までの全部乗せ的な

CSS

 

う~ん…
いろいろやっておいて何ですが
思ったことは

Webサイトはまず動きよりも
コンテンツ内容の充実
を図りましょう…w

 この記事の投稿者

taka

Webサイト作ってます。
最近のモットー「決して無理をしないスタイル」

twitter: @taka_sbs

  • このエントリーをはてなブックマークに追加
  • 0 follow us in feedly

メッセージ

入力エリアすべてが必須項目です。
メールアドレスが公開されることはありません。

*コメント

*名前

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

ページ最上部へ