7/7[アニメーション]変換、変換、アニメーション

💡 学習の内容

github

✅ transfrom

ex) transform: rotate(-10deg); - 2 D回転効果2 Dかいてんこうか
(deg)正の値が右負の値が左回転
ex) transform: scale(2, 3); - 選択した領域をズームするときに使用
(x,y)x軸で何倍、y軸で何倍
ex) transform: skew(10deg, 20deg); 3 D回転効果3 Dかいてんこうか
(x(deg),y(deg)x軸回転,y軸回転
ex) transform: translate(100px, 300px); 選択した領域のオブジェクトの位置を変更するときに使用
(x(px)、y(px)x軸移動、y軸移動
使用時の注意事項:変換を適用する場合は、ユーザーブラウザの上部バージョンの前に配置します.

Prefixとは?(大邱ai学校指導者回答)

✅ transition

.transition:hover {
width: 600px;
height: 600px;
}入力してくださいtransition-property: width;変更したい領域transition-duration: 2s;動画再生時間transition-timing-function: linear;アニメーション速度値
x)linearは,開始から終了まで一定の速度を保つことを示す.transition-delay: 1s;マウスを離して一括アニメーションを行うのに要する遅延時間
▶上記の項目は1行にまとめることができますtransition: width 2s linear 1s;高さ値の入力にカンマtransition: width 2s linear, height 2s linear; }を使用

✅ animation

animation-name: changeWidth;私が欲しいアニメの名前
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s; -------移行などの概念animation-iteration-count: 6;(googlering+++++)animation-direction: normal(정방향)/alternate(반복효과);動画再生方向

@keyframes(애니메이션 명령값) changeWidth(내가 지정한 애니메이션 이름) {
    from {
        width: 300px;
        height: 300px
        background-color: yellow
    }
    to {
        width: 600px;
        height: 600px
        background-color: red
    }
}

💨 fromとtoの部分を数字%と書いてアニメーションの開始と終了を設定できます.◀
💨 animation: spinLion 1.5s(duration) linear infinite alternate 1s(delay);の数字(数秒)が2回現れた場合、前の数字がdurationの後ろの数字はdelayを表す.
▼▼▼複雑アニメ実施▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
https://jeremyckahn.github.io/stylie/
ジルコニアが透明度に影響する場合:ジルコニアを使用するex) background-color: rgba(rgba(0, 0, 0, 0.5));アニメーションの進行状況を設定
**animation-play-state: *++++Google

画像の下部の空白を除去するには、垂直位置合わせ:middle;デフォルトとして入力

学習内容の難点

勉強の概念はたくさんありますが、実習に応用するには、混同されているところがたくさんあり、授業中に理解できないところがあるので、探してみるべきです.

¥2,000の解決策

最近はgooglingがよくできていて、知らない部分が出てきたら簡単に説明できるので、検索で解決します.
また、大邱ai学院の質問に対する指導者の回答を通じて、その難点を理解した.

🙋学習の心得.

これは静的なサイトではなく、ダイナミックな感覚を与える機能を学ぶ時間です.確かに動画効果を応用しているので、もっと技術的な部分が出てくる気がしますが、学んだことをうまく活用すれば、いろいろな効果をもたらすサイトを作ることができます.