[CSS] CSS animation, CSS 선택자 우선순위 계산

CSS Animation

: 요소의 현재 스타일을 다른 스타일로 천천히 변화 시킬 수 있습니다. CSS3에서는 @keyframe 규칙을 사용해 애니메이션 효과를 쉽게 적용할 수 있습니다.

 

animation-fill-mode

 : 애니메이션이 끝난 후 어떻게 처리할지 설정합니다.

•  backwards : 기본설정. 애니메이션의 스타일을 애니메이션이 시작되기 전으로 되돌립니다.
•  forwards : 애니메이션 키프레임이 100% 도달했을 때 마지막 키프레임을 유지합니다.

 

animation-direction

 : 애니메이션의 진행 방향을 정하는 속성입니다.

•  reverse : 반대 순서로 진행합니다.
•  alternate : 정해진 순서로 진행했다가 다시 반대 순서로 진행합니다.
•  alternate-reverse : 반대 순서로 진행했다가 다시 정해진 순서로 진행합니다.

 

animation-iteration-count

 : 애니메이션이 몇 번 반복될지 설정합니다.

•  숫자 : 해당 숫자만큼 반복합니다.
•  infinite : 무한 반복합니다.

 

animation-duration

 : 애니메이션이 일어나는 시간을 설정합니다.

 

@keyframe

• 시작 : form, 0% ...
• 과정 : 10%, 20% ... 과정을 만들어가는 부분들
• 끝 : to, 100% ... 100개의 프레임만 만들어도 충분하다.

 

perspective

 : 3D 환경을 만들기 위해 사용자의 관찰자 시점, 즉 투영점을 구체화해서 입체감을 부여하는 속성입니다. 스크린으로부터 해당 px만큼 떨어진 곳에서 관찰자가  있다는 것을 근거로 구성합니다.

 

animation: 이름 시간 재생속성;

 

CSS 선택자 우선순위 계산

0. !important가 적용된 속성

1. 인라인(요소에 직접 style 속성 적용)
ex) <h2 style="color: yellow;">적용</h2> : 1000점

2. 
id : 100점 
class, 속성 선택자 : 10점
엘리먼트 : 1점