animation? transition?
CSS3 animation은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 준다.
animation은 animation을 나타내는 CSS 스타일과 animation의 중간 상태를 나타내는 keyframes들로 구성되어 진다.
그렇다면 의문이 생길 수 있다. animation과 transition의 차이가 무엇인가?
animation 은 transition보다 훨씬 더 규모가 크고 복잡하며 다양한 능력을 가지고 있기 때문에 좀 더 정밀한 효과를 구할 수 있다.
따라서 간단하게 크기가 커진다던가 opacity값이 달라진다던가 하는건 transition! Keyframes를 사용하여 시작 중간 끝 부분이 달라지게 세세하게 컨트롤 하고 싶다면 animation을 사용해야 하는것이다.
animation의 단일 속성들
1️⃣ animation-name : 애니메이션의 중간 상태를 지정하기 위한 이름을 정의한다. 중간 상태는 @keyframes 규칙을 이용하여 기술한다.
2️⃣ animation-duration : 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정한다.
3️⃣ animation-delay :엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정한다.
4️⃣ animation-direction : 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정한다.
5️⃣ animation-iteration-count : 애니메이션이 몇 번 반복될지 지정한다. infinite 로 지정하여 무한히 반복할 수 있다.
6️⃣ animation-play-state : 애니메이션을 멈추거나 다시 시작할 수 있다.
7️⃣ animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정한다.
8️⃣ animation-fill-mode : 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정한다.
CSS 사용 예시
.object {
animation-name: 1s;
animation-duration: 2s;
animation-delay: 1s;
animation-direction: alternate;
animation-iteration-count: 3;
animation-play-state: paused;
animation-timing-function: 1s;
animation-fill-mode: both;
}animation-name
name 은 @keyframes 속성에서 설정한 애니메이션의 이름이다. 이름을 설정해야 애니메이션을 재생할 수 있다. 즉, 이름을 정의해야 애니메이션을 재생(호출)할 수 있다.
주의할점은 숫자로 시작하는 이름은 설정 불가능!
@keyframes 과 animation
애니메이션을 재생할 각 프레임의 스타일을 정의하는 것으로 from 속성이나 0% 속성에 설정한 스타일에서 출발해 to 속성이나 100% 속성에 설정한 스타일로 점차 바뀌면서 애니메이션이 재생된다.
키프레임은 애니메이션을 적용할 요소의 animation-name 을 정의하고 그 키프레임 코드 블럭에 재생할 프레임별 시간 비율을 작성한다.
0% : 애니메이션의 시작 프레임이다.
100% : 애니메이션의 마지막 프레임이다.
from : 애니메이션의 시작 프레임이다. 0% 와 같다.
to : 애니메이션의 마지막 프레임이다. 100% 와 같다.
0%와 100% 사이에는 여러 개의 중간 값(%)을 설정해 프레임을 작성할 수 있다.
@keyframes animationName {
from {
css-styles;
}
to {
css-styles;
}
}@keyframes move {
0% {
top: 0px;
}
25%{
top: 20px;
}
75%{
top: 175px;
}
100%{
top: 200px;
}
}