みなさんこんにちはこんばんは。イッシーですʕ→ᴥ←ʔ。iPhoneのブラウザではCSS3のアニメーションや3D効果が使用できます。そこで今回はCSS3を使って様々な効果を作ってみましょう。Google Chromeなどのブラウザでも見ることができますので様々な効果を楽しみつつ、様々な場で使ってみてください。

■角丸

特に目新しくありませんが、見栄えが良くなるのでとりあえず角丸にしておきます。

.element{
    border:1px solid #333333;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

ʕ→ᴥ←ʔ キュンキュン!

■影

CSS3では要素に影をつけることができます。

.element{
    border:1px solid #333333;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    -webkit-box-shadow: 10px 10px 20px #bbbbbb, -3px -3px 10px #bbbbbb;
    -moz-box-shadow: 10px 10px 20px #bbbbbb, -3px -3px 10px #bbbbbb;
    box-shadow: 10px 10px 20px #bbbbbb, -3px -3px 10px #bbbbbb;
}

ʕ→ᴥ←ʔ キュンキュン!

テキストに影をつけることもできます。

.element{
    border:1px solid #333333;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    -webkit-box-shadow: 10px 10px 20px #bbbbbb, -3px -3px 10px #bbbbbb;
    -moz-box-shadow: 10px 10px 20px #bbbbbb, -3px -3px 10px #bbbbbb;
    box-shadow: 10px 10px 20px #bbbbbb, -3px -3px 10px #bbbbbb;
}
.element p {
    -webkit-text-shadow: 0 -1px 1px #FFF, -1px 0 1px #FFF, 1px 0 1px #000;
    -moz-text-shadow: 0 -1px 1px #FFF, -1px 0 1px #FFF, 1px 0 1px #000;
    text-shadow: 0 -1px 1px #FFF, -1px 0 1px #FFF, 1px 0 1px #000;
}

ʕ→ᴥ←ʔ キュンキュン!

■アニメーション

お待たせしました。アニメーションです。

.element {
    border:1px solid #333333;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    -webkit-box-shadow: 10px 10px 20px #bbbbbb, -3px -3px 10px #bbbbbb;
    -moz-box-shadow: 10px 10px 20px #bbbbbb, -3px -3px 10px #bbbbbb;
    box-shadow: 10px 10px 20px #bbbbbb, -3px -3px 10px #bbbbbb;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1000ms;
}
.element:hover {
    opacity:0;
}

マウスオーバーするとアニメーションします。

ʕ→ᴥ←ʔ キュンキュン!

3D効果

以下のようにすることで立体的に回転させることができます。

.element {
    border:1px solid #333333;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    -webkit-box-shadow: 10px 10px 20px #bbbbbb, -3px -3px 10px #bbbbbb;
    -moz-box-shadow: 10px 10px 20px #bbbbbb, -3px -3px 10px #bbbbbb;
    box-shadow: 10px 10px 20px #bbbbbb, -3px -3px 10px #bbbbbb;
    -webkit-perspective: 100;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 3000ms;
    -webkit-transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
}
.element:hover {
    -webkit-transform: rotateY(180deg);
}

マウスオーバーするとアニメーションします。

ʕ→ᴥ←ʔ キュンキュン!

■JavaScriptイベント

CSS3によってプログラミングすることなく様々な表現ができるようになりました。しかし、もっと複雑なことをするにはJavaScriptとの組み合わせが必要になってきます。まずは以下のようにアニメーションの終了をキャッチしましょう。

var elm  = document.getElementById('card2011052906');
var text = document.getElementById('card2011052906text');
var flag = false;
elm.addEventListener(
    'webkitTransitionEnd',
    function(){
        flag = false;
        text.innerHTML = 'かいてんしゅーりょー';
    },
    false
);
elm.addEventListener(
    'click',
    function(){
        if(!flag){
            flag = true;
            elm.style['-webkit-transform'] = 'rotateY(180deg)';
            text.innerHTML = 'かいてん中';
        }
    },
    false
);

見ての通りCSSによるアニメーションが終了すると、webkitTransitionEndイベントが発火します。(クリックしてください)

ʕ→ᴥ←ʔ キュンキュン!

これを応用してカードを裏返す効果を演出してみます。(クリックしてください)

ʕ→ᴥ←ʔ

コードは以下のようになります。

var counter = 0;
var emoticon = ['ʕ→ᴥ←ʔ', 'ʕ•͡ᴥ•ʔ'];
var elm = document.getElementById('card2011052907');
var flag = false;
var rotate90 = function(){
    elm.removeEventListener('webkitTransitionEnd', rotate90);
    elm.getElementsByTagName('p').item(0).innerHTML = emoticon[++counter % emoticon.length];
    elm.style['-webkit-transform'] = 'rotateY(180deg)';
    elm.addEventListener(
        'webkitTransitionEnd',
        rotate180,
        false
    );
}
var rotate180 = function(){
    flag = false;
    elm.removeEventListener('webkitTransitionEnd', rotate180);
}
elm.addEventListener(
    'click',
    function(){
        if(!flag){
            flag = true;
            elm.style['-webkit-transform'] = 'rotateY(90deg)';
            elm.addEventListener(
                'webkitTransitionEnd',
                rotate90,
                false
            );
        }
    },
    false
);

90°までCSSで回転させJavaScriptで表示を入れ替え、さらに90°回転させています。

■まとめ

いかがでしょうか?丸角に画像を使っていた時代が懐かしいですね。CSS3を使えばデザイン性が向上するだけでなく、不要な画像を減らすことができます。また、Mobile SafariではCSS3の一部の機能がGPUによって処理されるため、setTimeoutを使用したjQueryのアニメーションよりもスムーズなアニメーションになります。

■注意

Mobile Safari

上述のカードのサンプルは少し修正するだけで、画像を裏返すといったものに変更が可能です。しかし、img要素にbox-shadowを適用してしまうとMobile Safariで処理に時間がかかってしまい、アニメーションが止まってしまいます。そういった場合は外側のブロック要素に対してbox-shadowを適用するようにしてください。

android

android2.1(実機・エミュレータ)のブラウザは3D Transformsは動作はします。しかし、GPUの支援がないのでカクカクしたアニメーションになります。また、android2.2(エミュレータ)のブラウザでは回転方向が異なってしまい使い物になりませんでした。この不具合はandroid3.0(エミュレータ)では修正されていました。androidのブラウザには本当に頑張ってほしい限りですね。

Post Navigation