[CSS]パネルをCSS3アニメーションでスライドや回転や拡大させたりするチュートリアル

画像とテキストを配置した2枚のパネルを切り替える時に、CSS3アニメーションでふわりと入れ替えたり、しゃっとスライドしたり、くるっと回転したり、拡大させたりするチュートリアルを紹介します。

CSS animated profile cards

実装とデモ

アニメーションは4種類あり、まずは共通のHTML/CSSから。

HTML

各パネルはリスト要素で実装し、デフォルトの画像のパネルはimg要素、切替時のテキストのパネルはリスト要素です。
「EFFECT」には、それぞれのエフェクトを入れます。

<ul id="&#91;EFFECT&#93;" class="profiles">
    <li>
        <img class="pic" src="images/&#91;PIC&#93;.jpg" />
        <ul class="info">
            <li><a href="&#91;URL&#93;">[NAME]</a></li>
            <li>[MAIL]</li>
            <li>[PHONE]</li>
        </ul>
    </li>
    <!-- More cards -->
</ul>

CSS

共通で使用するスタイルシートです。

.profiles {
    list-style:none;
}
.profiles > li {
    float:left;
}
.info, .pic {
    /* Make the picture and info go "on top" of each other */
    position:absolute;
}
.info {
    /* Hide the info by default */
    opacity:0;
}

4種類の実装はデモと共に紹介します。

デモページ: Push

押し出すようなアニメーションで切り替えます。

CSS

「EFFECT」に「push」を指定します。

#push .info {
    transition: all 0.3s;
    transition-delay:0.2s;
}
#push .pic {
    transition: all 0.5s;
}
/* We fade in the info */
#push li:hover .info {
    opacity:1;
}
/* We make the opacity lower, rotate and scale the picture */
#push li:hover .pic {
    opacity:0.7;
    transform: scale(0.7) rotate(10deg);
}

デモページ: Slide

スライドのアニメーションで切り替えます。

CSS

「EFFECT」に「slide」を指定します。

/* In the default state, the info box has been slightly moved to the left */
#slide .info {
    transition: all 0.3s;
    transform: translate(-50px, 0);
}
#slide .pic {
    transition: all 0.3s;
}
/* In the hover state, the info box has been moved to the original position and faded in */
#slide li:hover .info {
    opacity:1;
    transform: translate(0, 0);
}
/* In the hover state, the picture has been moved to the right and is faded out */
#slide li:hover .pic {
    opacity:0;
    transform: translate(50px, 0);
}

デモページ: 3D flip

3Dの回転でくるっと切り替えます。

CSS

「EFFECT」に「flip」を指定します。

#flip {
    perspective: 800px;
}
/* By default already visible */
#flip .info {
    transition: all 0.8s;
    opacity:1;
    transform-style: preserve-3d;
}
/* Flip the text: Will be flipped back when animated */
#flip .info li {
    transform: rotateY(180deg);
}
#flip .pic {
    transition: all 0.8s;
    backface-visibility: hidden;
    z-index:999;
    transform-style: preserve-3d;
}
/* Simply rotate when hovering */
#flip li:hover .info {
    transform: rotateY(180deg);
}
/* Simply rotate when hovering */
#flip li:hover .pic {
    transform: rotateY(180deg);
}

デモページ: Explode

爆発するような拡大のアニメーションで切り替えます。

CSS

「EFFECT」に「explode」を指定します。

/* By default, the info is smaller */
#explode .info {
    transition: all 0.7s;
    transform: scale(0.8);
}
#explode .pic {
    transition: all 0.7s;
}
/* On hover, fade in and show original size */
#explode li:hover .info {
    opacity:1;
    transform: scale(1);
}
/* On hover, fade out and grow */
#explode li:hover .pic {
    opacity:0;
    transform: scale(1.4);
}