출처- https://youtu.be/krdFNe2R27E
@keyframes 는 움직임 시간의 흐름을 관리하는 규칙.
@keyframes name{
from{ /* 속성: 값 */ } /* from : 애니메이션의 시작 장면 */
n% { /* 속성: 값 */ } /* n% : 시작점부터 n% 흐른 시점의 장면. ex) 시작점부터 50% 흐른 시점 */
to { /* 속성: 값 */ } /* to : 끝이 되는 장면 */
}
/* 여기서 장면은 실제 추가적인 장면이라기 보다는 프레임 단위의 행위..? 동작..? 을 뜻하는 듯 함 */animation-name : @keyframes 애니메이션의 이름을 지정해서 요소로 가져온다.
animation-duration : 애니메이션이 한 주기를 완료하는데 걸리는 시간을 정의
animation-delay : 애니메이션 시작에 대한 지연을 지정.
animation-iteration-count : 애니메이션을 재생해야 하는 횟수를 지정.
animation-direction : 애니메이션을 앞으로, 뒤로 또는 번갈아 재생해야 하는지 여부를 정의
animation-timing-function : 애니메이션의 속도 곡선을 지정
animation-fill-mode : 애니메이션이 재생되지 않을 때(시작 전, 종료 후 또는 둘 다) 요소의 스타일을 지정
animation-play-state : 애니메이션이 실행 중인지 일시 중지되었는지 지정.
1.animation-name & animation-duration (ctrl + F 를 이용하면 찾기가 편합니다.)
css
/* 애니메이션 선언 */
/* img를 왼쪽 끝에서 오른쪽 끝으로 보내는 애니메이션. */
@keyframes move{ /* move 라는 이름의 애니메이션 선언 */
from{ /* 애니메이션의 시작점 */
left: 0;
transform: rotate(0deg);
}
to{ /* 애니메이션의 끝점 */
left: 500px;
transform: rotate(360deg);
}
}
/* animation-name 등장 */
img{
animation-name : move; /* 애니메이션을 적용할 태그 or 클래스에 애니메이션 move를 연결 */
animation-duration : 1s; /* 애니메이션이 동작할 시간. 이걸 적용안하면 애니메이션이 동작하지 않음. */
position : relative; /* move를 보면 left 라는 속성을 사용했음. 이는 position 속성으로 기준점을 잡아줘야한다. */
}
/* img가 여러개라면 각각의 이미지의 duration을 따로 줄 수도 있음. */
img:nth-child(1){ /* :nth-child(n) 에서 첫 번째 자식은 0이 아니라 1이다. */
animation-duration : 1s;
}
img:nth-child(2){
animation-duration : 2s;
}
2. animation-iteration-count
css
/* 우선 1번에서 이용한 keyframes를 그대로 이용. */
img:nth-child(1){
animation-iteration-count : 1; /* 기본 값, 한 번 재생 */
}
img:nth-child(2){
animation-iteration-count : 4; /* 네 번 재생 */
}
img:nth-child(3){
animation-iteration-count : infinite; /* 무한 재생 */
}
3. animation-direction
상단의 keyframes를 이용..
/* animation-direction 은 애니메이션을 앞으로, 뒤로, 또는 번갈아 재생 할 것인지를 정한다. */
img:nth-child(1){
animation-direction : normal; /* 기본 값, 정방향 */
}
img:nth-child(2){
animation-direction : reverse; /* 역방향 */
}
img:nth-child(3){
animation-direction : alternate; /* 왕복 - 애니메이션 재생 횟수가 많아야함. 그래야 왕복이 보임. */
}
img:nth-child(4){
animation-direction : alternate-reverse; /* 역방향 왕복 */
}
4. animation-delay
/* 상단의 keyframes 이용 */
/* 애니메이션 시작 전 delay(지연)를 걸어줌 */
img:nth-child(1){
animation-delay: 0.5s;
}5. animation-fill-mode
/* 상단의 keyframes 이용 */
/* animation-fill-mode : 애니메이션이 재생되지 않을 때(시작 전, 종료 후, 혹은 둘 다) 요소의 스타일을 지정 */
img:nth-child(1){
animation-fill-mode : backwards; /* 정지시 첫 번째 키프레임(from)으로 이동. */
}
img:nth-child(2){
animation-fill-mode : forwards; /* 정지시 마지막 키프레임(to)으로 이동. */
}6. animation-play-state
/* 상단의 keyframes 이용 */
/* animation-play-state : 애니메이션이 실행중인지, 일시 중지 되었는지 지정. */
img:hover{/* 이미지 위에 마우스를 올려 두었을 때. */
animation-play-state : paused; /* 제자리에 멈춤. 이미지에서 마우스를 떼면 다시 움직임. */
}7. animation-timing-function
/* 상단의 keyframes 이용 */
/* animation-timing-funtion : 애니메이션의 속도 곡선을 지정. */
img:nth-child(1){
animation-timing-funtion : ease; /* 기본 값(기본 속도) */
}
img:nth-child(1){
animation-timing-funtion : ease-in; /* 가속 */
}
img:nth-child(1){
animation-timing-funtion : ease-out; /* 감속 */
}
img:nth-child(1){
animation-timing-funtion : ease-in-out; /* 시작은 감속 돌아올 때는 감속 */
}
img:nth-child(1){
animation-timing-funtion : linear; /* 균등 속도 */
}
img:nth-child(1){
animation-timing-funtion : cubic-bezier(0.785,0.135,0.15,0.86);; /* 속도 곡선을 임의로 만듦 */
}
animation 도 한줄로 작성 할 수 있다.
animation : /* 이름 시간 속도 지연시간 횟수 방향 fillmode playstate; */
animation : /* (name) (duration) (timing-funtion) (delay) (iteration-count) (direction) (fill-mode) (play-state); */'CSS' 카테고리의 다른 글
| transform(x축,y축,z축 회전)(+position과의 차이)(3/2공부) (0) | 2023.03.02 |
|---|---|
| 2/13 공부 (반응형) (0) | 2023.02.13 |
| 2/8 공부 (0) | 2023.02.09 |
| 2/7 공부 (0) | 2023.02.07 |
| 공부 2/6 (0) | 2023.02.06 |