イケテルオリジナルマウスオーバーCSS3アニメーション

CSS3の力は尋常では無く、本当にすごいことばかりです。今回のチュートリアルではそのCSS3の巨大な力を、非常にクリエイティブな方法で「いい意味で」悪用する方法をご紹介したいと思います。早速ですが、今回は何種類かのサムネイル・ホバー効果をCSS3のトランジッションを使って表現していきます。色んなスタイルを使用し、それぞれのサンプルでサムネイルをホバーすると、予期せぬ効果が現れるようなものを作っていきます。

※CSS3のプロパティをサポートしているブラウザでのみ正常に機能しますのでご留意ください。

HTMLマークアップ

HTMLマークアップの構造は非常にシンプルで直感的で、画像とその他全ての情報を囲い込むコンテナを作成しています。

viewクラスの中に、maskクラスを含んだ要素を含有しています。このmaskクラスはCSS3で実現させる効果を担うものであり、更にその中にタイトル（H2）や詳細、フルサイズ画像へのリンクといったコンテンツを含有しています。（幾つかのサンプルでは、詳細をDIVタグのcontentクラスで囲み、mask要素は別の要素として機能させています。）

<div class="view">
     <img src="image.gif" />
     <div class="mask">
     <h2>Title</h2>
     <p>Your Text</p>
         <a href="#" class="info">Read More</a>
     </div>
</div>

CSSスタイリング

HTMLマークアップが済んだら、スタイリングに移りましょう。
まずは一般的な設定をクラスに施し、それから目的に応じて個別に特別な設定をしていきたいと思います。CSS3のベンダープレフィックスは省略していますのでご注意くださいね。

.view {
    width: 300px;
    height: 200px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}

それでは１０個の個別設定を見ていきましょう！

Demo 1

こちらの効果には、viewに加えてview-firstというスペシャルクラスも追加しています。今後もそれぞれのデモに、view-secondだとかview-thirdだとかスペシャルクラスを追加していきます。

<div class="view view-first">
</div>

こちらの1つ目のデモでは、いい感じのホバー効果を演出するために基本的なトランジッションを幾つか加えています。

.view-first img {
    transition: all 0.2s linear;
}
.view-first .mask {
    opacity: 0;
    background-color: rgba(219,127,8, 0.7);
    transition: all 0.4s ease-in-out;
}
.view-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.view-first p {
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
}
.view-first a.info{
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

ではここから効果の心臓部に入っていきます。今回のデモでは画像の上にマウスオーバーさせた時、delayプロパティを使って簡単なアニメーションをエミュレートさせています。このhover疑似クラスで使用しているtransition-delay（時間的変化開始の遅延）プロパティは、ノーマルクラスのものとは異なり変更が可能です。今回はノーマルクラスでは設定しておりませんが、hover疑似クラスには適用させています。こうすると、ほんの少しスタートを遅らせることが出来ます。マウスを画像から外すと、デフォルト値の「０」がすぐに適用されるため「元に戻る」のはあっという間です。

.view-first:hover img {
    transform: scale(1.1);
}
.view-first:hover .mask {
    opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
    opacity: 1;
    transform: translateY(0px);
}
.view-first:hover p {
    transition-delay: 0.1s;
}
.view-first:hover a.info {
    transition-delay: 0.2s;
}

Demo 2

２つ目のデモではスペシャルクラスのview-secondを追加しています。そして今回はmaskクラスの中は空っぽのままにして、contentクラスでその他の要素を含有させています。

<div class="view view-second">
    <img src="images/5.jpg" />
    <div class="mask"></div>
    <div class="content">
        <h2>Hover Style #2</h2>
        <p>Some description</p>
        <a href="#" class="info">Read More</a>
    </div>
</div>

ここでのmaskクラスは、今回のスペシャル効果を実現させるために別の属性を持たせています。どういうことかと言うと、transformプロパティ（translate（移動）とrotate（回転））を適用させ枠外で正方形を作っています。そしてホバー時にスライドインしてくるように、タイトル等のコンテンツもtranslate（移動）を使ってこの時点では枠外に出してしまっています。

.view-second img {
    transition: all 0.2s ease-in;
}
.view-second .mask {
    background-color: rgba(115,146,184, 0.7);
    width: 300px;
    padding: 60px;
    height: 300px;
    opacity: 0;
    transform: translate(265px, 145px) rotate(45deg);
    transition: all 0.2s ease-in-out;
}
.view-second h2 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: translate(200px, -200px);
    transition: all 0.2s ease-in-out;
}
.view-second p {
    transform: translate(-200px, 200px);
    transition: all 0.2s ease-in-out;
}
.view-second a.info {
    transform: translate(0px, 100px);
    transition: all 0.2s 0.1s ease-in-out;
}

次に、ホバー時に各要素を従来の配置場所まで移動させる為に、ここでもtransformプロパティでtranslate（移動）を適用させています。mask部分にはrotate（回転）も加えていますね。コンテンツの各要素は少しずつ時間差でスライドインしてくるように、遅延も加えています。

.view-second:hover .mask {
    opacity:1;
    transform: translate(-80px, -125px) rotate(45deg);
}
.view-second:hover h2 {
    transform: translate(0px,0px);
    transition-delay: 0.3s;
}
.view-second:hover p {
    transform: translate(0px,0px);
    transition-delay: 0.4s;
}
.view-second:hover a.info {
    transform: translate(0px,0px);
    transition-delay: 0.5s;
}

Demo 3

３つ目のデモでは、transformプロパティのtranslate（移動）とrotate（回転）を使って、コンテンツを引っ張り込んでいます。

.view-third img {
    transition: all 0.2s ease-in;
}
.view-third .mask {
    background-color: rgba(0,0,0,0.6);
    opacity: 0;
    transform: translate(460px, -100px) rotate(180deg);
    transition: all 0.2s 0.4s ease-in-out;
}
.view-third h2{
    transform: translateY(-100px);
    transition: all 0.2s ease-in-out;
}
.view-third p {
    transform: translateX(300px) rotate(90deg);
    transition: all 0.2s ease-in-out;
}
.view-third a.info {
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out;
}

ここの部分はホバー時の簡単な説明です。transition-delay（遅延）プロパティを上手に使って、コンテンツの要素を今までとは反対の順番でスライドインさせています。

.view-third:hover .mask {
    opacity:1;
    transition-delay: 0s;
    transform: translate(0px, 0px);
}
.view-third:hover h2 {
    transform: translateY(0px);
    transition-delay: 0.5s;
}
.view-third:hover p {
    transform: translateX(0px) rotate(0deg);
    transition-delay: 0.4s;
}
.view-third:hover a.info {
    transform: translateY(0px);
    transition-delay: 0.3s;
}

Demo 4

４つ目のデモでは、画像に回転を加えながらシンプルにズームイン、ズームアウトさせています。全てtransformプロパティのscale（拡大）のおかげです。画像に対してtransition-delay（遅延）を０．２秒で設定していますが、ホバー時は０秒です。こうすることにより、ホバー時にはすぐさま変化し、マウスアウト時には少しゆっくり変化し始めるようになります。

.view-fourth img {
    transition: all 0.4s ease-in-out 0.2s;
    opacity: 1;
}
.view-fourth .mask {
    background-color: rgba(0,0,0,0.8);
    opacity: 0;
    transform: scale(0) rotate(-180deg);
    transition: all 0.4s ease-in;
    border-radius: 0px;
}
.view-fourth h2{
    opacity: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transition: all 0.5s ease-in-out;
}
.view-fourth p {
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.view-fourth a.info {
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

ここからは効果実現のためのコードです。CSS3を使えば何でも出来ちゃいますね。

.view-fourth:hover .mask {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition-delay: 0.2s;
}
.view-fourth:hover img    {
    transform: scale(0);
    opacity: 0;
    transition-delay: 0s;
}
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info{
    opacity: 1;
    transition-delay: 0.5s;
}

Demo 5

５つ目のデモではtransition-timing-functionプロパティのease-in-outと一緒にtranslateプロパティを使って、コンテンツを左からスライドインさせています。

.view-fifth img {
    transition: all 0.3s ease-in-out;
}
.view-fifth .mask {
    background-color: rgba(146,96,91,0.3);
    transform: translateX(-300px);
    opacity: 1;
    transition: all 0.4s ease-in-out;
}
.view-fifth h2{
    background: rgba(255, 255, 255, 0.5);
    color: #000;
    box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-fifth p{
    opacity: 0;
    color: #333;
    transition: all 0.2s linear;
}

ホバーすると画像を右側に移動させ、コンテンツを左からスライドインさせて画像を押しのけているように見えるはずです。

.view-fifth:hover .mask {
    transform: translateX(0px);
}
.view-fifth:hover img {
    transform: translateX(300px);
    transition-delay: 0.1s;
}
.view-fifth:hover p{
    opacity: 1;
    transition-delay: 0.4s;
}

Demo 6

６つ目のデモでは、コンテンツを前方に浮き出た状態から本来のサイズまでズームアウト（１０から１へ縮小）させています。infoボタンはtranslateを使って下からスライドインさせています。

.view-sixth img {
    transition: all 0.4s ease-in-out 0.5s;
}
.view-sixth .mask{
    background-color: rgba(146,96,91,0.5);
    opacity:0;
    transition: all 0.3s ease-in 0.4s;
}
.view-sixth h2{
    opacity:0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: scale(10);
    transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth p {
    opacity:0;
    transform: scale(10);
    transition: all 0.3s ease-in-out 0.2s;
}
.view-sixth a.info {
    opacity:0;
    transform: translateY(100px);
    transition: all 0.3s ease-in-out 0.1s;
}

元に戻る時は、スムーズに見えるように遅延設定を調整します。

.view-sixth:hover .mask {
    opacity:1;
    transition-delay: 0s;
}
.view-sixth:hover img {
    transition-delay: 0s;
}
.view-sixth:hover h2 {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.1s;
}
.view-sixth:hover p {
    opacity:1;
    transform: scale(1);
    transition-delay: 0.2s;
}
.view-sixth:hover a.info {
    opacity:1;
    transform: translateY(0px);
    transition-delay: 0.3s;
}

Demo 7

７つ目のデモでは、画像は中心に向かって回転縮小させ、コンテンツは上から順番に落ちてきます。

.view-seventh img{
    transition: all 0.5s ease-out;
    opacity: 1;
}
.view-seventh .mask {
    background-color: rgba(77,44,35,0.5);
    transform: rotate(0deg) scale(1);
    opacity: 0;
    transition: all 0.3s ease-out;
    transform: translateY(-200px) rotate(180deg);
}
.view-seventh h2{
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out;
}
.view-seventh p {
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out;
}
.view-seventh a.info {
    transform: translateY(-200px);
    transition:  all 0.2s ease-in-out;
}

ホバー時には詳細の要素に遅延効果を加えており、こうすることによりまず画像が回転し、あとから画像のあった部分にコンテンツが降ってくるように見えます。元に戻る時はコンテンツはすぐに消滅し、画像が回転拡大しながら戻ってきます。

.view-seventh:hover img{
    transform: rotate(720deg) scale(0);
    opacity: 0;
}
.view-seventh:hover .mask {
    opacity: 1;
    transform: translateY(0px) rotate(0deg);
    transition-delay: 0.4s;
}
.view-seventh:hover h2 {
    transform: translateY(0px);
    transition-delay: 0.7s;
}
.view-seventh:hover p {
    transform: translateY(0px);
    transition-delay: 0.6s;
}
.view-seventh:hover a.info {
    transform: translateY(0px);
    transition-delay: 0.5s;
}

Demo 8

８つ目のデモではアニメーションを使って、バウンド効果を加えています。コンテンツが上から落ちてきてバウンドしているように見えます。

.view-eighth .mask {
    background-color: rgba(255, 255, 255, 0.7);
    top: -200px;
    opacity: 0;
    transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2{
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p {
    color: #333;
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info {
    transform: translateY(-200px);
    transition:  all 0.2s ease-in-out 0.3s;
}

mask要素にアニメーションを加え、コンテンツが上から落ちてくるように調整しながら遅延の定義を加えます。

.view-eighth:hover .mask {
    opacity: 1;
    top: 0px;
    transition-delay: 0s;
    animation: bounceY 0.9s linear;
}
.view-eighth:hover h2 {
    transform: translateY(0px);
    transition-delay: 0.4s;
}
.view-eighth:hover p {
    transform: translateY(0px);
    transition-delay: 0.2s;
}
.view-eighth:hover a.info {
    transform: translateY(0px);
    transition-delay: 0s;
}

本当にバウンドしているように見せる為にtranslateYを使用し、幾つかフレームも設定します。

@keyframes bounceY {
    0% { transform: translateY(-205px);}
    40% { transform: translateY(-100px);}
    65% { transform: translateY(-52px);}
    82% { transform: translateY(-25px);}
    92% { transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}

Demo 9

９つ目のデモでは、右下からと左上からスライドインさせる為２つのmask要素を使います。

<div class="view view-ninth">
    <img src="images/11.jpg" />
    <div class="mask mask-1"></div>
    <div class="mask mask-2"></div>
    <div class="content">
        <h2>Hover Style #9</h2>
        <p>Some Text</p>
        <a href="#" class="info">Read More</a>
    </div>
</div>

２つのマスクの開始地点はそれぞれ別なので、１つは上に１つは下に個々に設定します。

.view-ninth .mask-1,
.view-ninth .mask-2{
    background-color: rgba(0,0,0,0.5);
    height: 361px;
    width: 361px;
    background: rgba(119,0,36,0.5);
    opacity: 1;
    transition: all 0.3s ease-in-out 0.6s;
}
.view-ninth .mask-1 {
    left: auto;
    right: 0px;
    transform: rotate(56.5deg) translateX(-180px);
    transform-origin: 100% 0%;
}
.view-ninth .mask-2 {
    top: auto;
    bottom: 0px;
    transform: rotate(56.5deg) translateX(180px);
    transform-origin: 0% 100%;
}

コンテンツは２つのマスクが中央で接触したその線上から現れているかのようにスタイリングさせています。

.view-ninth .content{
    background: rgba(0,0,0,0.9);
    height: 0px;
    opacity: 0.5;
    width: 361px;
    overflow: hidden;
    transform: rotate(-33.5deg) translate(-112px,166px);
    transform-origin: 0% 100%;
    transition: all 0.4s ease-in-out 0.3s;
}
.view-ninth h2{
    background: transparent;
    margin-top: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.view-ninth a.info{
    display: none;
}

ホバー時は２つのマスクは端と端がほんの少し重なり、コンテンツはその隙間から浮き出てきます。

.view-ninth:hover .content{
    height: 120px;
    width: 300px;
    opacity: 0.9;
    top: 40px;
    transform: rotate(0deg) translate(0px,0px);
}
.view-ninth:hover .mask-1,
.view-ninth:hover .mask-2{
    transition-delay: 0s;
}
.view-ninth:hover .mask-1{
    transform: rotate(56.5deg) translateX(1px);
}
.view-ninth:hover .mask-2 {
    transform: rotate(56.5deg) translateX(-1px);
}

マスク用のtransition-delay（遅延）は、ホバーした瞬間に移動開始するよう設定してあります。けれどマウスを外した時は、少し間を開けてから元の隙間に戻っていきます。

Demo 10

最後のデモでは画像はどんどん拡大してフェードアウトさせ、真ん中からコンテンツが湧きあがってくるように見せています。この効果はscale（拡大）と透過レベルを調整することにより実現します。

.view-tenth img {
    transform: scaleY(1);
    transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
    background-color: rgba(255, 231, 179, 0.3);
    transition: all 0.5s linear;
    opacity: 0;
}
.view-tenth h2{
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: scale(0);
    color: #333;
    transition: all 0.5s linear;
    opacity: 0;
}
.view-tenth p {
    color: #333;
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}
.view-tenth a.info {
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}

ホバー時はシンプルにscaleを使って画像を拡大し、opacity（透過度）を「０」にすることによりフェードアウトさせています。

.view-tenth:hover img {
    transform: scale(10);
    opacity: 0;
}
.view-tenth:hover .mask {
    opacity: 1;
}
.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info{
    transform: scale(1);
    opacity: 1;
}

終わりに・・・

CSS3は非常に素晴らしい可能性を秘めており、様々な効果を実現することが出来ます。もしかしたら、簡単な効果なら全てのブラウザでJavaScriptに頼らずCSS3で１００％実現出来るようになる日も近いかもしれませんね。
今回のアーティクルがみなさんの役に立ち、ご自身のプロジェクトに何かしらのインスピレーションを与えることが出来たなら幸いです。