CSS 애니메이션에서 사용하는 주요 속성
1. @keframes
@keframes 다음에는 반드시 name을 정해야 하며, 애니메이션에서 적용될 지점을 설정 한다.
- 2 단계 변경: from{} 변경전 , to{} 변경후 내용을 설정함
- 3단계 이상 변경 : %로 변경지점 설정 ( 총 4단계 일 경우 예시 : 0% {} 25%{} 50% {} 75% {} 100% {} )
2. animation-name
움직일 요소 안에 지정해야하는 필수 요소이며,
@keyframes 에서 지정한 name과 일치 시켜야 애니메이션을 실행 할수 있다.
3. animation-duration
움직이는 총 시간을 설정하는 요소로 애니메이션 사용을 위한 필수 요소이며 속성에는 초 단위를 설정한다.
(1초 = 1s = 1000ms)
4. animation-iteration-count
애니매이션을 위한 필수 속성이며, 움직이는 반복 횟수 지정하는 요소로 숫자 또는 infinite로 설정 한다.
(1 = 한뱡향 1회, infinite = 무한대)
5. animation-direction
움직이는 방향을 지정하는 속성
(normal: 기본 값으로(순방향)이며 생략 가능
alternate: 양방향 움직임 2이상 설정 하거나 infinite 함께 지정필요)
6. animation-delay
애니메이션 움직이기 전 지연시키는 속성으로 초 단위로 설정하며, 최초 움직임에만 적용된다.
7. animation-timning funtion
애니메이션의 움짐임 속도를 정하는 속성으로 5가지 속도를 설정할수 있다.
(esae, ease-in, ease-out, ease-in-out, linear)
8. animation-play-state
마우스를 올렸을 때 멈추거나 다시 움직이도록 설정하는 속성으로로 running과 paused를 사용한다. .
9. animaiton
속성값을 한번에 묶어 간단하게 사용할수 있다.
CSS 애니메이션 연습 코딩
1. 2단계 애니메이션 (animation1.html)
마우스를 올릴시 도형의 2단계 변화
(도형 모양, 도형 색, 폰트 크기, 폰트 색, 텍스트 정렬, 패딩, 보더 색
2. 애니메이션 뱡향과 속도 (animaiton2.html)
마우스를 노란 박스에 올릴 시 파랑박스들의 움직임 시작 뱡향과 움식임 속도 변경, 움식임 멈춤과 시작
3. 다단계 애니메이션 (animation3.html)
도형의 1~4단계 변화 (도형크기, 도형 색)
4. 다중 애니메이션 도형의 움직임(animation4.html)
동시 여러개 애니메이션 실행
