こんにちは、けーすけです。
ようやく一旦のリニューアルが済みそうでわくわくしています。
リニューアル作業、残すはカスタム投稿周りやパンくずなどの動作確認のみになってきました！
さて今回は、CSSのホバーアニメーションをいじってみたいと思います。
CSSには無限の可能性を感じてしまいますね！

今回作るホバーアニメーション

今回作成するのはこちら。
ホバーした際に、テキストの左側からカラフルなバーが出てきます。とっても簡単ですので参考にしてください。
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”vxPWZM” default_tab=”result” user=”Chankei”]See the Pen <a href=’http://codepen.io/Chankei/pen/vxPWZM/’>background maker</a> by Chankei (<a href=’http://codepen.io/Chankei’>@Chankei</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
 

CSSをみて見る

さて、今回の仕組みですがCSSを見るとわかります。

• a要素にafter要素を作って「 right : 100% 」で要素の左側に持ってきます。
• そして「 overflow: hidden; 」をかけてafter要素を隠します。
• hoverした時に、「 right : 0 」にすることでぬるっと出てきます。

たったの3ステップでできてしまいます。簡単ですね。
あれ？ぬるっと動かないよ？という方は、「  transition: o.4s;  」をafter要素につけてみてください。
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”vxPWZM” default_tab=”css,result” user=”Chankei”]See the Pen <a href=’http://codepen.io/Chankei/pen/vxPWZM/’>background maker</a> by Chankei (<a href=’http://codepen.io/Chankei’>@Chankei</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
 

まとめ

とっても簡単！でしたね。
今回はafter要素で行いました。もし、透過していない背景をしたい！という方はbefore要素を使ってみてください。きっとできます。
CSSで動かすのって楽しいですね、個人的にはCSSアニメーションが好きなのですがCodepenにいる猛者のようなことはさすがにできないですね。。
そういえば、WordPressにもマークダウンで記事をかけるようになるプラグインがあるらしく入れてみようとおもったのですが、せっかくなので自分で作ってみようと思います！
どうやってプラグインを作るか全く知りませんが、1つずつ調べながらやっていきたいと思います。( それよりもまずはリニューアル )
 
それではこの辺で、けーすけでした。