애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes) 들로 이루어진다.
일반적으로 트랜지션(transition) 효과는 :hover 와 같은 가상 클래스 선택자(Pseudo-Class Selector) 또는 자바스크립트의 이벤트와 같은 부수적 액션에 의해 발동된다.
즉 transition 프로퍼티는 단순히 요소의 프로퍼티 변화에 주안점이 있다면 animation 프로퍼티는 하나의 줄거리를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어할 수 있고 전체 줄거리의 재생과 정지, 반복까지 제어할 수 있다.
| 속성 값 | 설명 | 기본값 |
| animation-name | @keyframes 애니메이션 이름 지정 | |
| animation-duration | 애니메이션에 소요되는 시간 지정 | 0s |
| animation-timing-funcion | 애니메이션 효과를 위한 타이밍 함수 지정 | ease |
| animation-delay | 요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기 시간 지정 | 0s |
| animation-iteration-count | 애니메이션 재생 횟수 지정 | 1 |
| animation-direction | 애니메이션이 종료된 이후 반복될 때 진행하는 방향 지정 | nomal |
| animation-fill-mode | 애니메이션 미실행 시(종료 또는 대기) 요소의 스타일 지정 | |
| animation-play-state | 애니메이션 재생 상태(재생 또는 중지)를 지정 | running |
| animation | 모든 애니메이션 속성을 한번에 지정 (Shorthand) animation: name duration timing-function delay interation-count direction fill-mode play-state |
1. @keyframes : 애니메이션의 흐름을 시점(point)로 지정
from, to로 설정하거나 더욱 세부적으로 하고 싶으면 백분율을 통해 설정한다. 0%, 50%, 100%
2. animation-timing-funcion
트랜지션 transition-timing-funcion 속성과 같은 함수. https://hrin-0820.tistory.com/31
CSS-속성전환(transitions)
트랜지션(transition)은 background, color, width, height, fransformation 등의 CSS 속성 값이 변화할 때, 일정 시간(duration)에 걸쳐 부드럽게 변경할 수 있도록 하는 것이다. 속성 값 설명 기본값 transition..
hrin-0820.tistory.com
3. animation-direction
| 속성 값 | 설명 |
| nomal | 기본값. from(0%)에서 to(100%) 방향으로 진행 |
| reverse | to에서 from 방향으로 진행 |
| alternate | 홀수번째는 normal로, 짝수번째는 reverse로 진행 (시작과 마지막 키프레임 속성이 같을 경우) |
| alternate-reverse | 홀수번째는 reverse로, 짝수번째는 normal로 진행 (시작과 마지막 키프레임 속성이 같을 경우) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation-direction</title>
<style>
div.box1{width: 100px; height: 100px;
background: red; position: relative;
animation: direc 5s infinite;
animation-direction: alternate;
}
@keyframes direc{
0% {background: red; left: 0; top: 0;}
25% {background: yellow; left: 200px; top: 0;}
50% {background: blue; left: 200px; top: 200px;}
75% {background: green; left: 0; top: 200px;}
100% {background: red; left: 0; top: 0;}
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>'CSS' 카테고리의 다른 글
| CSS-다단편집(multi-column) (0) | 2020.08.24 |
|---|---|
| CSS-애니메이션(Animation) Icon 예제 (0) | 2020.08.24 |
| CSS-속성전환(transitions) (0) | 2020.08.24 |
| CSS-Transform (0) | 2020.08.24 |
| CSS- Vendor Prefix (벤더 프리픽스) (0) | 2020.08.20 |
댓글