border-radiusやbox-shadow、transitionなど、PCサイトでもCSS3を使うことは徐々に増えてきました。

今回は、そんなCSS3を使ってアニメーションをしているサイトで、

ちょっとひと味違う感じのサイトを集めてみました。

 

Georgina Bousia | Architect and Graphic Designer

 

メインビジュアルに使われている、微かに白がかった菱形がゆっくり移動するアニメーションがcss3によって実装されています。
ナビゲーションにbefore疑似要素でつけられた伸び縮みするアンダーラインも面白いです。

 

Wellness｜New Balance Japan

 

メインビジュアルの動画もインパクトがありますが、コンテンツへのリンクをマウスでホバーしたときの画像の拡大と、変形が面白いです。

 

TRIP(トリップ)：観光･体験商品の売買プラットフォーム

メインビジュアルのテキスト部分がスライダーと連動してアニメーションしています。
この部分と下のコンテンツ画像はマウスでホバーすると拡大されます。

ホバーすると画像が拡大されるアニメーションの使われたサイトが増えてきている印象を感じました。