マウスを乗せたときと外したときでtransitionの内容を変える方法

CSS3で追加されたtransitionはホバー時の変化に動きを付けてくれるプロパティですが、マウスを乗せたときと外したときで変化の仕方を変えることができます。

trantion-hover-tittle.png

以前、「CSSで画像リンクにマウスを乗せたときの動きを考えてみた」という記事の中で、擬似要素を作った半透明のボックスが左から右へすり抜けることで光っているような感じにしたものを紹介しました。

ここで紹介したサンプルではマウスを外したときに右にいったボックスが左に戻るわけですが、光るのはマウスを乗せたときだけの方がいいと思います。

当時はいい方法が思いつかなかったのですが、方法が思いついたので紹介します。

まず、そのときに紹介したのが下になります。

で、戻ってこないようにしたものが下になります。

マウスを外したときにtransitionさせないようにするには

a {transition: 1s;}と指定した場合はマウスを乗せたときも外したときもtransitionは適用されますが、a:hover {transition: 1s;}と指定した場合はマウスを乗せたときだけしかtransitionは適用されません。

a { transition: 1s; } a:hover { transition: 1s; }

右側はマウスを外した瞬間に元に戻りますね。

この仕組みを利用したわけです。hover側にtransitionを指定するという考えがなかったので当時は考えつきませんでした。

:hover有り無し両方に指定

では、:hover有り無しの両方でtransitionを指定した場合はどのようになるのか。下のリンクにマウスを乗せてみてください。

a { transition: 1s; } と a:hover { transition: 3s; }

これは、a {transition: 1s;}a:hover {transition: 3s;}という風に指定しています。この場合、マウスを乗せたときは3秒かけて変化し、マウスを外したときは1秒かけて元に戻ります。

ということで:hover有り無しの両方で「transition」を指定した場合、以下のようなことがいえます。

  • :hoverなしはマウスを外したとき
  • :hoverありはマウスを乗せたとき

反対ではないかと思われる方もいるかもしれませんが、:hoverありがマウスを乗せたときになります。

CSSで作ったドロップダウンメニューのドロップの動きいろいろ」という記事で最後に紹介したパタパタ開閉するメニューはこの方法を使っています。

それを簡単にしたものを下に用意しました。Chrome、Firefox、IE10以上が対応しています。

マウスを乗せると上から開いて、マウスを外すと下から閉じます。transition関係だけ取り出すとCSSはこんな感じになります。

ul li ul li{
  transition: .2s;
}
ul li:hover ul li:nth-child(1) {
  transition-delay: 0s;
}
ul li:hover ul li:nth-child(2) {
  transition-delay: .2s;
}
ul li ul li:nth-last-of-type(1) {
  transition-delay: 0s;
}
ul li ul li:nth-last-of-type(2) {
  transition-delay: .2s;
}

transition-delayの値を、リストの順番やマウスを乗せたとき外したときで変えています。

さいごに

ということで、マウスを乗せたときと外したときで違うようにtransitionさせる方法を紹介しました。

擬似要素や:nth-child(n) などと組み合わせると複雑なアニメーションも可能になりますので、色々と面白いものが作れそうです。

意外と知らなかった人もいるのではと思ったので記事にしてみました。お役に立てばうれしいです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
はじめまして。
コメントを書くのは初めてなのですが、一つ気になったことがあったので…。

写真の右からゆっくりhoverすると、右端に白いボックスが残ることがあるようです。
何回かに一回の割合なので気にしなくてもいいのかもですが、最初にhoverしたときにたまたまその状態になり、「なんか白いものが…」と気になったので…。
以前の記事と今回の記事の両方で確認できました。
頻度としては以前の記事の方が少しだけ発生する確率が高かったように思います。
(こちらの環境はMac OS、Safariです。)

とりいそぎ、ご報告まで。
【2015/03/20 14:08】 | kagome #NqNw5XB. | [edit]
kagome さん

はじめまして。

こちらでも確認はしてみましたが
環境が違うためか仰られるような症状はみられませんでした。

しかし、環境によっては問題のある状態ですので、
使う際は注意が必要ですね。

ご指摘ありがとうございました。
これからもよろしくお願いします!
【2015/03/22 06:55】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加