Animation / Gradient

▼애니메이션 (animation)
▷hover 같이 반응형이 아닌 자동으로 움직임
▷시작점(0%) - 중간지점(50%) - 끝나는 지점(100%) : 시간대가 있음
▷함축적으로 적용가능
▷애니메이션 진행 후 기본값으로 돌아옴

- animation-name: '이름'; (class명이 아니어도 됨)
- animation-duration: 진행 시간s; 
- @keyframes '이름'{ 0%{'변화 값'}
50%{'변화 값'}
100%{'변화 값'}
}
 ㄴex)
.box1{width:100px; height:100px; animation-name:move; animation-duration: 5s;}
        @keyframes move{
            0%{font-size:20px; background: #ccc;}
            50%{font-size:50px; background:blue;}
            100%{font-size:30px; background: yellow;}

0%{position: absolute; left:0px; top:100px;}
100%{position: absolute; left:0px; top:100px; rotate:360deg;}

- animation : forwards; (마지막 자리에서 유지)
- animation : infinite; (움직임 반복하기)
- animation : delay: '시간's; (지연시간)
- animation : linear; (끊김 없이 움직임)

▼hover시 움직임 멈춤
▷태그{animation: '이름'}
   keyframes '이름'{ '움직임' }
▷태그:hover{animation:forwards;}
 ㄴex)
.cd{animation:box 3s infinite linear;}
         @keyframes box{100%{transform:rotate(360deg);}
.cd:hover{animation:forwards;}


▼그라데이션
▷background:linear-gradient(각도, 색상, 색상);
 ㄴex)
background:linear-gradient(45deg, orange, yellow);

▼레이어 순서 바꾸기
▷z-index: '숫자'; (레이어 순서값 : 숫자가 클수록 위로 올라감)
▷단독으로는 사용할 수 없고 position과 같이 사용해야함 (flex, float)
 ㄴex)
.box{position:absolute; z-index:5;} = 5번째 레이어

- '-숫자'도 가능하지만 background 밑으로 내려갈 위험이 있어 되도록 '+숫자'만 사용