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