그라데이션

⊙ 그라데이션 주기

background  : linear-gradient(to right, black, transparent);

=> 검은색에서 투명색으로 그라데이션 , 이때 방향은 오른쪽으로 점점 투명해짐
즉, 검은색으로 시작해서 오른쪽으로 점점 투명색이 되도록

⭐ background : linear-gradient(to 방향, 시작색, 끝색);

그라데이션을 원하는 위치에 두려면?

위의 그라데이션을 원하는 위치로 옮겨보자
position 사용하기

position : absolute;
top : ~~;
left : ~~;
width : ~~;
height : ~~;

position의 absolute로 top, right, left의 위치 조정과 width, heigh로 크기 조정까지 가능하다

애니메이션

⊙ 애니메이션 만들기

@keyframes 이름 {
	from {
    	left : -100px;
        opacity : 0;
    }
    to {
    	left : 400px;
        opacity : 1;
    }
}

애니메이션 이름 : 이름
left -100px 위치에서 opacity 0으로 시작해서
left 400px 위치에 opacity 1로 도착

+ (opacity는 글씨의 투명도를 조절)

⊙ 애니메이션 적용

태그 {
	animation : 이름 2s ease-out;
}

원하는 태그에 keyframes로 만든 animation 추가해주기

• animation : 이름; 이것만 해도 적용됨
• 2s : 2초동안 애니메이션 실행
• ease-out 효과 주기