animation
브라우저가 로딩되는 순간 모션을 진행하는 애니메이션 속성이다.
애니메이션 속성은 사용자의 동작과는 관계 없이 혼자서 움직임을 만든다.
이때 애니메이션의 하위속성과 @keyframes모듈을 이용하여 움직임을 만든다.[속성]
- animation
: 하위 속성들을 한꺼번에 선언할때 사용한다. 속성끼리는 공백으로 구분한다.
- animation-delay
: 애니메이션의 지연시간을 지정한다.
단위는 s를 사용하고 지정된시간이 지나면 그때 애니메이션을 실행한다.
- animation-direction
: 애니메이션의 진행 방향을 설정한다. 속성값으로는 아래에 있는 값들을 사용한다.
1. alternate
: 애니메이션의 시작지점에서 끝나는지점으로 이동했다가 끝나는 지점에서
다시 시작지점으로 이동한다.(from->to->from)
2. normal
: 기본값이며 시작지점에서 끝나는 지점으로 이동하는 것을 반복한다.
3. reverse
: 역방향으로 움직인다.
4. alternate-reverse
: 역방향으로 움직였다가 정방향으로 움직인다.
- animation-iteration-count
: 애니메이션의 반복 횟수를 지정한다.
단위없이 숫자만 쓰거나 infinite값을 쓸 수 있다. infitinte는 무한반복을 말한다.
- animation-name
: 애니메이션의 이름을 지정한다. class나 id이름 짓듯이 이름을
지어주면 되고, 필수 속성으로 애니메이션의 이름이 없으면 애니메이션이 동작하지 않는다.
- animation-play-state
: 애니메이션의 재생 상태를 지정한다.
보통 :hover선택자와 함께 쓰이며, 사용자가 마우스를 올리거나 어떤 동작을 하면
애니메이션의 동작을 멈추거나 다시 재생할 수 있다.
값은 running이나 paused를 사용하고, paused는 멈춘다는 의미이다.
- animation-timing-function
: 애니메이션의 속도를 설정한다. 값으로는 trainsitoin-timing-function 과
동일한 값을 사용한다.
(ease, ease-in, ease-out, linear, ease-in-out)
- animation-fill-mode
: 끝났을때 모습을 유지할 것인지를 지정한다.
backward는 기본값으로 애니메이션이 끝나면 원래의 초기 위치로 돌아온다.
forwards는 애니메이션의 종료시점의 모습을 유지한다.@keyframes 모듈
animtion으로 해당 태그에 움직임을 설정했다면 실제 움직이는
동작은 @keyframes 모듈이 담당한다.
@keyframes 모듈은 지정된 시간안에 어떤 동작을 만들것인지를 지정한다.
애니메이션의 모션효과를 지정할때 이것을 '키프레임'이라고 부른다.
키프레임은 애니메이션이 변경되는 모든 지점을 말한다.
@keyframes설정을 할때에는 키프레임 안에서
시간에 의해 변화되는 부분을 '선택자'로 구분한다.
선택자는 0%또는 from이라고 쓰면 애니메이션의 시작지점(0초 지점) 을 말하고,
100% 또는 to라고 쓰면 애니메이션이 끝나는 지점을 말한다.[기본형]
선택자{
animation : 속성1 속성2....;
}
@keyframes 애니메이션 이름{
from 또는 0% { 스타일 속성: 값; }
50%{ 스타일 속성 : 값; }
to 또는 100% { 스타일 속성: 값; }
}will-change
transition이나 animation작업을 수행하는 동안
브라우저에 깜빡임이나 떨림현상이 생길 수 있다.
will-change속성은 브라우저에게 요소의 예상 변경 사항을 알려주는 속성.
이 속성을 사용하면 브라우저는 요소가 실제로 스타일 변형이 필요할때
필요한 리소스를 사전에 최적화 하여 요소의 스타일 변경과
랜더링을 더 빠르고 최적화된 방식으로 처리한다.
will-change의 속성값으로는 애니메이션(키프레임)과 transition또는 transform으로
변화시킬 속성의 속성명을 사용한다.[속성값]
- auto
: 변경 예정인 속성에 대한 최적화를 자동으로 처리하기 위해 브라우저가 결정한다.
- scroll-position
: 스크롤 위치에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리한다.
- contents
: 요소 내용의 변경에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리한다.
- opacity
: 투명도 변경에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리한다.
- transform
: 변형속성에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리한다.
- perspective
: 원근감 변경에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리한다.
- left/top/right/bottom
: 좌표값 변경에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리한다.
- filter
: filter속성에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리한다.
- color / background-color
: 색상 변경에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리한다.
- all
: 모든 변경에 대한 최적화를 위해 브라우저가 자동으로 처리한다.
Hi