CSSアニメーションの紹介

Why Animation
現在、ウェブページの内容はますます豊富になって、まずアニメーションの能力はウェブページをもっとクールに見せることができて、次に合理的にCSSアニメーションを運用して大いにウェブページのユーザーの体験を高めることができます.次のWebアニメーションの例を見てみましょう.
コードの実行

//css

@keyframes drawer-box-animation {
    from {
        opacity: 0;
        transform: translateX(10px);
        width: 90%;
    }

    50% {
        opacity: 1;
        width: 100%;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        width: 90%;
        transform: translateX(10px);
    }
}

.hamburger:hover + .drawer-box {
  color: #ff2c2d;
  width: 100%;

  &  .drawer-box-text {
    opacity: 1;
  }
}

.hamburger:hover + .drawer-box.drawer-with-infinite {
  animation-name: drawer-box-animation;
  animation-iteration-count: infinite;
  animation-duration: 1s;
}


.hamburger:hover .hamburger-inner {
  transform: translate3d(0, 0 ,0) rotate(45deg);
}

.hamburger:hover .hamburger-inner:before {
  transform: rotate(-45deg) translate3d(-5.71429px,-6px,0);
  opacity: 0;
}

.hamburger:hover .hamburger-inner:after {
  transform: translate3d(0,-10px,0) rotate(-90deg);
}

.hamburger:hover + .drawer-box {
  color: #ff2c2d;
  width: 100%;

  &  .drawer-box-text {
    opacity: 1;
  }
}

.hamburger:hover + .drawer-box.drawer-with-infinite {
  animation-name: drawer-box-animation;
  animation-iteration-count: infinite;
  animation-duration: 1s;
}

.drawer-box.drawer-with-animation {
  transition: width 0.25s ease-in-out;

  & .drawer-box-text {
    transition: opacity 0.25s ease-in;
    transition-delay: 0.15s;
  }
}

見た後で発見するかどうか、アニメーションのホームページが明らかに更に高く見えます!大きい!行け!
How to animation?
現在、WebページでCSSを使用してアニメーションを実現するには、次の2つの方法があります.

CSS Transition

CSS Animation

What is css transition?
簡単に言えば、Transitionは、エレメントを所定の時間にプロパティ値(数値から別の値)をスムーズにすることができます.スムーズとは何ですか?スムーズとは、ある状態から別の状態にゆっくりと変化させるアニメーションです.
では、どのようにして1つのページ要素を滑らかにしすぎる機能を備えさせるのでしょうか.まずCSS Transitionにどのような属性があるかを見てみましょう.

.element {
    //   ：            （all         )
    transition-property: width, opacity;
    //    ：             （     s、ms...)
    transition-duration: .5s;
    //    ：               
    transition-timing-function: ease;
    //    ：            
    transition-dely: .5s;
}

Transitionの運用方法を例に挙げてみましょう.
セグメントコードの実行

.popout-window {
    width: 10%;
    background-color: #525252;
}

.popout-window:hover {
    width: 100%;
}

.popout-window.with-animation {
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: ease-in;
}

要素のcssにtransitionという属性値を加えるだけで、transitionの運用は比較的簡単であることに気づくことができます.例から、transition-propertyはwidthである、すなわち、要素の幅が変化すると平滑な遷移の機構が適用され、平滑な遷移に要する時間はtranstion-durationで定義.
ではtiming-functionとは何でしょうか.timing-functionは、要素のスムーズな遷移の進行状況と使用される時間関係を記述する関数です.簡単な例を挙げると、要素の幅を10%から100%の間で2 sでスムーズな遷移を行うことを定義しました.では、私は100 msごとに、私の要素の幅はどのくらい増加しますか?時間と要素の成長の関係は線形成長関係であってもよいし、曲線成長関係であってもよいが、timing-functionはこの関係を定義する.よく使われるtiming-functionには、次のようなものがあります.

linear

ease

ease-in

ease-out

ease-in-out

steps

cubic-bezier

次の例を見て、各timing functionがどのようなものかを知ることができます.
コードの実行

    liner


    ease

...

    ease-out


    ease-in-out


    steps

.runing-box {
    position: absolute;
    left: 0;
    //...
    transition-property: left;
    transition-duration: 3s;
}
.running-box:hover {
    left: calc(100% - 200px);
}
.liner {
    transition-timing-function: linear;
}
...
.steps {
    transition-timing-function: steps(5, start);
}

アニメーション全体の実行中にcubic-bezierが最も奇妙であることがわかり、このサイトを通じてcubic-bezierを具体的に理解することができます.
ここまでtransitionの使い方を知っておくべきですが、transitionはすべてのアニメーションを実現することができますか?
答えはできません.transitionの定義から、要素を状態Aから状態Bにスムーズに移行させるため、transitionが記述したアニメーションは常に終了し、アニメーションをrunさせることはできません.次に私たちが着くCSS animationでは、これを行うことができます.
CSS Animation
CSS 3は、多くのHTML要素にアニメーション効果を与える技術である.定義から、CSSアニメーションはCSS 3から始まり、ページ要素にアニメーション効果を与える役割を果たしていることがわかります.
アニメーションにどのような属性があるか見てみましょう.

//      text-animation    
@keyframes text-animation {
    from {
        font-size: 16px;
    }
    20% {
        font-size: 20px;
    }
    to {
        font-size: 18px;
    }
}

.element {
    //      
    animation-name: text-animation;
    //         
    animation-duration: 1s;
    //         
    animation-iteration-count: 1;
    //         
    animation-play-state�: running;
    //                   
    animation-fill-mode: none;
    //         
    animation-direction: normal;
    //              
    animation-timing-function: linear;
    //          
    animation-delay: 1s;
}

アニメーションを適用する例を見てみましょう.
コードの実行

@keyframes text-animation {
    from {
        font-size: 16px;
    }
    20% {
        font-size: 20px;
    }
    to {
        font-size: 38px;
    }
}

.text-animation {
    animation-name: text-animation;
    animation-duration: .3s;
    animation-iteration-count: infinite;
}

CSS animationのduration,delay,timing-functionはtransitionと同じなので、ここではこれ以上説明しないで、他の属性を重点的に見てみましょう.
animation-iteration-count
iteration-countはアニメーションの実行回数を定義し、デフォルトは1です.
値
説明
数値(例:1,2,3,4)
アニメーション実行回数
infinite
アニメーションを常に実行
animation-play-state
アニメーション-play-stateはアニメーションの実行状態を定義し、pausedはアニメーションの実行を一時停止し、runningはアニメーションを実行します.
値
説明
paused
アニメーションの実行を一時停止
running
アニメーションの実行
次の例を見てみましょう.
コードの実行

@keyframes text-animation {
    from {
        font-size: 16px;
    }
    20% {
        font-size: 20px;
    }
    to {
        font-size: 38px;
    }
}

.text-animation {
    animation-name: text-animation;
    animation-duration: .3s;
    animation-iteration-count: infinite;
}

.text-animation:hover {
    animation-play-state: paused;
}

animation-fill-mode
アニメーション-fill-modeは、アニメーションを適用する初期および終了時の要素の状態を定義する.
値
説明
none
デフォルトの動作を変更しない
forwards
アニメーションが終了したら、最後のアトリビュート値(最後のキーフレームで定義)を維持します.
backwards
アニメーション-delayで指定した期間、アニメーション表示の前に開始プロパティ値(最初のキーで定義)を適用します.
both
前後のパディングモードが適用する.
シーンは次のように仮定します.

@keyframes text-animation {
    from {
        color: blue;
    }
    
    to {
        color: red;
    }
}

.text-animation {
    color: white;
    animation-name: text-animation;
    animation-play-state: paused;
}

.text-animation:hover {
    animation-play-state: running;
}

設定によって異なるfill modeでは、フォントの色が次のように変化します.
値
説明
none
白、青、赤、白
forwards
青、赤、白
backwards
白、青、赤
both
青、赤
animation-direction
アニメーション-directionは、アニメーションの再生順序(開始フレームから終了フレームまで、終了フレームから開始フレームまで)を定義します.
値
説明
normal
既定値.アニメーションは正常に再生されるべきです
reverse
アニメーションは逆再生する必要があります
alternate
アニメーションは順番に逆再生する必要があります.(奇数回順再生、偶数回逆再生)
alternate-reverse
アニメーションは順番に逆再生する必要があります.(奇数回逆再生、偶数回
次の例を見てみましょう.
コードの実行

    normal


    reverse


    alternate


    alternate-reverse

@keyframes running-box-animation {
    from {
        left: 0;
    }

    to {
        left: calc(100% - 200px);
    }
}
.runing-box-animation {
    animation-name: running-box-animation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
}
.runing-box-animation.alternate {
        animation-direction: alternate;
}
.runing-box-animation.reverse {
    animation-direction: reverse;
}

現在、基本的にウェブページ上のすべての複雑なアニメーションはcssの方式で実現することができ、性能の考慮から、cssを使ってアニメーションを作ることができれば、できるだけjsの方式でアニメーションを作ることを避けることができます.