기본2 위치이동입니다.
1. 먼저 사각형 하나를 만들어 주고,
키프레임을 지정합니다.
키프레임에는
from 부분에 left 0px,배경색 파란색
to 부분에 left 100px, 배경색 빨간색
으로 지정해두면
파란색으로 시작해서 오른쪽방향으로 100px가면서 빨간색으로 변하는 에니메이션이 만들어집니다.
2.
animation-timing-function 에니메이션이 변하는 구간속도를 설정할수있습니다.
에니메이션이 이동하는 모습을 잘 보고 있으면, 느리게 시작했다가 중간에 빠르고 다시 느려지는걸 볼수 있습니다.
이것은 기본값인 ease 로 설정되어 있어서 그런것이고, 밑에와 같이 여러가지 방식들이 있습니다
이렇게 6가지 설정이 가능하고 베지에 형식을 사용하면 사용자가 속도를 조절할수 있습니다.
3. 직접 2가지만 비교해보겠습니다.
ease 와 ease in 의 차이입니다.
구지 영상을 안넣어도 사진만봐도 알수가 있습니다.
4.
animation-iteration-count = 반복횟수입니다.
저렇게 실행시켜놓으면 한번하고 끝입니다.
animation-iteration-count =2 라고 하면 두번 반복하게 됩니다.
그냥 추가작성해서 보시면 직관적으로 금방 알수 있습니다.
5.
animation-direction =방향입니다
reverse , alternate ,alternate-reverse 가 있습니다.
너무나 직관적이게도
아무것도 안적으면 원래 방향대로 가게되고-즉 지금저기 위에껄로 보자면 왼쪽에서 오른쪽 으로가게됨
reverse 라고 해두면 오른쪽에서 왼쪽으로 가게됩니다.
중요 한게 alternate 인데 이건 왼쪽에서 오른쪽으로 갔다가 오른쪽에서 다시 왼쪽으로 오게 됩니다.
그래서 기본적으로 반복횟수가 2회 이상이어야 합니다.
alternate-reverse는 처음에 반대로 시작하는거 말고는 alternate와 같습니다.
6번 반복이니까
이렇게 해두면 왕복3회 하겠네요.