transitionを使ってみる

2015.10.08

transitionの使い方を調べてみたのでメモ。

対応ブラウザ

transitionが対応しているブラウザはこちら。
IE10からの対応で、Androidブラウザも考慮する場合はベンダープレフィックスが必要になります。

try-to-use-the-transition01

サンプルコード

実装する場合、transition-property・transition-duration・transition-timing-function・transition-delayを指定します。

HTML

1
<div id="sample"></div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#sample {
    width: 200px;
    height: 200px;
    background: #E74C3C;
    -webkit-transition-property: width;
    transition-property: width;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
#sample:hover {
    width: 600px;
}
transition-property アニメーションするプロパティを指定。
transition-duration アニメーションする時間を指定。
単位はs。
transition-timing-function アニメーションのイージングを指定。
ease/linear/ease-in/ease-out/ease-in-out/cubic-bezierからどれかを指定。
transition-delay アニメーションの開始を遅らせる場合に指定。
単位はs。

transitionのデモページ
　

上記はまとめて指定することもできます。

HTML

1
<div id="sample2"></div>

CSS

1
2
3
4
5
6
7
8
9
10
#sample2 {
    width: 200px;
    height: 200px;
    background: #E74C3C;
    -webkit-transition: width 1s linear 0s;
    transition: width 1s linear 0s;
}
#sample2:hover {
    width: 600px;
}

transitionのデモページ2
　

複数指定する場合

複数指定する場合、「,」で区切って指定します。

HTML

1
<div id="sample3"></div>

CSS

1
2
3
4
5
6
7
8
9
10
11
#sample3 {
    width: 200px;
    height: 200px;
    background: #E74C3C;
    -webkit-transition: width 1.5s ease-in-out 0s, background 1s ease-in-out 0.5s;
    transition: width 1.5s ease-in-out 0s, background 1s ease-in-out 0.5s;
}
#sample3:hover {
    width: 600px;
    background: #3498DB;
}

transition複数指定のデモページ
　

【参考サイト】

　

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年4月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
27282930