기본적인 에니메이션을 해 보겠습니다.
색상이 변경되는 에니메이션입니다.
1. 우선 기본적으로 사각형 박스를 하나 만들어 줍니다.
2. 에니메이션 정의를 하나 세워줍니다.
선택자를 지정할때는 .과 #을 써서 .class , #id 이렇게 썼는데요
에니메이션을 지정할때는 @골뱅이 를 써서
@keyframe 이라고합니다. 에니메이션의 규칙을 정하는 속성입니다.
쓰는방법은
@keyframe 에니메이션이름{
from{}
to{}
}
입니다.
@keyframes color {
from {background-color: blue;}
to{background-color:red;}
}
라고 하면 이 에니메이션의 이름은 color 이고
배경이 파랑에서 레드로 바뀐다는 의미입니다.
3.정의된 에니메이션을 html에 씌여봅니다.
animation-name : 에니메이션이름;
animation-duration: 에니메이션 실행시간;
여기서 에니메션이름은 @keyframes 에서 지정한 에니메이션 이름을 넣어주고
실행시간은 대충 5s 넣어주면
파란색에서-빨간색으로 바뀌는 에니메이션이 5초에 걸쳐 일어나게됩니다.
데코레이션 효과처럼 색상이 연속적으로 자연스럽게 변합니다.
1초로 넣어주면 순식간에 변하겠지요.
4 . animation-name,
animation-duration
이외에 다른것들도 있습니다. 3가지를 말씀드리면
*animation-delay = 딜레이를 주면 실행시키고 지정한 만큼 뒤에 이벤트가 발생합니다.
*animation-timing-funtion = 이름이 거창하긴한데 어떤거냐면 저기 에니메이션 보면 처음엔 천천히 변햇다가 빨라졋다가 다시 느려지는걸 볼수있는데 그런걸 조절하는겁니다
*animation-iteration-count = 반복횟수입니다.
*animation-direction = 방향입니다. 방향에는 세가지가 있는데
reverse , alternate ,alternate -reverse 가 있습니다.
위에 파란색으로 된 세개는 에니메이션기본2 에서 하고
delay 부분은 그냥 간단하니까 각자 해보시면 되겠습니다.
이상입니다