📖 최성일, ⌈Do it! 인터랙티브 웹 페이지 만들기⌋, 이지스퍼블리싱, 2021
/* 태양이 회전하는 키프레임 */
@keyframes sun {
0% {
opacity: 0;
transform: rotate(-90deg);
}
25% {
opacity: 1;
transform: rotate(-30deg);
}
50% {
opacity: 1;
transform: rotate(30deg);
}
75% {
opacity: 0;
transform: rotate(90deg);
}
100% {
opacity: 0;
transform: rotate(-90deg);
}
}
/* 사람과 구름을 오른쪽으로 이동시키는 키프레임 */
@keyframes flow {
0% {
left: 0%;
opacity: 0;
}
10% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
left: 90%;
opacity: 0;
}
}
section .sky .sun {
...
animation: sun linear 20s infinite;
}
section .sky .cloud1 {
...
animation: flow linear 10s infinite;
}
JavaScript 이벤트 핸들러를 사용하지 않고, 기본 HTML과 CSS의 animation 속성을 사용하여 UI 모션을 만드는 방법을 학습했다. 키프레임을 설정하고 하나씩 호출하며 애니메이션이 적용되는 것을 확인했다.