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 は, 移り変わり，推移，変化，変遷といった意味.

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

.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);
}

.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;
}

.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);
}

.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);
}

.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);;
}