Blog本サイトはJavaScriptが有効の状態にないと正常に表示されません。このメッセージが表示される場合、ブラウザの設定状況をご確認ください。長野県を拠点に活動するフリーランスのグラフィック&WebデザイナーのWebサイトです。ホバーエフェクトCSSでマウスホバーエフェクトといえばtransitionプロパティを使ってアニメーションさせることが多いと思いますが、少し複雑なアニメーションをさせたい時はtransitionでは難しいことがあると思います。そんな時は、hover疑似クラスと合わせてanimationプロパティを使い、@keyframesでうまいことやるといい感じにすることができるので、個人的にはよく使っているのですが、animationプロパティでは、マウスアウト時にアニメーションが行われず、瞬時に元の位置へ戻ってしまい、少し不格好になってしまうのが悩みの種でした。これを何とかしたくて色々やってみた結果、すごくシンプルな方法ですが、animationプロパティでもマウスアウト時にアニメーションさせることができたので、簡単にご紹介します。マウスアウト時の挙動とりあえず、それぞれのマウスアウト時の挙動を確認します。transitionプロパティの場合transitionプロパティでホバーアニメーションをさせた場合、対象の要素からマウスアウトすると、アニメーションしながら元の位置へ戻ります。マウスホバー、マウスアウト両方でアニメーションするCSSは以下の通り(抜粋です)。translateX(200px);}animationプロパティの場合animationプロパティを使用した場合は、対象の要素からマウスアウトした後はアニメーションは行われず、瞬時に元の位置へ戻ってしまいます。animationでのホバーエフェクトは、hover擬似クラスにanimationプロパティを指定します。マウスアウト時にはアニメーションしないCSSは以下の通り(抜粋です)。translateX(200px);}}animationプロパティの場合、animation-fill-modeでアニメーション実行後のスタイルを指定することができますが、これはあくまでもアニメーションが終了した直後のスタイルを指示するだけで、マウスアウト時のスタイルを指定することはできません。上記では、forwardsを指定し、最後に適用したキーフレームの値を維持させるようにしています。上記のような簡単なマウスホバーエフェクトであれば、transitionでも十分ですが、複雑なアニメーションをさせるような場合には、やはりanimationプロパティが必要で、その場合、マウスアウト時のアニメーションは諦めるしかありませんでした。animationプロパティでもマウスアウト時にアニメーションさせる前置きが長くなってしまいましたが、ここからが本題です。animationプロパティでマウスアウト時にアニメーションさせるには、逆再生(巻き戻し)用のkeyframesを別で用意して、元の要素にもanimationプロパティを指定することで実現できます。実際にanimationプロパティを使って、マウスアウト時にもアニメーションを付与させたものが以下です。マウスホバー、マウスアウト両方でアニメーションするCSSは以下のような感じになります(抜粋です)。いうクラスの通常時とホバー時に、それぞれ別々のkeyframesを指定しています。上記の方法を使うと、以下のようなtransitionではできない、少し複雑なホバーエフェクトができるようになります。上記の方法で、一応は解決はしたんですが、これを使った場合に2点ほど気になる点が出てきました。1つは、通常時の要素にanimationプロパティを指定しているため、ページロード時に必ず一度だけそのアニメーションが実行されてしまうという点と、もう一つはアニメーションの途中でマウスアウトすると挙動がおかしくなるという2点です。前者は、対象の要素が見える位置でリロードしてみるとよく分かるんですが、ページが表示されるタイミングで、巻き戻し用のアニメーションが実行されてしまいます。これを防ぐことは(多分)できないんですが、durationの長さに合わせて、ページロードから2秒間だけとかローディング画像的なものを表示させるようにすれば、不自然には見えないんじゃないかなと思っています。前者の場合は、アバブ・ザ・フォールドに対象の要素がなければ、見えないところで勝手にアニメーションが実行されるだけなので、そこまで気にならないかもしれません。移動系のアニメーションの時は注意する必要があるかもしれませんが(ネタバレ注意的な意味で)。後者についてはもうどうしようもできないので、せめて途中でマウスアウトされないように、印象的かつ効果的なアニメーションの作成を心がけるしかないかなと思います。おわり気になる点については、JavaScriptを使えば何とかなるかもしれませんし、そもそもアニメーションはJSでやればいいと言われればそれまでなんですけど、個人的に、マウスのホバーエフェクトでJSは使いたくない派なので、この方法は結構気に入っています。CodePenに上記全てのDEMOを掲載していますので、コードについての詳細はそちらをご覧ください。MonSVGでハンドライティングアニメーションを実装する文字を書き順通りに徐々にアニメーションさせて描画する「ハンドライティングアニメーション」をSVGで実装する方法。同じようなことをやっていて、それのSVGバージョン。正確には「バブリング」とは呼ばないと思うし、ちょっと意味合いが違うかもしれないけど、CSSで子要素に与えたtransitionが親要素へ伝播し、アニメーションの挙動をおかしくさせる現象に何度か遭遇した。vol.7」に参加および登壇させていただきました。感は否めませんが、Webデザイナーとして、WordPressの開発環境にVCCWを...ABOUT長野県北部を拠点にフリーランスとして活動しています。Webサイトの制作をメインに、グラフィックデザインなどの制作も行っています。ARCHIVES2017年6月2017年4月2017年3月2017年1月2016年12月2016年9月2016年8月2016年7月2016年4月2016年3月2015年12月2015年10月2015年9月2015年6月2015年5月2015年3月2015年2月2015年1月2014年12月2014年11月2014年10月2014年9月2014年8月2014年6月2014年5月2014年4月2014年3。