Webアニメーション

導入
アニメーションは私たちの日のインターネットサーフィンの重要な役割を果たしている.彼らはオンラインローディングの経験をより多くのユーザーのための娯楽とそれらの間で興味を開発する.
彼らは強力なツールであり、オンラインのウェブサイトをよりインタラクティブにして、訪問者のために魅力的にするのに非常に効果的です.
アニメーションは、イメージとグラフィックオブジェクトに生命をもたらす芸術です

何がアニメーションですか?
写真を動画として表現する方法
このブログでは、私は純粋にCSSアニメーションに焦点を当てています.だから始めましょう!

CSSアニメ
Webページ内の要素を移動、CSSアニメーションを使用して回転、変換することができます.彼らはページ全体を移動することができますし、興味深い方法のあらゆる種類の対話.
CSSアニメーションの理解を深めるために、どのようなキーフレームを理解しましょうか?

キーフレーム
アニメーションでは、“キーフレームは、任意の滑らかな遷移の開始点と終了点を定義する図面です.”
以下の例でキーフレームを使用してまともなアニメーションを実現する方法を見てみましょう.
そのためには、

静的SVGイメージ

と…CSS XD

のビット
SVG画像はより小さな部分に分割され、各部分はグループ化され、後でCSSで使用される特定のIDを与えられる.

ここでどのように我々は我々の資産を我々が望むように移動するコードを変更する方法です!
別々のキーフレームを作成して、異なる部品の変遷と動きを作ります.

バーベル
次のコードはバーベルの垂直方向の動きに役立ちます.

@keyframes barbell {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(42%);
  }
}

これは、animationセレクタで#Barbell属性にキーフレームを割り当てることによって、SVGの対応する部分に統合されます.

#Barbell {
  width: 700px;
  height: auto;
  margin: 0;
  padding: 0;
  animation: barbell 1s ease-in-out 6 alternate;
  transform-origin: center;
  transform-box: fill-box;
}

アームズ
これは少しトリッキーなので、あなたのシートベルトXD
腕の曲げ運動を説明するために、我々はさらに腕と前腕対にそれを細分しました.

前腕

@keyframes foreArmLeft {
  from {
    transform: rotate(0deg) translateY(0%) translateX(0%) scaleY(1);
  }
  to {
    transform: rotate(8deg) translateY(35%) translateX(-63%) scaleY(0.65);
  }
}

translate(35%)はバーベルの持ち上げを描写するために前腕に垂直な運動のビットを加えます.そして、これは、前腕選択242479142と統合される.

#ForeArmLeft {
  animation: foreArmLeft 1s ease-in-out 6 alternate;
  transform-origin: bottom;
  transform-box: fill-box;
}

上腕
脳の上腕を斜めに動かす際の援助の下のコード.

@keyframes upperArmLeft{
  from {
    transform: translateY(0%) translateX(0%);
  }
  to {
    transform: translateY(270%) translateX(-60%);
  }
}

3 .顔
次の2つのキーフレームは、脳の幸せと悲しい気分の移行に貢献します.

@keyframes faceHappy{
  from{
    opacity: 1;
    transform: translateY(0%);
  }
  to{
    opacity: 0;
    transform: translateY(3%);
  }
}

@keyframes faceSad{
  from{
    opacity: 0;
    transform: translateY(0%);
  }
  to{
    opacity: 1;
    transform: translateY(3%);
  }
}

ボディ
バーベルを持ち上げる脳の努力を表す体のわずかな垂直運動は以下のコードのコードで作成されます.

@keyframes body {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(5%);
  }
}

Voila!私たちのアニメーションは今準備ができています.見てみましょう!
読書ありがとう!