웹 애니메이션 CSS와 애니메이션
페이지 정보
작성자 모던DS
조회 52회
조회 52회
본문
CSS와 애니메이션
CSS와 애니메이션의 이론적 기초
CSS 애니메이션은 요소의 스타일을 한 상태에서 다른 상태로 부드럽게 전환하는 기술입니다.
단순히 시작과 끝만 정의하는 트랜지션과 달리, 애니메이션은 중간 단계인 키프레임을 활용해 훨씬 정교한 움직임을 설계할 수 있습니다.
웹 요소에 애니메이션 추가: 정적인 웹 페이지에 생동감을 부여하며, 사용자의 시선을 끌거나 인터랙션에 반응하는 디자인을 가능하게 합니다.
자유로운 스타일 정의: 애니메이션이 시작되어 끝나는 전체 시간 흐름 속에서, 원하는 시점마다 개발자가 직접 스타일을 변경하며 애니메이션을 정의할 수 있습니다.
키프레임(keyframe)의 개념: 애니메이션의 타임라인상에서 스타일이 바뀌는 구체적인 지점을 의미합니다.
애니메이션의 작동 원리 (Workflow)
정의: @keyframes를 사용하여 어떤 스타일이 언제 바뀔지 시간 순서대로 작성합니다.
연결: 애니메이션을 적용할 HTML 요소를 선택하고 animation-name으로 위에서 만든 키프레임을 연결합니다.
제어: duration, iteration-count 등의 속성을 통해 얼마나 길게, 몇 번이나 반복할지 세부적인 동작을 제어합니다.
애니메이션 관련 속성
| 종류 | 설명 |
| @keyframes | 애니메이션이 바뀌는 지점을 지정합니다. |
| animation-delay | 애니메이션의 시작 시간을 지정합니다. |
| animation-direction | 애니메이션을 종료한 뒤 처음부터 시작할지, 역방향으로 진행할지 지정합니다. |
| animation-duration | 애니메이션의 실행 시간을 지정합니다. |
| animation-iteration-count | 애니메이션의 반복 횟수를 지정합니다. |
| animation-name | @keyframes로 설정해 놓은 중간 상태를 지정합니다. |
| animation-timing-function | 키프레임의 전환 형태를 지정합니다. |
| animation | animation 속성을 한꺼번에 묶어서 지정합니다. |
<style> .box { width: 100px; height: 100px; margin: 60px auto; border:1px solid #222; /* 3차원 회전하는 애니메이션과 배경색을 변경하는 애니메이션을 동시에 적용하기 */ animation: rotate 1.5s infinite, background 1.5s infinite; } /* 3차원 회전하는 애니메이션 정의하기 0도 -> x축 -180도 회전 -> y축 -180도 회전 */ @keyframes rotate { 0% { /* 0%에서 0도 회전 */ transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { /* 50%에서 x축 -180도 회전 */ transform: perspective(120px) rotateX(-180deg) rotateY(0deg); } 100% { /* 100%에서 y축 -180도 회전 */ transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); } } /* 배경색을 변경하는 애니메이션 정의하기. 빨강 -> 초록 -> 파랑 */ @keyframes background { 0% { /* 0%에서 빨강으로 시작 */ background-color: red; } 50% { /* 50%에서 초록으로 변경 */ background-color: green } 100% { /* 100%에서 파랑으로 변경 */ background-color: blue; } } </style> |
- 이전글자바스크립트(JavaScript) 란 무엇인가? 26.02.28
- 다음글CSS 트랜지션(Transition) 기초설 26.02.28