[CSS] Animation (@keyframes)
@keyframes는 CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법이다.
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#rectangle {
width: 100px;
height: 100px;
background: red;
position: absolute;
animation: move 5s infinite; //한줄에 속성을 여러개 작성할 수 있다.
animation-direction: alternate;
}
@keyframes move {
from {
top: 0px;
opacity: 0;
}
to {
top: 200px;
opacity: 1;
}
}
</style>
</head>
<body>
<div id="rectangle"></div>
</body>
</html>
해당코드를 복사하여 창에 띄어보면 빨간색 네모 상자가 움직이는것을 확인해 볼 수 있다.
from to 대신에 0% 100%와 같이 %로 작성할 수도 있다.
Animation 속성은 애니메이션에 이름을 지정하거나 지속시간, 속도조절 등을 지정할 수 있는 속성을 가지고있다.
애니메이션 속성의 종류
animation-name : @keyframes 이름 (예제에서는 move 을 사용)
animation-duratuion : 타임 프레임의 길이, 키프레임이 동작하는 시간을 설정할 때 사용
animation-timing-function : 애니메이션 속도 조절 / 그래프 ( linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier )
animation-delay : 애니메이션을 시작하기 전 지연시간 설정
animation-iteration-count : 반복 횟수 지정
animation-direction : 반복 방향 설정 ( 정방향 / 역방향 / 번갈아가며)
animation-fill-mode : 애니메이션 시작 / 끝 상태 제어 ( none / forwords / backwords / both )
ex)
여러줄 속성 지정
animation-name: fadeOut;
animation-duration: 4s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate;
한줄 속성 지정
animation: fadeOut 4s 1s infinite linear alternate;
댓글
댓글 쓰기