티스토리 뷰
키프레임(keyframe)
- 에니메이션 중간에 스타일이 바뀌는 지점
- @keyframes 속성으로 정의하고, animation 속성과 그 하위 속성을 이용해서 애니메이션의 실행 시간이나 반복 여부 등을 지정한다.
자주 사용하는 에니메이션 속성
1) 애니메이션의 지점과 이름을 설정하는 @keyframes 속성, animation-name 속성
- 애니메이션의 시작과 끝을 비롯하여 상태가 바뀌는 부분이 있다면 @keyframes 속성을 이용해 바뀌는 지점을 설정한다.
- 또한 웹 문서에서는 애니메이션을 여러 개 정의할 수 있으므로 이름을 이용해 애니메이션을 구별해야 한다.
- 이때 animation-name 속성으로 어떤 애니메이션을 사용할지 이름으로 구분한다.
- @keyframes 속성에서 사용하는 선택자는 스타일 속성값이 바뀌는 지점을 가리킨다.
ex) 중간 지점을 추가하려면 시작 위치를 0%, 끝 위치를 100%로 놓고 50% 위치에 키프레임을 추가한다.
시작과 끝 위 치만 사용하려면 0%, 100%와 같은 값 대신 from과 to라는 키워드를 사용해도 된다.
2) animation-duration : 애니메이션의 실행 시간을 지정
- animation-duration 속성은 애니메이션을 얼마동안 재생할 것인지 설정한다.
- 사용할 수 있는 값은 초(s)나 밀리초(ms)와 같은 시간 단위
- 기본값은 0
- animation-duration 속성값을 정하지 않으면 애니메이션은 실행되지 않는다.
예제1 - 3초 동안 애니메이션 실행되게 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Animation Test1</title>
<style>
#container{
width:500px;
margin:20px auto;
}
.box{
width: 100px;
height: 100px;
float:left;
margin:50px;
}
#box1 {
background-color: orange;
border: 1px solid transparent;
animation-name: shape; /* 애니메이션 지정 */
animation-duration: 3s; /* 애니메이션 실행 시간 */
animation-iteration-count: infinite;
}
#box2 {
background-color: blue;
border: 1px solid transparent;
animation-name: rotate; /* 애니메이션 지정 */
animation-duration: 3s; /* 애니메이션 실행 시간 */
animation-iteration-count: infinite;
}
@keyframes shape { /* shape 애니메이션 정의 */
from {
border: 1px solid transparent; /* 1px짜리 투명한 테두리 */
}
to {
border: 1px solid #000; /* 검정색 테두리 */
border-radius: 50%; /* 테두리를 둥글게 */
}
}
@keyframes rotate { /* rotate 애니메이션 정의 */
from {
transform:rotate(0deg) /* 시작은 0도에서 */
}
to {
transform: rotate(75deg); /* 75도까지 회전 */
}
}
</style>
</head>
<body>
<div id="container">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
</div>
</body>
</html>
실행 결과
3) animation-direction : 애니메이션의 방향을 지정
- 기본적으로 keyframes 에서 정의한 from->to 순서로 움직임
- 그런데 이 속성을 이용해서 진행 방향을 바꿀 수 있음.
속성값
4) animation-iteration-count : 반복 횟수를 지정
- 애니메이션을 반복해서 보여줘야 할 때는 animation-iteration-count 속성을 사용해 반복 횟수를 정한다.
속성값
4) animation-timing-function : 애니메이션의 속도 곡선을 지정
- 애니메이션의 시작, 중간, 끝에서 속도를 지정하여 전체 속도 곡선을 만든다.
5) 애니메이션의 속성을 한꺼번에 표기하는 animation 속성
- 한 줄씩 따로따로 작성하지 않고 한꺼번에 표기하는 방법.
- 주의할 점은 애니메이션 속성을 사용할 때 animation-duration 속성을 반드시 표기해야 한다는 것.
- 실행 시간을 지정하지 않으면 기본값으로 0이 적용(효과 나타나지 x)
마지막 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Animation Test2</title>
<style>
.box {
width: 100px;
height: 100px;
margin: 60px auto;
animation: rotate 1.5s infinite, background 1.5s infinite alternate;
}
@keyframes rotate { /* 0도 -> x축 -180도 회전 -> y축 -180도 회전 */
from { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
50% { transform: perspective(120px) rotateX(-180deg) rotateY(0deg); }
to { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); }
}
@keyframes background { /* 배경색 빨강 -> 초록 -> 파랑 */
from { background-color: yellow; }
50% { background-color: orange; }
to { background-color: red; }
}
</style>
</head>
<body>
<div class="box"> </div>
</body>
</html>실행 결과
728x90
반응형
'[개발] - Front > Mega-CSS' 카테고리의 다른 글
| 18. 미디어 쿼리 (0) | 2023.06.05 |
|---|---|
| 17. 반응형 웹 (0) | 2023.06.04 |
| 15. 트랜지션 (6) | 2023.06.03 |
| 14. 변형 (1) | 2023.06.03 |
| 13. 가상 클래스와 가상 요소 (0) | 2023.05.17 |
Comments
Related Articles
more
