CSS3 の transition プロパティでアニメーションさせてみよう!!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

CSS3 には transition というプロパティがあり, これを指定することで簡単にアニメーションを付けることができます. サンプルをいくつか作ってみたので参考までに.全て hover することで変化するようにつくっています.

他のCSS プロパティ同様(IE意外は)簡単に設定, 動作させることができるのでよかったら試してみてください. 実際にこのブログでも使っています.記事に hover した際に縁に表示される影や, サイドバーのリンクを hover した際の拡大などに使用しています.

注意点としては, CSS3 なのでベンダープレフィックスの記述が必要です. 必要に応じて対応したいブラウザのベンダープレフィックスを記述してください.

.sample {
    -webkit-transition: ...;
    -moz-transition: ...;
    -o-transition: ...;
    transition: ...;
}

また, このブログの Read More が光っているのは, webkit 限定の animation プロパティを使用しています. こちらも transition と似たような機能なのですがよりプログラムっぽく使えます. animation に関しても近々書く予定です.

Memo : transition は, 移り変わり,推移,変化,変遷といった意味.

色を変化させてみよう

色を変化させてみよう!!

SAMPLE

CODE

.transition00 {
    -webkit-transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    transition: 2s;
    background-color: red;
}
.transition00:hover {
    background-color: blue;
}

色を透過させてみよう

色を透過させてみよう!!

SAMPLE

CODE

.transition01 {
    -webkit-transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    transition: 2s;
    background-color: rgba(255, 0, 0, 0.2);
}
.transition01:hover {
    background-color: rgba(255, 0, 0, 1.0);
}

テキストやボックスに影を表示してみよう

テキストやボックスに影を表示してみよう!! CSS の box-shadow, text-shadow プロパティを指定することで影を表示することができます.

SAMPLE

Text Text

CODE

.transition02 {
    -webkit-transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    transition: 2s;
}
.transition02:hover {
    -webkit-box-shadow: 5px 5px 15px #000;
    -moz-box-shadow: 5px 5px 15px #000;
    -o-box-shadow: 5px 5px 15px #000;
    box-shadow: 5px 5px 15px #000;
    
    -webkit-text-shadow: 2px 2px 0px #fff;
    -moz-text-shadow: 2px 2px 0px #fff;
    -o-text-shadow: 2px 2px 0px #fff;
    text-shadow: 2px 2px 0px #fff;
}

移動させてみよう

移動させてみよう!! CSS3 の transform プロパティに translate(x値, y値)を指定することで移動させることができます.

SAMPLE

CODE

.transition03 {
    -webkit-transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    transition: 2s;
}
.transition03:hover {
    -webkit-transform: translate(40px, 20px);
    -moz-transform: translate(40px, 20px);
    -o-transform: translate(40px, 20px);
    transform: translate(40px, 20px);
}

回転させてみよう

回転させてみよう!! CSS3 の transform プロパティに rotate(deg値)を指定することで回転させることができます.

SAMPLE

CODE

.transition04 {
    -webkit-transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    transition: 2s;
}
.transition04:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

拡縮させてみよう

拡縮させてみよう!! CSS3 の transform プロパティに scale(x値, y値)を指定することで拡縮させることができます.

SAMPLE

CODE

.transition05 {
    -webkit-transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    transition: 2s;
}
.transition05:hover {
    -webkit-transform: scale(2.0, 2.0);
    -moz-transform: scale(2.0, 2.0);;
    -o-transform: scale(2.0, 2.0);;
    transform: scale(2.0, 2.0);;
}

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT