CSS3 Transition

CSS3 transitionプロパティを使用した要素の変化(アニメーション)についてのまとめです。  

transitionプロパティ

・transition-property 変化を適用するCSSプロパティの指定。 ,で区切って複数指定、noneで全て変化なし、allで全て変化、初期値はnone ・transition-duration 変化にかかる時間の長さの指定。 値はnsで初期値は0s ・transition-timing-function 変化の進行時間の割合の指定。 詳しくは後述。 ・transition-delay 変化を始めるまでの時間の長さの指定。 値はnで初期値は0  

特定の条件下での変化

:hover マウスを要素の上に乗せている間だけ変化 html
<div class="test"></div>
css
.test {
width: 100px;
height: 100px;
background-color: black;
}
.test:hover {
background-color: orange;
}
 

変化時間の調節

上記のプロパティで説明したようにtransition-timing-functionを使用して設定します。 cubic-bezier.com 上記のサイトを参考に直接値を入れて調整することもできますが、元々用意されている値があるので今回はそちらを紹介します。 デモページ ・ease ゆっくり始まりゆっくり終わる(初期値) ・linear 一定の速度 ・ease-in ゆっくり始まり、終点に向けて加速 ・ease-out 早く始まり、終点に向けて減速 ・ease-in-out ゆっくり始まりゆっくり終わるが、easeよりも起伏が少ない。  

Animationとの違い

animation ・ループ可能 ・keyframesで細かい設定が可能 ・動作終了後、即座に元の状態に戻る transition ・ループが無い ・複雑なアニメーションには向かない ・動作終了後、逆再生で元に戻る

コメントを残す

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