今日のレッスンはcssアニメの内容で、レッスンは2時間40分くらいで、普段のボリュームは2倍くらいなので集中しづらいです.この場合も混同を主として整理し,知っていることや復習していることを排除して整理した.このように整理して、勉強をやり直したときにもっと目に入ったようです.

1）学習内容

CSS Animation

サイト内でのcssのWebサイトでの移動、移動などを実現
過去にJavaScriptで実現できた.
開発中のcss言語で実現できるようになりました(もちろん簡単です)

Transform

ズーム角度の回転位置を変更して、選択したオブジェクトのサイズをズームします.
transform: rotate(deg)
回転時に-rotate(負または正)を使用
負数は左、正数は右
transform: scale(2, 3);
スケール前の2はx軸で2倍培養することを示した.
3はy軸で3倍培養するという意味です.
サイズを縮小するには、小数点以下の数字を使用します.
transform: skew(10deg, 20deg);
斜体は、ダイナミックアニメーションを実装するためによく使用されます.
3 D回転効果を実現するプロパティ
transform: translate(100px, 300px);
選択した領域のオブジェクトの位置を変更するには
1つ目はx軸、2つ目はy軸で、自由に移動できます.

Transformの注意事項

修正可能バージョンのコード(Prepix)
Webブラウザに適用可能な低バージョンの機能を備えています.
-webkit-transform: rotate(10deg); クロムとハエ
-moz-transform: rotate(10deg); 火狐
-ms-transform: rotate(10deg); マイクロ
-o-transform: rotate(10deg); オペラ曲

Transition

アニメーションが変化する過程です.
transition-property: ; 変更する領域の設定
transition-duration: s; でんそうそくど
Transition-time-function:(線形)速度が性格に影響する(高速、遅いなど)
transition-delay: 1s; マウスを離して1秒後に起動する機能
transition: width 2s linear 1s
上の4行のコードは1行に縮小して保存できます.
このとき注意点の順番は関係ありません.
width 2 s linear 1 sのときに最初に現れる数字はdurationです.
後ろの数字はdelayです.
transition: width 2s linear , height 2s linear
カンマを使用して、このように変更したいプロパティを追加し続けることもできます.
animation-iteration-count
アニメーション再生回数ex)無限(無限)
animation-direction:
アニメーションの進行方向のアトリビュートを決定するには
ex)normal;こうたい
(反復効果:count 6を反復すると2往復)

** <li>@keyframes</li>**

**@keyframes** chageWidth {
    _from_{
width: 300px;
height: 300px;
background-color: yellow;
    }

   _to_{
width: 600px;
height: 600px;
background-color: red;
border: solid 10px blue;
    }
}

アニメーションを使用するときに一緒に使用しなければならないコード
でもfromとtoを使う必要はありません
一部の部分を%と表すことができます.
最初は0%から100%、中間像は25%から50%の部分です.
設定後、アニメーションの進行順に効果を生成できます.
KIDGAOサイトライオンモバイルの効果

animation-name: spinLion;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate; 

この5行のコードを簡単に推理すれば

animation: spinLion 1.5s linear infinite alternate;

1つの数字しかない場合、durationは2つであり、duration、delayの順に適用されます.
Prepixアニメーションを使用します.
キーフレームにもprefixを適用する必要があります.

@-webkit-keyframes spinLion{
 from{
    -webkit-transform: rotate(-10deg);

   }

   to{
        -webkit-transform: rotate(10deg);
    

このようにしてより低いバージョンのクロムに適用する
Prefixを適用する必要があります.
cssアニメーションリファレンスサイト
https://jeremyckahn.github.io/stylie/
実際の操作で使用される各種アニメーションの実装
rgba(255, 255, 255, 1); 最初の3つは、色が最後に透明度であることを示します.
Optity-すべての領域に透明度があるため、設計エラーが発生しやすい.
アニメーション-fill-mode(アニメーション-fill-modeプロパティアニメーション終了後の状態を設定)
transform:scale(1)-寸法が徐々に大きくなるか小さくなる
規模はサブ領域に影響を及ぼす.
そのため、親が成長するにつれて、子供の大きさも大きくなった.
アニメーションサブラベルのボックスが親ラベルのボックスサイズを超えています.
不自然な結果が生じる.
この時、子供に親の領域に影響を与えないようにします.
box-sizing: border-box; はい.

実習

移動ボックスの作成
親の円が色の大きさに応じて回転する円を作成します.
スーパーマリオコインを作る

@keyframes jumpCoin {
    0%{transform: translateY(0px);  opacity: 1;}
    50%{transform: translateY(-100px) rotateY(180deg); opacity: 0; }
    100%{transform: translateY(-100px) rotateY(360deg); opacity: 0; }
}

コインを使ったジャンプ効果翻訳Y(-100 px)
コイン回転の効果で回転(180度)
この時、私は勝手に注意点のあるコードを手配しました.
translate YとrotateYを絶え間なく貼り付けてこそ、コードが機能します.
画像領域にマウスを置くときの画像拡大機能の作成

.hover-image{
    width: 400px;
    border: solid 10px #000000;
}

.hover-image img{
    width: 100%;
}

親コードは黒線フレーム
サブコードは写真です
しかし、写真の大きさは親コードの箱より大きく、離脱現象が現れた.
このとき使用されるcss値はwidth:100%です.
親コードにwidth:100%の値が適用されます.
写真はスーツケースいっぱい.
以降、親コードと子コードの間にサイズの違いがある場合、
使用は有用な方法です.
vertical-align: middle; 行内の要素を整列させるためのx軸.
今回の実習では、写真や説明欄の真ん中の空白を整理する際にも使用しました.
cssアニメーションリファレンスサイト
https://animate.style/

(1) animate__animated (2) animate__bounce (3) animate__delay-2s

第1クラスは固定値です
2つ目はアニメの種類です
3つ目は、遅延や移動時間など
https://codepen.io/で検索して使用することもできます.

8日目Github(1)

8日目Github(2)

2）学習内容の難点

アニメーションの構造もコードも暗記できません.しかし、どのような構造に戻るかを知る必要があります.
実際、実際の作業ではフレームワークがよく使われています.
全体的に不案内で、内容自体は混乱していませんが、難易度もあります.

3）解決方法

グーグルも良かったのですが、意外にもNAVERのようなところにわかりやすいブログがたくさんあったので良かったです.

4）勉強の心得

進捗に追いつくために復習に費やす時間は少ないようです.もっと頑張ろう