css切替効果

transition
ショートカット属性として使用可能
transition-property
変換効果を使用するプロパティ名
変換効果のある仮想選択プログラムがある場合は、
属性を適用できます.
transition-duration
トランジション効果の持続時間の設定
transition-timing-function
タイミング関数の指定
linear
せんけいむそくどさ
steps
断続的な動作
transition-delay
切替効果の遅れ時間を設定する
transform
要素の変換効果の指定

.box{
	transform: rotate(20deg) translate(10px, 0);
}

2 D変換関数2 Dへんかんかんすう
translate(x軸、y軸)
関数の移動
scale(x, y)
ズーム関数
rotate
かいてんかんすう
単位:DEG
skew
要素の傾斜を表す
単位:DEG
注意事項
位置を変えるのはよくないかもしれません.したがって、変換を使用することが望ましい.
アニメーション(Animation)
animation
要素のアニメート/コントロール

animation : 애니메이션이름 지속시간 - 기타등등

@keyframes
アニメーションの指定
複数のアニメーションの中間状態の指定

@keyframes f-animation{
	0%{
		width:100px;
	}
    
    	100%{
    		width : 500px;
    	}
}

使用できます.
animation-duration
アニメーション期間
animation-timing-function
タイミング関数の指定(アニメーション効果の計算方法)
linear
ease-in, out
animation-delay
animation-direction
ほうこう
alternate:順方向逆方向繰り返し
animation-iteration-count
繰り返し回数
animation-fill-mode
アニメーションの前後の状態を設定
animation-play-state
アニメーションの再生と停止の設定