css移動アニメーション効果(擬似クラス+transition+transform+animation)

一、常用概念区分:
1、transform(変形)--属性を組み合わせ、1つ/複数の属性値のみをスペースで区切ることができます.属性定義要素の形状/位置の変化:5つのサブ属性を定義できます.
移動translateスケールscale回転rotateねじれskew行列変形matrix要素2、translate(移動)——transformの属性値で、要素の移動効果を定義します
translate(x,y)両座標は同時に移動し、パーセントtranslate X(x)を使用して一方向にtranslate 3 d(x,y,z)を移動して3 D移動3、transition(遷移)を定義することができます.ある属性の遷移効果を定義するのは、簡潔な属性で、4つの子属性を定義することができます.
Transition-propertyでは、遷移効果を設定するCSS属性の名前を指定します.Transition-durationは、移行効果を完了するのに何秒またはミリ秒かかるかを規定します.Transition-timing-functionは速度効果の速度曲線を規定します.Transition-delayは、移行効果がいつ開始されるかを定義します.4、animation(アニメーション)animationは、あるkeyframeのアニメーション効果を定義します.属性は6つのアニメーションサブ属性を設定するための簡略化された属性です.
animation-nameでは、セレクタにバインドする必要があるkeyframe名animation-durationでは、アニメーションの完了に要する時間を秒またはミリ秒で規定します.アニメーション-timing-functionは、アニメーションの速度曲線を規定します.アニメーション-delayは、アニメーションが開始される前の遅延を規定しています.アニメーション-iteration-countは、アニメーションが再生すべき回数を規定します.アニメーション-directionでは、アニメーションを順番に逆再生するかどうかを規定しています.5、擬似クラス(Pseudo-classes)は異なる状態の要素に対応するスタイルを追加し、単一のコロン(:)で擬似クラスを表す
:hoverがリンクにマウスを置いた状態:activeが選択したリンク6、擬似要素は、ドキュメントツリーにない要素を作成し、スタイルを追加するために使用されます.二重コロン(:)/(:)を使用して擬似要素を表す
::beforeは要素の内容の前に追加生成の内容を挿入します::afterは要素の内容の後に追加生成の内容を挿入します:first-lineはテキストの最初の行に特殊なスタイルを設定して、“first-line”の偽要素はブロックレベルの要素にしか使用できません.first-letterテキストの頭文字に特殊なスタイルを設定する::selectionマウスキーボードなどで選択した文字部分にサンプルを適用する
二、移動アニメーションの実現
1、transition+:hover擬似クラスはピクチャーの浮遊移動アニメーションを実現する

jsまたはjquery要素の移動は画素で計算され、携帯電話の移動効果はカートン

になる.

CSS 3 transitionでスムーズな移動動画

を簡単に実現できる

元の要素.floatBox設定スタイルが元の位置に戻る効果は、同様に効果に遷移時間

を設定する.
.floatBox:hover設定左シフト効果、浮遊時トリガー

.floatBox {
    width: 300px;
    background-color: rgb(221, 143, 143);
    /* x=0        */
    transform: translateX(0);
    /*      0.4s     */
    transition: transform 0.4s;
}

/* hover   */
.floatBox:hover {
    /* x=-10px    10px */
    transform: translateX(-10px);
    /* 0.4s  transform    */
    transition: transform 0.4s;

}

アニメーション
2、.マウスを画面に移動

容器幅固定、高さはサブエレメントによって

変化

img設定高さ138 px、title設定高さ28 px

title設定margin-top:-28 px;シフトを実現し、imgとオーバーラップ

容器偽類:hover title設置高さ、line-height、margin-topの3項目を満たし、全重畳+文字中央効果

を実現する

imgとtitle設定transition:0.4 s;

/* 2.           */
.img-wrapper {
    width: 300px;
}

.img-wrapper .img {
    height: 138px;
    background-color: rgb(221, 143, 143);
}

.img-wrapper .title {
    /* margin-top     ，       */
    margin-top: -28px;
    text-align: center;
    height: 28px;
    line-height: 28px;
    background-color: rgba(222, 134, 57, 0.8);
    /*          */
    transition: 0.4s;
}

.img-wrapper:hover .title {
    /* margin-top -     ，     */
    margin-top: -138px;
    text-align: center;
    /* height+linehright       */
    height: 138px;
    line-height: 138px;
    background-color: rgba(222, 134, 57, 0.8);
    /*          */
    transition: 0.4s;
}

効果のデモ