CSS ■ 애니메이션, 키프레임, 미디어쿼리

 

 

◈ 애니메이션 ◈

 

• Animation

애니메이션은 웹 요소들을 부드럽게 움직이거나 변화시키는 기능을 수행함

*keyframe 외에도 다른 속성과 기능들이 있음

 

• 속성

 

 

◈ 애니메이션 속성 ◈

 

• animation-name: [이름]

애니메이션 이름

 

• animation-duration: [초]s

애니메이션이 완료(0%  100%) 까지 걸리는 시간

 

• animation-timing-function: [속성값]

애니메이션의 시간에 따른 변화 속도

 

• 속성값 종류

1. linear : 처음부터 끝까지 일정한 속도로 진

2. ease : (Default) 천천히 시작되어 빨라지고, 마지막에 다시 느려짐

3. ease-in : 천천히 시작

4. ease-out : 천천히 종료

5. ease-in-out : 천천히 시작되어 천천히 종료

 

• animation-iteration-count: [속성값]

애니메이션의 반복 횟수를 지정함

 

• 속성값 종류

1. number : 숫자로 지정하여 반복 횟수를 설정 (소수점 사용 가능)

2. infinite : 무한 반복

 

• animation-delay: [초]s

애니메이션이 시작되기 전의 대기 시간을 지정

 

• animation-play-state: [속성값]

애니메이션의 재생 상태를 결정

 

• 속성값 종류

1. paused : 중지

2. running : 실행

 

 

 

◈ 키프레임 ◈

 

• keyframe Animation

시간 순서대로 각 구간별 어떠한 스타일을 적용할지 정의할 수 있음

 

• 색상과 크기 변경

 

 

• 위치 이동

 

 

• 회전

 

 

• 페이드 인/아웃

 

 

◈ 미디어 쿼리 ◈

 

• 미디어 쿼리(Media Query)

반응형 웹 디자인을 할 때 기본이 되는 기능으로써, 뷰포트의 크기에 따라 서로 다른 레이아웃을 생성할 수 있음

 

• 자주 사용되는 속성

 

 

• 미디어 쿼리(Media Query)

 

 

 

애니메이션과 키프레임 그리고 미디어 쿼리에대해 정리를 해보았다! 그럼 20000!!