[盲目的に真似する]彼!鼻が大きくなって小さくなるロード画面です:CSSアニメーション

4857 ワード
CSS html css animation テキストリンク
久しぶりに運動したのでそのまま伸びていた私.
気絶(?)本当はそうだったのですが、メガバイト学校で一緒に聴いていた組員のKakaoTalkさんがやっと立ち上がりました.
私たちに連絡した理由は.

これは、上記のアニメーションをCSSで表示する方法を尋ねるためです.

質問された私の表情
「CSSよりJavaScriptが好き!そう思った私に、目が覚めたばかりの私を加えて「これは・・・「なにこれ?」こんな考えしかない.「よくわからないははは」と言うかもしれませんが、授業前にもぐっすり眠れるのに、どうしてそんなことを言わなかったのでしょうか

「知らなかったら軍隊生活は終わったの?」



私のコード生涯は終わらないので、パソコンの前に出て、直接グーグルを試してみました.まだ何が起こっているのか分かりませんが、どうしてもCSSのanimationという機能を使うことに気づきました.

CSSアニメーションの使用

animationは、その名の通り画面上のコンテンツを移動できる機能です.animationやanimation-delayのようなサブ機能は、@keyframesもあり、所望の動作を実現することができます.

アニメーションサブアトリビュート(Animation SubAttributes)

  • animation-name:名前付きアニメーション.
  • animation-delay:イラストのロード後にアニメーションが開始するタイミングを指定します.
  • animation-direction:アニメーションを終了して再開するか、逆方向に行うかを指定します.
  • animation-duration:ループのアニメーションがどのくらい発生するかを指定します.
  • animation-iteration-count:アニメーションが何回繰り返されるかを指定します.
  • animation-play-state:アニメーションを停止または再起動します.
  • animation-timeing-funciton:中間状態の遷移時間間隔を指定します.
  • animation-fill-mode:アニメーションの開始前または終了後に適用される値.
    • animationは、以下のように、単独ではなく、1行であってもよい.
    div {
animation: name duration timing-function delay iteration-count direction fill-mode;
}

    Keyframeを使用してアニメーションの中間状態を指定します

    @keyframesで、アニメーション全体の中間にどのようなアニメーションが表示されるかを指定できます.

    例:長方形の棒が細くなったアニメーション


    以上の内容はメンバーが好奇心を持っているアニメを作ることができます.
  • HTML 
    • <body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
  • CSS 
    • div {
  width: 10px;
  height: 30px;
  background-color: rgb(59, 209, 217);
  display: inline-block;
  margin: 1px;
  animation: scaling 1s ease-in-out infinite;
}

@keyframes scaling {
  from {
    transform: scaleY(2);
  } to {
    transform: scaleY(1);
  }
}

div:nth-child(1) {
  animation-delay: 0s;
}
div:nth-child(2) {
  animation-delay: .15s
}
div:nth-child(3) {
  animation-delay: .3s
}
div:nth-child(4) {
  animation-delay: .45s;
}
div:nth-child(5) {
  animation-delay: .6s;
}
    @keyframesでは、fromとtoの間にパーセントでアニメーションの中間状態を書くことができます.完成した様子は以下の通り.

    イメージもいいですね.

    なぜ私の鼻の画像が私のパソコンに保存されているのか分かりませんが、マンです.

    「聞こえたよ」


    CSSアニメーションを理解し、チームメンバーにどの部分が悪いかを尋ねるときです.

    問題は既に解決した.(うちのチームで一番役に立たない私は...)
    おかげでハンナは知らなかったCSSを勉強しました.
    ホテルルーム料金プログラム(C言語)
    pytorchテストcapsnet