いつもアニメーションのやり方を調べてしまうのでメモです。
hoverでアニメーション
liタグをhoverすると動くCSSです。
/*▼ここは解説です。
■ベンダープレフィックス
-moz-transform: translate(50px,20px);
-webkit-transform: translate(50px,20px);
-o-transform: translate(50px,20px);
-ms-transform: translate(50px,20px);
transform: translate(50px,20px);
■transform:プロパティ（移動系）
translate (X方向の距離, Y方向の距離)X方向とY方向の距離で2D移動を指定します。 Y方向の距離は省略することができますが、この場合のY方向の距離は0となります。[tx, ty]
translateX (X方向の距離)X方向の距離で移動を指定します。
translateY (Y方向の距離)Y方向の距離で移動を指定します。
translateZ (Z方向の距離)Z方向の距離で移動を指定します。 translateZ()関数にはパーセンテージ値を指定することができないので注意してください。 もし、パーセンテージで値を指定しても0と同じになります。
translate3d(X方向の距離, Y方向の距離, Z方向の距離)X方向とY方向とZ方向の距離で3D移動を指定します。 Y方向とZ方向の距離は省略することができますが、この場合のY方向とZ方向の距離は0となります。[tx,ty,tz]
■transform:プロパティ（回転系）
rotate(回転角度)角度によって2D回転を指定します。
rotateX(回転角度)X軸を軸とする角度によって時計回りの回転を指定します。
rotateY(回転角度)Y軸を軸とする角度によって時計回りの回転を指定します。
rotateZ(回転角度)Z軸を軸とする角度によって時計回りの回転を指定します。
rotate3d(数値, 数値, 数値, 回転角度)最初の3つの数値で[x,y,z]の方向ベクトルを決め、最後に指定する回転角度で時計回りの3D回転を指定します。 もし、方向ベクトルが単位長さとなっていない場合には正規化されます。 方向ベクトルが正規化できない数値の場合には、回転が適用されません。
※角度はdeg
例：transform: rotate(-45deg);
■transform:プロパティ（サイズ系）
scale(X方向数値, Y方向数値)2つの数値で2D縮尺比率を指定します。
scaleX(数値)X方向の縮尺比率を指定します。
scaleY(数値)Y方向の縮尺比率を指定します。
scaleZ(数値)Z方向の縮尺比率を指定します。
scale3d(X方向数値, Y方向数値, Z方向数値)3つの数値で3D縮尺比率を指定します。
▲解説終了*/
@keyframes rotateY360 {
0% {
-moz-transform: rotateY(359deg);
-webkit-transform: rotateY(359deg);
-o-transform: rotateY(359deg);
-ms-transform: rotateY(359deg);
transform: rotateY(359deg);
}
100% {
-moz-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
li:hover{
animation-name:rotateY360; /*アニメーションの名前*/
animation-duration: 1s; /*アニメーションの時間*/
animation-timing-function:ease-in-out; /*アニメーションの進行ペースの指定
ease (開始から終了まで滑らかに)
linear (開始とから終了まで一定)
ease-in (開始部分だけゆっくり)
ease-out (終了部分だけゆっくり)
ease-in-out (開始と終了がゆっくり)
cubic-bezier 関数で数値指定cubic-bezier(開始のX,開始のY,終了のX,終了のY)*/
animation-delay:0s; /*アニメーションの開始タイミングの指定*/
animation-iteration-count:1; /*アニメーションの繰り返し回数の指定 infinite=無限*/
animation-direction:normal; /*アニメーションの繰り返しの向きの指定
normal 0%から100%に向けて一直線
reverse 100%から0%に向けて一直線
alternate 0%から100%に向けていき、100%で折り返し
alternate-reverse 100%から0%に向けていき、0%で折り返し*/
animation-fill-mode:none; /*アニメーションの開始前・終了後のstyle指定
none アニメーション開始前・終了後は元々指定していたstyleが適用
backwards アニメーション前は0%の状態のstyleが適用
アニメーション後はデフォルトの状態のstyleが適用
forwards アニメーション前はデフォルトの状態のstyleが適用
アニメーション後は100%の状態のstyleが適用
both アニメーション前は0%の状態のstyleが適用
アニメーション後は100%の状態のstyleが適用*/
animation-play-state:running; /*アニメーションの実行状況の指定
running 初期値
アニメーションを実行・再生中
paused アニメーションを一時停止に状態にする
値をrunningに変えた場合は中断地点から再開*/
animation:rotateY360 1s ease-in-out 0s 1 normal none running;
/*アニメーションの一括指定プロパティ(空白区切り)
①アニメーションの名前
②アニメーションの時間
③アニメーションの進行ペース
④アニメーションの開始タイミング
⑤アニメーションの繰り返し回数
⑥アニメーションの繰り返しの向き
⑦アニメーションの開始前・終了後のstyle指定
⑧アニメーションの実行状況
*/
}
ついでに画面に表示したときに発動するjs
要素の縦位置を取得して、スクロールがそこまで行ったらアニメーションのclassを追加するという流れです。
また、通り過ぎたら付与したclassを削除します。
下からスクロールで戻ってくるときにもclassを付与します。（オレンジ箇所）
<sclipt>
$(window).scroll(function(){
var youso = ".transe"; //変更箇所、ターゲットの要素（#また.を忘れないように）
var adclass = "c_rotateY360"; //変更箇所、付与するクラス名
var target_top = $(youso).offset().top; // ターゲットの位置
var position = target_top - $(window).height(); // ターゲットの最初の位置
var position_bottom = target_top + $(youso).height(); // ターゲットの最終の位置
if($(window).scrollTop() > position && $(window).scrollTop() < position_bottom){
setTimeout(function () {//１秒遅延させる
// 要素が見えたときの動き
$(youso).addClass(adclass);
}, 1000);
}else{
// それ以外の動き
$(youso).removeClass(adclass);
}
});
</sclipt>
ただこれだと共通で複数設定する時などはイチイチ処理を書くはめになりますので工夫が必要です。
ワードプレスなどではアニメーションを作成できるプラグインがありますので、そちらを使ったほうが早いです。
コメント