CSS 3アニメーション、遷移効果animation、@keyframes、transform、transition

CSS 3@keyframesルール
CSS 3でアニメーションを作成するには@keyframesルールを学習する必要があります.
@keyframesルールは、アニメーションを作成するために使用されます.@keyframesでCSSスタイルを指定すると、現在のスタイルから徐々に新しいスタイルに変更されるアニメーション効果が作成されます.
ブラウザはInternet Explorer 10、FirefoxおよびOperaサポート@keyframesルールおよびanimationプロパティをサポートします.
ChromeとSafariにはプレフィックス-webkit-が必要です.
注記:Internet Explorer 9以降のバージョンでは、@keyframeルールまたはanimationプロパティはサポートされていません.
≪インスタンス｜Instance｜emdw≫

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari   Chrome */
{
from {background: red;}
to {background: yellow;}
}
/* ：          -webkit-   -moz- */

あるいは%で時間帯を表す

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

注:@keyframesでアニメーションを作成する場合は、セレクタにバインドする必要があります.そうしないと、アニメーション効果は発生しません.
少なくとも以下の2つのCSS 3アニメーション属性を規定することで、アニメーションをセレクタにバインドすることができる.
アニメーションの名前を指定アニメーションの時間を指定
≪インスタンス｜Instance｜emdw≫
「myfirst」アニメーションをdiv要素にバンドルします.時間:3秒:

div{
animation: myfirst 3s;
}

このうちanimationには6つの属性があります

animation-name規定@keyframesアニメーションの名称

animation-durationは、アニメーションが1サイクルを完了するのにかかる秒またはミリ秒を規定します.デフォルトは0

animation-timing-functionは、アニメーションの速度曲線を規定します.デフォルトはeaseです.4つの属性:ease、ease-in、ease-out、ease-in-out

animation-delayは、アニメーションがいつ開始されるかを規定しています.デフォルトは0

animation-iteration-countは、アニメーションが再生される回数を規定する.デフォルトは1です.2つの属性:n(回数、記入しないで1)とinfinite(無限次)

animation-directionでは、アニメーションが次のサイクルで逆再生されるかどうかを規定します.デフォルトは「normal」です.2つのアトリビュート:normal(通常のループ再生、記入なし)とalternate(終了後に交代で逆再生)すべてのアトリビュートを合わせて書くことができます

div {
animation: myfirst 5s linear 1s infinite alternate;
}

アニメーション名、アニメーション時間5 s、アニメーション速度:均一速度、遅延開始時間:1 s、アニメーション再生回数:無限回、アニメーション完了後次サイクル:交代で逆再生.
CSS 3 transform変形変換
CSS 3 transformとは何ですか?
transformの意味は:変えて、変形させます;へんかん
CSS 3 transformにはどのような共通属性がありますか?
Transformのプロパティには、次のものがあります.

rotate()/skew()/scale()/translate(,)は、それぞれx、yの区別があります.例えば、rotatex()とrotatey()は、このように推定されます.

次に、各プロパティの使用方法を分解します.
transform:rotate():
意味:回転;「deg」は「度」を意味し、「10 deg」は「10度」を表す.

.demo_transform1{
    transform:rotate(10deg);
    -webkit-transform:rotate(10deg);
    -moz-transform:rotate(10deg);
}

transform:skew():
意味:傾斜;「deg」は「度」を意味し、「20 deg」は「10度」を表す.

.demo_transform2{
    transform:skew(20deg);
    -webkit-transform:skew(20deg);
    -moz-transform:skew(20deg);
}

transform:scale(x,y):
意味:比例;2つの値を伝えることができます.1つ書くとxyは同じで、「1.5」は1.5の割合で拡大し、2倍に拡大するには「2.0」、縮小するにはマイナス「-」と書きます.

.demo_transform2{
    transform:scale(1.5);
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
}

transform:translate(x,y):
意味:変動、変位;3つの値、x、yを伝えることができます.
translate X()、translate Y()と書くこともできる.
右に100画素シフトする、すなわち、最初の値が100 pxであることを示すように、上にシフトすると、後の「0」を値に変更すればよいが、左にシフトすると負の「-」となる.

.demo_transform2{
    transform:translate(100px,0);
    -webkit-transform:translate(100px,0);
    -moz-transform:translate(100px,0);
}

または

.demo_transform2{
    transform:translateX(100px);
    -webkit-transform:translateX(100px);
    -moz-transform:translateX(100px);
}

CSS 3 transition過剰効果
マウスが通過すると、幅のエッジは300 pxで、長さは2秒です.

div{
width:200px;
}
div{
transition: width 2s;
-moz-transition: width 2s;    /* Firefox 4 */
-webkit-transition: width 2s;    /* Safari   Chrome */
}
div:hover {
width:300px;
}

Transitionには4つのプロパティがあります.

1、transition-property:遷移を適用するCSS属性の名前を指定します.withは幅属性、heightは高さ属性、transformはアニメーション属性、allはすべての属性を得ることができるので、all

を書くことをお勧めします.

2、transition-duration:遷移効果を定義するのにかかる時間.デフォルトは0です.

3、transition-timing-function:遷移効果を規定する時間曲線.デフォルトはeaseです.属性は5つあり、

linear–均一速度で開始から終了までの遷移効果を規定

ease–遅い-速い-遅い規定の遅い開始、それから速くなって、それから遅い終了の移行効果

ease-in–遅い-速い規定は遅い速度で始まる移行効果

ease-out–速い-遅い規定は遅い速度で終わる移行効果

ease-in-out–遅い-速い-遅い規定遅い開始と終了の遷移効果

4、transition-delay:遷移効果がいつ開始されるかを規定します.デフォルトは0です.

4つの属性を合わせて書くことができます

div{
    transition: all 1s linear .5s;
}

4つのアトリビュートがそれぞれ表示されます.すべてのアトリビュートに動作効果があり、動作時間が1 S、速度が均一、遅延が0.5 Sでアニメーションが開始されます.
転入先https://www.cnblogs.com/shiweida/p/7785185.html