애니메이션 속성 @keyframes
<@keyframes> 속성 : 애니메이션이 변경되는 지점을 설정
'키프레임' 애니메이션의 시작 지점을 설정할 때 해당 지점.
CSS 에서는 애니메이션이 변경되는 모든 지점을 설정. 키프레임 안에서 시간에 의해 변화되는 부분은 선택자로 입력.
선택자는 0%를 시작 위치로 표현하며, 100%를 끝나는 위치로 표.
키워드 사용시에는 from이 시작 키프레임, to가 마지막 키프레임 중간에 시간의 흐름을 한 번 더 지정하고자 한다면 50%라고 선택자를 지정하여 변화된 스타일 값을 넣어주면 됨.
<animation-name> 속성 : 애니메이션 이름 지정.
@keyframes 애니메이션의 이름을 지정.
움직이는 요소에 대한 스타일 지정 시 animation-name을 통해 이름을 지정하고 움직이는 요소의 @keyframes 속성에도 동일한 이름 지정.
<animation-delay> 속성 : 지연되는 값
애니메이션이 지연되는 속도를 초로 지정.
<animation-duratin> 속성 : 애니메이션 실행 시간 설정
초수를 값으로 지정.
기본 값은 0으로 애니메이션이 실행되지 않음.
<animation-timing-function> 속성 : 애니메이션의 이징 효과
애니메이션 속도에 속도감을 줄 때 사용.
linear, ease, ease-in, ease-out, ease-in-out
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0; padding: 0;
}
#wrap {
position: absolute; width: 200px; height: 200px; border-radius: 100px; text-align: center;
/* 그레이디언트 배경 - colorzilla.com */
background: linear-gradient(to bottom, rgba(135, 224, 253, 1) 0%, rgba(83, 203, 241, 1) 40%, rgba(5, 171, 224, 1) 100%);
/* 애니매이션의 동작을 지정 */
animation-name: rint; /* 애니메이션 이름 지정 - rint */
animation-duration: 2s; /* 애니매이션을 몇 초 동안 재생할지 지정 */
animation-timing-function: linear; /* 수처 변형 함수를 지정, 애니매이션 속도의 변화 */
/* animation-iteration-count
애니메이션의 반복 횟수를 설정하며 3회 반복할 경우 3을 값으로 설정
무한 반복을 원할경우 infinite라고 값을 설정
animation-iteration-count: 3; - 3회반복 */
animation-iteration-count: infinite; /* 무한반복 */
animation-direction: 애니메이션이 시작되는 방향 설정. normal이 기본값
normal : 매 사이클마다 정방향으로 재생
즉, 순환 할 때마다 애니메이션이 시작 상태로 재설정되고 다시 시작. 계속 from에서 to로 이동. 기본값.
reverse : 사이클마다 역방향으로 재생 즉 순환 할때마다 애니메이션이 종료 상태로 재설정되고 다시 시작.
애니메이션 단계가 거꾸로 수행, 역방향으로 움직임.
alternate : from에서 to로 이동 후 to에서 from으로 이동을 반복. 매 사이클마다 각 주기와 방향을 뒤집으며,
첫번재 반복은 정방향으로ㅓ 진행
alternate-reverse : 매 사이클마다 각 주기의 방향을 뒤집으며, 첫번재 반복은 역방향으로 진행
역방향으로 움직인 후 정방향으로 움직임
animation-direction: alternate;
}
animation-play-state
애니메이션의 재생 및 중지 반응 선택자와 함께 사용하여 제어
예 #wrap:hover { animation-play-state : paused; } 애니메이션 중지
#wrap:hover {
animation-play-state: paused; /* 마우스를 올렸을 때 애니매이션 중지 */
}
#wrap > h1 {
line-height: 200px;
}
/* 애니메이션의 각 키프레임의 변화되는 부분 */
@keyframes rint { /* 애니메이션 rint의 키프레임과 변화되는 움직임 */
from { /* 애니메이션이 10초라고 가정하면 0초 시점 */
left: 0px; /* 왼쪽좌표 */
transform: rotate(0deg); /* 변형속성 : 각도 0도에서 시작 */
}
50% { /* 애니메어션이 10초라고 가정하면 5초시점 */
left: 1500px; /* 왼쪽좌표 */
}
to { /* 애니메이션이 10초라고 가정하면 10토시점 */
left: 500px; /* 왼쪽좌표 */
transform: rotate(360deg); /* 변형속성 : 각도 360도에서 끝 */
}
}
</style>
</head>
<body>
<div id="wrap">
<h1>animation</h1>
</div>
</body>
</html>
