2024-07-26 :: 005 애니메이션

 

background

background-color	요소의 배경 색상을 지정
background-image	요소의 배경에 한 개 이상의 이미지를 삽입
background-repeat	배경 이미지의 반복을 지정
	repeat	배경 이미지를 수직, 수평으로 반복 (기본값)
	repeat-x	배경 이미지를 수평으로 반복
	repeat-y	배경 이미지를 수직으로 반복
	no-repeat	반복 없음
background-position	배경 이미지의 위치를 지정
background-attachment	요소가 스크롤 될 때 배경 이미지의 스크롤 여부를 설정
	scroll	배경 이미지가 요소를 따라서 같이 스크롤 됨
	fixed	배경 이미지가 뷰포트에 고정되어 요소와 같이 스크롤 되지 않음
	local	요소 내 스크롤 시 배경 이미지가 함께 스크롤 됨

 

다중 이미지 삽입의 예시

   

   다중 이미지 삽입의 확인을 위해 기본값으로 설정되어 있는 repeat 반복 값을 없애고 크기가 다른 이미지를 삽입해보면 제일 위에 쌓인 순서대로 깔려 삽입되는 것을 확인할 수 있다.

---

Transitions

※ CSS속성의 전환 효과를 지정 - CSS 속성의 시작과 끝을 지정하여 중간 값을 애니메이션함

transition-property	전환 효과를 사용할 속성의 이름 (쉼표로 구분)
transition-duration	전환 효과의 지속시간을 설정
transition-timing-function	타이밍 함수 지정
transition-delay	전환 효과를 몇 초 뒤에 시작할지 대기시간을 설정

 

Transfrom

※ 요소의 변환 효과(모양의 변형)를 지정

 

 

backface-visibility

    rotate 값이 90도를 넘어갈 경우  요소의 뒷면에서 앞면이 보이게 할 지 설정하는 속성. 기본 값으로 보여지게 설정되어 있으나 만일 숨기고 싶은 경우에는 hidden 값을 주면 된다.

 

transform: perspective( )

    쉽게 말해 가상의 눈을 만들어 관찰자의 거리를 정하는 요소이다. px단위는 관찰자의 눈이 요소로부터 얼마나 떨어져 있는지의 거리를 나타내며 값이 작을수록 요소가 확대되어 나타난다.

 

transform-origin

    관찰자의 눈의 위치를 지정하는 속성이다. X축과 Y축 순서로 작성한다.