반응형
1. CSS 애니메이션
- 웹 페이지를 보다 시각적으로 역동적이게 움직이게 하기 위한 스타일 기능
- 이 속성은 블록 요소(Block Element)를 기본으로 하여, 일반적으로 div 블록을 사용
* 애니메이션의 대표적인 속성
| transform | 트랜스폼은 요소 이동, 크기 변경, 위치, 색상 등 속성 변경 수행 |
| transition | 트랜지션은 시간 경과에 따라 하나의 속성 상태가 다른 속성 상태로 변형 |
| transform과 transition이 짝이고, @keyframe와 animation이 짝이다 | |
| @keyframe | 키프레임 애니메이션을 만들 수 있도록 해주는 블록 키워드 |
| animation | 키프레임 애니메이션 실행을 위해 CSS에 설정해주는 속성 |
2. transform / transition
- transform
- 시간 개념이 포함되지 않는 것으로 변경 후의 결과 값만 표시한다.
(변경 전은 보이지 않고 후만 보임)
- scale(n) : n배 만큼 크게
- translate(100px, -100px) : (가로, 세로) 순으로 양수이면 오른쪽/아래이고, 음수면 왼쪽/위이다.
- ratate(180deg) : 180도 돌림
transfrom: 변형함수(파라미터);
transform: 변향함수1(파라미터) 변형함수2(파라미터) 변형함수3(파라미터)...;
transform: scale(2.0) translate(-200px, 200px) rotate(360deg); - transition
- 시간 개념을 갖는 전이에 대한 설정
- 기본적으로 transform과 같이 사용하여 애니메이션 효과를 적용
- 즉, 시간 순서에 대한 상태 전이는 transition으로 형태 변형은 transfrom으로 함
transition: 속성 || 애니메이션시간 || 타이밍방식(전이방식) || 지연시간;
transition: all 0.5s; (모든 요소를 0.5초 동안)
<html>
<body>
<div class="box"></div>
</body>
</html>
<style>
div {
width: 100px;
height: 100px;
background-color: yellow;
border: 1px dotted gray;
}
div:hover {
background-color: blue;
transform: scale(1.3) translate(100px, 100px) rotate(180deg);
transition: all 2s ease 0.2s;
}
</style>
3. @keyframe / animation
- @keyframe
- 전문적인 애니메이션 도구의 키프레임 기능과 같이 시간 순서에 따라 요소의 동작을 정밀하게 제어할 수 있는 다양한 전용 속성들을 설정
// 1.0배에서 1.3배까지 왔다갔다
@keyframes heartbeat {
from { transform: scale(1.0); }
to { transform: scale(1.3); }
}
// 1.0 ~ 1.3 ~ 1.0배 로 시간을 퍼센트로 나눠서 왔다갔다
@keyframes heartbeat {
0% { transform: sclae(1.0) }
50% { transform: scale(1.3) }
100% { transform: scale(1.0) }
} - animation
- 키프레임 애니메이션 실행을 위해 설정해주는 속성(실제 실행은 이걸로)
- @keyframes를 선언하고 animation을 선언해줘야 애니메이션이 실행된다.
// 1초로 3번 반복
animation: heartbeat 1s 3 ease;
<html>
<body>
<div id="box" class="anim"></div>
</body>
</html>
<style>
div {
width: 100px;
height: 100px;
background-color: yellow;
border: 1px dotted gray;
}
.anim {
background-color: blue;
animation: movebox 1s ease forwards;
}
@keyframes movebox {
from {transform: scale(0.5);}
to {transform: scale(1.3) translate(300px, 300px) rotate(180deg);}
}
</style>
반응형
'FrontEnd > CSS' 카테고리의 다른 글
| [CSS] CSS Flex(Flexible Box) - Items (0) | 2022.10.12 |
|---|---|
| [CSS] CSS Flex(Flexible Box) - Container (0) | 2022.10.12 |
| [CSS] CSS 위치 지정 및 화면 중앙 배치 (0) | 2022.10.06 |
| [CSS] CSS float, clear 속성 (1) | 2022.10.05 |
| [CSS] CSS 배경 이미지(background-image) (0) | 2022.10.05 |