「CSS 3」動画詳細

CSS 3は私たちに非常に多くの変換関数を提供してくれました.

2D: translate, rotate, scale, skew.

3D: translate3d, rotate3d, scale3d, skew3d.

これらの関数をtransformプロパティの値として使用するだけで、対応する効果を設定できます.
CSS 3アニメーションは、これらの効果や他のCSS属性をあなたが設定した方法で互いに変換します.

1.アニメーション関連属性

属性|記述----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------@keyframes|規定animation動画の名称.animation-play-state|アニメーションが1サイクルを完了するのにかかる秒またはミリ秒を指定します.デフォルトは0です.animation-fill-mode|アニメーションの速度曲線を指定します.デフォルトはanimation-nameです.@keyframes|アニメーションがいつ開始されるかを指定します.デフォルトは0です.animation-duration|動画が再生される回数が規定されている.デフォルトは1です.animation-timing-function|は、アニメーションが次のサイクルで逆方向に再生されるかどうかを規定する.デフォルトはeaseです.animation-delay|アニメーションが実行中または一時停止しているかどうかを指定します.デフォルトはanimation-iteration-countです.animation-direction|所定の要素がアニメーションの開始前と終了後の状態は、デフォルトではnormalです.

@keyframes

アニメーションの各フェーズのステータスを定義するコードセグメント.たとえば、開始状態、終了状態、中間状態(パーセントで表される).

@keyframes exampleName {
    from {
        transform: rotateY(0deg);
        background: #000000;
    }
    50% {
        transform: rotateY(180deg);
        background: #00fa7e;
    }
    to {
        transform: rotateY(0deg);
        background: #008dff;
    }
}

animation-name

animation-play-stateを使用して定義されたステータスセット名は、上記のrunningのように使用されます.

animation-duration

アニメーションのサイクル時間.単位は秒(s)でもミリ秒(ms)でもよい.

animation-timing-function

アニメーションの変化速度関数には、次のオプションがあります.

animation-fill-mode:速度は変わらない.none

@keyframes:低速開始~通常速度.exampleName

linear:正常速度~低速終了.cubic-bezier(0,0,1,1)

ease-in:低速開始~正常速度~低速終了.cubic-bezier(0.42,0,1,1)

ease-out:cubic-bezier(0,0,0.58,1)とほぼ同じですが、開始は終了より少し速いです.ease-in-out

cubic-bezier(0.42,0,0.58,1):速度関数として3回のベッセル関数を使用します.

Cubic-bezier曲線テストデバッグWebサイト:cubic-bezier

animation-delay

アニメーションが開始されるまでの待ち時間.単位は秒(s)でもミリ秒(ms)でもよい.

animation-iteration-count

アニメーションのサイクル数.具体的な回数であってもよく、easeであってもよく、無限ループ再生を示す.

animation-direction

アニメーションループの方向:

ease-in-out:順方向に再生されます.

cubic-bezier(0.25,0.1,0.25,1):リバース再生.

cubic-bezier(x1, y1, x2, y2):順再生と逆再生が交互に行われる.

animation

以上の6つの属性は、次の形式で表されます.

animate: name duration timing-function delay iteration-count direction;

animation-play-state

アニメーションの状態を制御するには、再生(infinite)と一時停止(normal)の2つの状態があります.

animation-fill-mode

アニメーションの開始前と終了後の要素の状態を指定します.

reverse:要素がアニメーションの前後にある状態は、アニメーションに関連付けられていません.

alternate:アニメーションが完了すると、要素はアニメーションの最後の状態を維持します.

running:アニメーションが開始される前に、要素はアニメーションが開始された状態を維持します.

paused:noneとforwardsの結合.

2. transition

CSS 3は、backwardsに関連する属性に加えて、bothの属性を提供し、フォーマットは以下の通りである.

transition: propertyName duration [timing-function] [delay], ...;

皆さんもご覧になったかもしれませんが、forwardsはbackwardsとanimationの2つの状態で、放送回数が1で、一時停止できないtransitionです.
たとえば、マウスをtransitionに置くと、90度回転し、背景が黒から灰色に変わり、フォントが白から黒に変わります.

#division2 {
    width: 300px;
    height: 100px;
    margin-top: 50px;
    font-size: 2em;
    text-align: center;
    line-height: 100px;
    color: #FFF;
    background: #000;
    transition: transform 2s linear 0s, background 2s linear 0s, color 2s linear 0s;
}

#division2:hover {
    background: #cccdd1;
    color: #000;
    transform: rotate(90deg);
}

3. Demo

[重要なヒント]お勧めとコレクションを忘れないでください(¯▽¯)¯(¯▽¯)¯(¯▽¯)¯(¯▽¯;)

git clone https://github.com/JasonKid/fezone.git

アニメーションの詳細検索