CSS3 アニメーション Animations モジュール FadeIn FadeOut作成
2011.01.10
この記事は最終更新日から1年以上が経過しています。
アニメーション （Animations モジュール）
@-webkit-keyframesを使い、フェードイン、フェードアウトを作ります。
@-webkit-keyframesは%で時間軸の指定が出来ます。
0%がスタート、100%で終了となります。
fadeIn
@-webkit-keyframes 'fadeIn' {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
セレクタ .fadeIn {
-webkit-animation-name: 'fadeIn';
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
}
【animation-name】アニメーション名を指定する
値：none,アニメーション名
【animation-duration】アニメーション一回分の時間の長さを指定する
値：time（時間指定 ５秒なら 5s）
【animation-time-function】アニメーションのタイミング・進行割合を指定する
値：ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(数値, 数値, 数値, 数値)
【animation-iteration-count】アニメーションの繰り返し回数を指定する
値：infinite(無限に再生を繰り返す), 数値(数値で再生回数を指定)
fadeOut
@-webkit-keyframes 'fadeOut' {
0% {
opacity:1;
}
100% {
opacity:0;
}
}
セレクタ .fadeOut {
-webkit-animation-name: 'fadeOut';
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
opacity:0;
}
アニメーションデモ
@-webkit-keyframes anime{
10% {opacity: 0.5;-webkit-transform: translate(2px);}
20% {opacity: 1;}
30% {opacity: 0.5;-webkit-transform: translate(-2px);}
40% {opacity: 1;}
50% {opacity: 0.5;-webkit-transform: translate(2px);}
60% {opacity: 1;}
70% {opacity: 0.5;-webkit-transform: translate(-2px);}
80% {opacity: 1;}
90% {opacity: 0.5;-webkit-transform: translate(2px);}
}
.animeTest {
-webkit-animation-name: 'anime';
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
}
