css(8)_animation&Flexbox
5590 ワード
1.Animation
transitionでは、効果を見るにはユーザーのaction(ex.hover)が必要ですが、アニメーションでは、要素が変化し続けるコレクションを作成できます(複数のスタイルの変化を自動的に再生できます).
ex)keyframsセットの例
.cylon_eye {
background-color: red;
background-image: linear-gradient(to right,
rgba(0, 0, 0, .9) 25%,
rgba(0, 0, 0, .1) 50%,
rgba(0, 0, 0, .9) 75%);
color: white;
height: 100%;
width: 20%;
-webkit-animation: 4s linear 0s infinite alternate move_eye;
animation: 4s linear 0s infinite alternate move_eye;
} @-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } }
@keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } }keyframes
開発者は、アニメーションの中間を特定のポイントを通過できるフレームを設定することで、アニメーションの中間ステップを制御します.
ブラウザの自動処理アニメーションよりも中間動作を細かく制御
@keyframesキーワードで記述すればよい
/*두가지 만 적용 했을 때 예시*/
/* @keyframes +이름 */
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}ここでのtop(en-US)アトリビュートは、0%、30%、および100%キーを使用してアニメートされます.left(en-US)アトリビュートは、0%、68%、および100%キーを使用します.
@keyframes identifier {
0% { top: 0; left: 0; } /* 0 , 0으로시작해서 */
30% { top: 50px; } /*3초에는 이 동작*/
68%, 72% { left: 50px; }/*6.8초 그리고 7.2초에는 이동작*/
100% { top: 100px; left: 100%; } /*끝날 때 동작*/
}animation-name
事前に記入したkeyframs名を記入するだけでいいです.
nameは大文字と小文字を区別し、0~9、a-z、、-混在のみ
globalに適用される値を名前として使用するべきではありません.
/* Global values */
animation-name: initial;
animation-name: inherit;
animation-name: revert;
animation-name: unset;animation-duration
数分以内に再生するコンテンツの定義
再生を繰り返すことができるので、1つのキーフレームを1サイクルと見なします.
delayは負の値を許可しますが、durationは0より大きい正の値の時間を記入する必要があります.
/* Single animation */
animation-duration: 6s;
animation-duration: 120ms;
/* Multiple animations */
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;
animation-delay
/* Single animation */
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;
/* Multiple animations */
animation-delay: 2.1s, 480ms;正の値は、アニメーションが指定された時間後に開始する必要があることを示します.つまり、既定値が0のアニメーションが適用された後、すぐに開始します.
負の値-1 sで負の値を指定すると、アニメーションはすぐに開始しますが、再生時間はアニメーションシーケンスの1秒から開始します.
animation-timing-function
🚨 いろいろな値と一緒にアクションをする姿が見られます!
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
animation-interation-count
values
animation-direction
animation-direction : alternate-reverse;values
noremal:各アニメーションループの順方向再生ループの場合、開始状態に設定して再開します.これがデフォルトです.
リバースリバース:各ループでリバース再生
Alternate:各サイクルで各サイクルの方向を反転し、最初の反復は順方向です.
Alternate-reverse:各サイクルで各サイクルの方向を反転し、最初のサイクルを逆方向に行います.
animation-play-state
animation-play-state : paused;values
running:再生中の状態
一時停止:アニメーションが停止しています
animation-fill-mode
values
none:keyframsに適用しないで、自分の元のスタイルだけを適用します.
forwards:keyframsの最後の側面を維持
≪戻る|Back|emdw≫:遅延時間の場合は、キーを持って事前に準備します.
👌 ここで動作を比較してみましょう
https://developer.mozilla.org/ko/docs/Web/CSS/animation-fill-mode
アニメーション(ショートカット属性ver)
最後に
使用例
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
/* @keyframes duration | name */
animation: 3s slidein;Reference
この問題について(css(8)_animation&Flexbox), 我々は、より多くの情報をここで見つけました https://velog.io/@akk0504/css8animationFlexboxテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol